Stack Overflow
Stack Overflow

Questions tagged [swiper.js]

Swiper is a free mobile touch slider with hardware accelerated transitions and native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Homepage

https://swiperjs.com/

Docs

https://swiperjs.com/swiper-api

Syntax

const swiper = new Swiper('.swiper-container', {
  speed: 400,
  spaceBetween: 100,
});
2165 questions
0
votes
0 answers

Swiper js move the navigation icons out of the container

Here the swiper navigation icon is inside the container. But I need outside. The margin padding doesn't do the trick. I'm using React. My Codes:
Rupok Koiry
  • 1
  • 1
0
votes
2 answers

Pause other videos when slide is changed | Swiper.js | React Player

I need help for my video carousel using Swiper.js and React Player. I want to stop the video when swiped and became inactive slide. I set the state like below and it does behave as I wanted. But now, it autoplays the active slide even autoplay prop…
Chi
  • 276
  • 1
  • 8
  • 20
0
votes
3 answers

customize arrow of swiper js

I customerized the arrow shape and color of swiper js by adding svg, but it did not have any functionality. And I ended up having two sets of arrows on each side, one is my own arrow button which does not function, the other one is built in swiper…
jimzhou
  • 41
  • 1
  • 1
  • 8
0
votes
0 answers

My swipper next button is working in localhost but not in netlify deployed site

The refs changes the slides. It is working fine in my localhost but when it is deployed in netlify this buttons does not change the slide. Below is my code. import React, { useRef } from 'react'; import { Swiper, SwiperSlide } from…
Yeasir Hossain
  • 10
  • 6
0
votes
0 answers

How to use navigation button outside swiper container to navigate slide

const Inspiration: React.FC = () => { return (

Inspiration

wave
Nhi Nguyễn Bùi Mẫn
  • 1
0
votes
0 answers

React swiper height and width

I'm using swiper library for react app. The Swiper component has this weird space that I don't know how to fill and also I don't know how to set up the height for it. I am trying to get the blank space highlighted in orange to fill with Card…
Lukas Luke Stateczny
  • 513
  • 8
  • 24
0
votes
1 answer

Swiper. Dynamic change of pagination parameters

How to change pagination parameters dynamically? For example enable/disable dynamicBullets on button click. I'm trying to change the value through: mySwiper.params.pagination.dynamicBullets = .... And then I…
abvas
  • 1
0
votes
1 answer

grid property of Swiper component of react not working as intended with NextJS and Tailwind CSS

The title says it all. I just cant figure out how to make the grid property to work correctly. I want to display images in 2rows but swiper is not working at all. The code and current outcome is provided below-
AbyssWalker
  • 33
  • 4
0
votes
0 answers

How to cancel automatic completion of swiper

In swiper, I set slidesperview to 5, and slidespergroup is calculated based on my list data. If the length of list data is 11, then slidespergroup is 3, then the first page is 5, the second page is 5, and the third page is 1. But in fact, there are…
王婕妤
  • 1
0
votes
2 answers

same codepen codes doesnt work on my local?

i am searching some pens on codepen.Found a slider and tried to run on my local but even i add external css and js but still not dislpay anything.Checked all code lines but couldnt see the problem. my html file
jsnewbie
  • 21
  • 5
0
votes
1 answer

How can I change the number of slides shown per click with swiper js?

For example, I have 6 slides, and I would like it to show in "threes" on click rather than going clicking the button one by one for each slide. I checked the Swiper Methods & Properties but couldn't find what I was looking for. Any suggestions on…
Parit Sawjani
  • 729
  • 8
  • 24
0
votes
1 answer

How to destroy multiple swipers JS on the page

Trying to destroy several swipers on the page, but somehow the array I get in the destroy part (on the desktop width) is always empty. the initialization on the resize to mobile works fine. tried several ways? but the array always comes empty …
Masha Baranova
  • 1
  • 2
0
votes
0 answers

Is there a way to toggle swipe direction using a single right arrow key using swiperJs?

I am using swiperJs and am able to create an image carousel with custom arrow keys. In my case, I am using only the right arrow and upon clicking it the arrow turns 180deg to point left and it is supposed to now swipe left (instead of right) when…
Amit Pathak
  • 1,145
  • 11
  • 26
0
votes
1 answer

How to take text from attributes for custom pagination?

I used swiper.js to create the slider. You need to create a custom pagination with text. Now pagination is implemented, but I take the text from the array and substitute it into the pagination. And I need to take it from the date attribute in html.…
userName
  • 903
  • 2
  • 20
0
votes
0 answers

Any way to set height of every swiper to 450px and have ones larger than that scroll?

I am trying to use swiper with my ionic/angular project to swipe between content. One template has a total height of around 1400px and the other template is around 450. I'd like to have both templates set to the height of 450px but the first one to…
Joe Starnes
  • 471
  • 1
  • 6
  • 20
1 2 3
…
99 100