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
10
votes
1 answer

Swiper - wrong width on init, correct width after resize

I am working on a project using Swiper and everythings working fine after resizing the window. But on init the width of the slides is not correct. I tried reproducing this locally but without success. I set 4 slides per View, but it's calculating…
paulhaem
  • 113
  • 1
  • 1
  • 7
10
votes
8 answers

iDangero.us Swiper slide count when loop is true

I'm using iDangero.us Swiper js for a webpage, and initialization code is as following: var mySwiper = new Swiper( '.swiper-container', { direction: 'horizontal', loop: true, speed: 600, nextButton: '.slider-control-next', …
Hakim Jaya
  • 103
  • 1
  • 1
  • 5
9
votes
1 answer

swiper -- slidesPerView={'auto'} wont work for me

im working on a swiper. my intention is to collect some in slider but i dont want to use breakPonit attribute for responsively work. i want to slidesPerView, automatically fill the swiper wrapper. i read the document and use Demo... the resault is…
Hamid Saif
  • 153
  • 1
  • 7
9
votes
3 answers

Error 'swiper-slide' is not a known element after migrating from ion-slides

I updated my Angular Ionic 5 application and trying to migrate from ion-slides to Slides. I am following the official docs. I installed swiper npm install swiper@6 Did import in the scss file @import '~swiper/swiper'; Did import the SwiperModule in…
Tapas Mukherjee
  • 2,088
  • 1
  • 27
  • 66
9
votes
1 answer

What's the usage of longSwipes and shortSwipes config in swiper？

When I read the swiper's docs, I can not get what's the usage of longSwipes. Can anyone tell me ? It's best to give an example. Thanks. https://swiperjs.com/swiper-api#swiper-full-html-layout
chesszhang
  • 205
  • 1
  • 8
9
votes
1 answer

Custom effect that simulates a 3d wheel with Swiper 5

I need to build a carousel with 12 items that simulate a 3d wheel rotating infinitely. To be clear, I need to create precisely this effect: https://codepen.io/SitePoint/pen/yXWXaw (found here) but with these adding features (on desktop and mobile…
Fred K
  • 13,249
  • 14
  • 78
  • 103
9
votes
5 answers

How init Swiper in VueJS?

first of all thank you for your time because I spent all the morning on this issue. How use the https://idangero.us/swiper module on vue.JS ? Indeed Swiper is on the page but the parameters seems to be not taken in count. I tried also vue awesome…
Brugher
  • 143
  • 2
  • 2
  • 13
9
votes
1 answer

Why Javascript sliders break my css flex layout?

i am learning css flexbox and i have one problem with javascript sliders. I have tested several (lightgallery.js, swiper.js, siema.js) but everytime it seems to break my flexbox container. I have a main element and an aside element. On mobile, i…
studiok7
  • 97
  • 1
  • 8
9
votes
3 answers

Swiper Touch Events - Enable click but disable drag

I am using Swiper 3.4.2 slider with thumbs as a pagination slider. And I need to disable drag on the pagination slider but to enable click events so the main slider can be changed by clicking on thumbs in the pagination slider. var galleryThumbs…
Mladen Janjetovic
  • 13,844
  • 8
  • 72
  • 82
9
votes
2 answers

Multiple swiper initialization on a single page?

I am trying to use multiple carousals on a single page. and each time the user uses only one of the carousal. so i want to initialise only one of the swiper instance at once. http://codepen.io/pruthvip/pen/ZWYbby $('.swiper-container').on(…
Pruthvi P
  • 536
  • 1
  • 7
  • 31
8
votes
3 answers

How to access this.$refs in