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
42
votes
2 answers

Swiper slides - showing end/start of previous/next slides like Airbnb Slider?

Above is the slider from Airbnb. Is there a way to get a similar effect with Swiper? For the first slide, there is a blank space on the left and start of the next slide. For the middle slide, there is the start and end of previous and next slides.…
Dee
  • 909
  • 3
  • 10
  • 18
40
votes
15 answers

CSS - How to have swiper slider arrows outside of slider that takes up 12 column row

I am using swiper slider and would like to have navigation arrows outside of the slider. What I would basically like to do is the same as it looks like on airbnb site, where slider with images takes up whole 12 column row, but arrows are outside of…
Leff
  • 1,968
  • 24
  • 97
  • 201
38
votes
14 answers

Module not found: Can't resolve 'swiper/react'

I'm also having the same problem with the latest version of Swiper. It worked on my previous project but not working right now. Not even that version. Tried on the latest version too. Here is my code. // Import Swiper React components import {…
Arik Chakma
  • 481
  • 1
  • 4
  • 4
38
votes
19 answers

Module not found: Can't resolve 'swiper/css'

Swiper 7.0.5 swiper/css gives error Module not found: Can't resolve 'swiper/css' import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; function Test() { return (
Ibad Ur Rehman
  • 696
  • 1
  • 9
  • 16
37
votes
25 answers

How to customize arrow buttons in Swiper

How can I customize the arrow buttons below from swipers?
I did it crudely but it does not seem to be the right way because I get some margin on the right of the…
Run
  • 54,938
  • 169
  • 450
  • 748
34
votes
14 answers

Swiper React | How to create custom navigation/pagination components using React refs?

SwiperJS documentation states that navigation prevEl/nextEl can either be of type "string" or "HTMLElement". Using string selectors is easy enough as: const MySwiper = (props) => (
maeertin
  • 421
  • 1
  • 4
  • 6
33
votes
11 answers

Swiper slider not working unless page is resized

I'm trying to add the Swiper plugin to one of my page. What I'm trying to achieve is to integrate get the carousal slider over here http://idangero.us/swiper/demos/05-slides-per-view.html HTML
LiveEn
  • 3,193
  • 12
  • 59
  • 104
25
votes
7 answers

React SwiperJs autoplay not making the swiper to auto swipe

I am using this swiper in React: https://swiperjs.com/react/ I tried to make it "autoplay" but it doesn't auto swipe. This is what I tried: // https://swiperjs.com/get-started/ import React from 'react'; import { Swiper, SwiperSlide } from…
Yuval Levy
  • 2,397
  • 10
  • 44
  • 73
25
votes
16 answers

How can I have multiple Swiper slideshows on a single page?

I'm using Swiper Slideshow. I'm using this particular version. Here's the exact code I'm using. When adding a second Swiper, the pagination doesn't work properly. I tried giving a different class to the second Swiper container but it didn't…
David Martins
  • 1,830
  • 6
  • 22
  • 30
22
votes
8 answers

How to use swiper 9 with angular

I'm actually migrating to Angular 15 and saw that swiper 9 was out. It's written that a simple npm i swiper and that it should work, since Custom elements are supported in all major browser and by almost every framework. But I'm a bit lost since I…
Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78
20
votes
13 answers

SwiperJS - How do you style the Pagination Bullets?

Using SwiperJS in my ReactJS application. I've imported the default style bundle, but can't figure out how to style the pagination container or the bullets. In the pagination: param within ... Every time I change the el: param, the pagination just…
wongz
  • 3,255
  • 2
  • 28
  • 55
19
votes
14 answers

Disable Swiper Slider if only 1 slide

I'm using swiper slider on a site and would like to have it disabled if there is only one slide. Currently with only one slide the pagination appears and you can click that or swipe. Ideally there shouldn't be any interaction if there is only one…
CreateSean
  • 1,286
  • 1
  • 21
  • 42
19
votes
7 answers

How to detect current slide in swiper js?

Working with swiper js for a slider and want to detect the current image/slide. how i can detect with HTML and JS? any idea?
…
Ravi Ranjan
  • 407
  • 1
  • 3
  • 16
19
votes
1 answer

Swiper height auto resize

I have added swiper code in [REMOVED]. my code like here
…
ryush00
  • 455
  • 1
  • 5
  • 21
19
votes
9 answers

idangerous swiper issue with dynamic content

I am applying the idangerous swiper scrollbar plugin on a container whose content is dynamically loaded with ajax, I initialize the plugin after the ajax call, the issue is that the scroll doesn't work until I resize the browser. I have tested it…
Yasmine
  • 1,959
  • 5
  • 21
  • 37
1
2 3
…
99 100