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

AOS.js not animating on slide swipe using Swiper.js

I'm using Swiper.js to slide between sections, and also AOS.js to animate on scroll. I want to animate the text within the swipe sections, but only the text within the first section animates and it does it only once when the page is loaded, instead…
Katarina Perović
  • 361
  • 1
  • 5
  • 22
0
votes
1 answer

Reactjs swiper not starting properly - error "TypeError: Cannot convert undefined or null to object"

I am using Swiperjs to make a gallery but it 'expodes' the whole app on initialization. If I recall, I copy/pasted the code from their website (https://codesandbox.io/s/fbs9e8?file=/src/App.jsx) and adapted it. I think it is because the initial…
Tom Ash
  • 11
  • 2
0
votes
2 answers

Gradients on edges of swiper carousel

I want behavior like the one on this airbnb web page. Specifically, the one in the below image. As you can see, at the edges of the carousel, it has a fading effect only on slide that are cut off. This is what I have so far:…
bravesheeptribe
  • 157
  • 7
0
votes
0 answers

Adjust width Swiper React to screen

I am using Swiper React to creater a Carousel Slider from a map of an object received from an API. Here is my code :
Johan
  • 2,088
  • 2
  • 9
  • 37
0
votes
1 answer

Swiper doesn't find useEffect from React in NextJS

I'm having issues integrating Swiper into my NextJS project. I've created a component with a basic Swiper configuration (the one in the docs) but it fails to find useEffect from React when included in an already working page. If I remove the…
Reynau
  • 194
  • 9
0
votes
0 answers

css messing up when dynamically appending to swiper js slide

I have an array of elements and i'm trying to chunk the array and dynamically append every element to a swiper js slide. My chunk strategy is to chuck the array every 5 elements and I am looping on the chucked new arrays and appending every element…
seriously
  • 1,202
  • 5
  • 23
0
votes
0 answers

Swiper.JS Next Button moving 1.5 slides

I am using Swiper.JS to create a two row card slider. Problem: When pressing the next button, instead of transitioning to the next slide, the slider moves about 1.5 slides in total, which leaves the next slide cut in half and nearly skipped…
Devon Regular
  • 11
  • 4
0
votes
1 answer

Move pagination outside a component in Slider React

I have a problem trying to move a pagination bullet outside the slider, specifically below the slider image. This is how I define the swiper.
ngeof94
  • 39
  • 1
  • 8
0
votes
1 answer

Swipeable Tabs With Active Tab

How're you doing guys. Please I need your help on this matter. I've found this code on codepen : https://codepen.io/grahn195/pen/oNZvwRL and it works very perfectly on codepen.io I wanted to create three swipeable tabs, and I've succeeded to create…
The Rock Developers
  • 1
0
votes
1 answer

ReferenceError: Swiper is not defined white using next js

I am trying to import swiper in nextjs project using cdn link given in official documentation. here's my code import React from 'react' import Image from 'next/image' import Head from 'next/head' import swiper from '../Configuration/swiper' const…
Data Universe
  • 1
  • 1
  • 3
0
votes
1 answer

How to use variables to configure Swiper's breakpoints in React?

This code works:
Big boy
  • 1,113
  • 2
  • 8
  • 23
0
votes
0 answers

Fixed Element in Swiper Slide relative to Slide

I´m trying to have two images in one slide where I want the second one to work as a lightbox. But I can´t get the div of the second image to be fixed. It´s always relative to the swiper slide, but I want it to be fixed over the whole screen. Here´s…
n1k1dk
  • 33
  • 1
  • 5
0
votes
1 answer

SwiperJS css animation disable swipe function

I want to add some animation to swiperjs to tell user this slider has swipe function and you can swipe to slide, animation working good but it conflict with swiperjs default swiping function, and you can not swipe slides, is there any solution to…
Jack The Baker
  • 1,781
  • 1
  • 20
  • 51
0
votes
2 answers

Can't use ref to select swiper methods

I am trying to invoke .slideNext() & .slidePrev that come with swiper when the user presses the arrow keys. I've managed to do this with querySelector like this: const changeSlide = (event: KeyboardEvent) => { const slides =…
Marnix Elling
  • 335
  • 1
  • 3
  • 15
0
votes
1 answer

swiper.destroy() is not working when have multiples sliders on a page

I have a bunch os swiper instances in the same page and need to destroy/init them based on screen width: const mobile = window.matchMedia('(max-width: 575.98px)'); function instantiateGridSlider() { const sliders =…
marcelo2605
  • 2,734
  • 4
  • 29
  • 55
1 2 3
…
99
100