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
16
votes
5 answers

JavaScript Swiper Native Navigation Function is not working

I´m using swiper to make a slider on my website. Unfortunately the navigation isn´t working in Chrome.. The buttons appear but don´t do anything. This is my code:
philippblack
  • 169
  • 1
  • 1
  • 3
15
votes
3 answers

jQuery Swiper script to run after Ng-Repeat elements are loaded

I'm making a web app using AngularJS, jQuery, HTML, CSS and Bootstrap, and I would like to pick some image links from my JSON that is located in an Apache2 server and use them in order to render those images in my main page. I would also like to…
AndreaM16
  • 3,917
  • 4
  • 35
  • 74
14
votes
6 answers

Go to a specific slide with iDangerous Swiper

If I have a custom menu. How can I go to a specific slide at any moment in Swiper.js?
  • go to slide 3
  • go to slide 5
  • go to slide 1
    • …
user2654675
  • 141
  • 1
  • 1
  • 4
13
votes
5 answers

How to change swipe direction in swiper.js?

I'm struggling with changing swipe direction when I rotate my swiper on 90deg. So in the beginning by default it has horizontal direction. When clicking on slide I'm rotating "swiper-container" making it full screen . So it still has swiping…
Yerlan Yeszhanov
  • 2,149
  • 12
  • 37
  • 67
13
votes
10 answers

Stop swiper slide autoplay on mouse enter and start autoplay on mouse leave

How to stop swiper slide autoplay on mouse enter and start autoplay on mouse leave? I have tried .stopAutoplay() and .startAutoplay() function but not worked for me. thank you here is code. and i face console error Uncaught TypeError: swiper…
Mahmudul Hasan Sohag
  • 879
  • 1
  • 7
  • 11
13
votes
3 answers

My swiper with Swiper.js stop autoplay after slide it with finger, why?

var mySwiper = new Swiper('.myswiper', { autoplay: 3000, simulateTouch: true, loop: true, preloadImages: true, speed: 200, pagination: '.swiper-pagination' }); While this is my initial swiper, and…
Alex Lee
  • 141
  • 1
  • 1
  • 5
12
votes
4 answers

How to use useSwiper outside a Swiper instance?

I'm using Swiper for React to show some slides. I'm stuck at using external buttons to navigate between slides (previous and next). Swiper has a useSwiper hook that can provide programmatic access to its Swiper instance API. But it does not…
jumpo marketing
  • 477
  • 1
  • 6
  • 12
12
votes
1 answer

swiperjs to set automatically the number of sildes per view

I am creating a photo carousel using swiperJS ref link here. Here are the params of the swiper: mySwiper = Swiper('.swiper-container', { loop: false, speed: 800, slidesPerView: 'auto', grabCursor: true, spaceBetween: 2, …
moaningalways
  • 461
  • 1
  • 10
  • 21
12
votes
6 answers

destroy iDangerous Swiper if window is resized to a bigger resolution or call it when resized to a smaller resolution

i'm using iDangerous Swiper for my website in lower resolutions. here is how i'm calling it: var resolution = 670; if ($(window).width() < resolution) { var mySwiper = $('.swiper-container').swiper({ mode:'horizontal', loop: true, …
fksr86
  • 229
  • 1
  • 4
  • 16
11
votes
9 answers

Swiper grid module is not working as expected

For two days, I've been really struggling to run a functional Swiper Grid option with my Next.js app. I've tried many stackoverflow solutions and tried different ways to make this grid behavior work with my application, alas! all attempts failed and…
Siddiqui Noor
  • 5,575
  • 5
  • 25
  • 41
11
votes
5 answers

How can I test swiper with Jest?

I'm creating unit testing of Swiper using Jest. Here is my code: https://codesandbox.io/s/swiper-default-react-forked-v0dnz?file=/src/App.test.jsx ● Test suite failed to run Cannot find module 'swiper/react' from 'src/App.jsx' Require…
Neil Liu
  • 111
  • 1
  • 4
10
votes
2 answers

How to move to slide in swiper.js and react

I'm using swiper.js library in my react app. I want to use slideTo method form swiper API but I don't know how can I do that. Link to not working demo from swiper website My code const swiperRef = useRef(null) useEffect(() => { //...some logic …
Pawel Nackiewicz
  • 219
  • 3
  • 10
10
votes
5 answers

Setting the active slide in swiper/react with react state

I would like to ask if there is a way to control/set the active slide with swiper/react? I have tried to handle the onSwiper function with props but still cant update the slide index. Thank you
Carlo Carpio
  • 101
  • 1
  • 1
  • 3
10
votes
7 answers

Swiper pagination not showing

First time using swiper ,I followed the documentation and added the html part in my code ,then initialize it in JS, I initialize pagination but it is not showing on my page. This is my code: JS: var Swiper = require('swiper'); …
Fulvio
  • 229
  • 1
  • 3
  • 10
10
votes
4 answers

How can I get the index of the current slide, when the slide is changed?

I have the following mySwiper = new Swiper('.my-swiper', { direction: 'vertical', loop: true, }); mySwiper.on('slideChange', function () { console.log('*** mySwiper.realIndex', mySwiper.realIndex); }); But realIndex always returns the…
Bafsky
  • 761
  • 1
  • 7
  • 16
1
2
3
…
99 100