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

How do I customize the scrollbar in a Swiper JS slider?

I'm trying to create a slider with a scrollbar similar to something like this: Has a sort of toggle (the red circle) that, much like the progress bar on youtube or any online video, can be dragged to progress further along the slider. I've found…
Channing Ellison
  • 13
  • 1
  • 6
0
votes
1 answer

access 'Swiper' before mount

Vue version: 3 Swiper version: 6 I'm using Swiper dependency with Vuejs and I can't access Swiper instance before mount when I do this:
amin bahaddi
  • 3
  • 3
0
votes
1 answer

Making 2 SwiperJS scripts work together - 2nd one not working when other init script is added to same page

Having trouble making 2 swiperJS Sliders work together. The conflict seems to be in the for each, or the JS column in codepen / the external script file that initializes the slider. Anyone have any ideas on how i can get them both to work together?…
Churchill
  • 19
  • 5
0
votes
1 answer

SwiperJS how to make it possible to swipe on slides with youtube iframe?

I use iframe from YouTube as slides in SwiperJS. But swipe event doesn't fire on iframe. How is it possible to slide over videos from youtube? Of course, it should be possible to play the videos. Thanks Example…
TonyRandom
  • 23
  • 1
  • 4
0
votes
1 answer

I want to add class to images inside active slider

I want to add "active-image" class to images inside Active class. The "active-image" class should be removed from the images inside all slides whose class is not active. I have an animation. When I add your "active-image" class to the images, it…
Samet
  • 1
  • 1
0
votes
1 answer

How to place swiper on circle with space between two centered slides?

My problem is to place swiperjs slides on a circle. Everything I've been able to achieve so far can be seen here: https://codesandbox.io/s/swiper-effect-creative-forked-vvyl73?file=/index.html The problem is that the company logo should be placed…
user677117
  • 31
  • 4
0
votes
1 answer

useSWR to pass dynamic 'Cards' in to a dynamic index on slides in Swiperjs

I am currently experiencing issues when trying to pass data from my Slider (SwiperJS as parent component) in to my dynamic Card component as a child. I am using SWR to data fetch from an api endpoint (dummy data) in order to test functionality. Here…
Yan
  • 161
  • 1
  • 13
0
votes
0 answers

Video tag not stretching video to full height in safari

I am building a website that has a video swiper as banner (swiper.js). On chrome both on desktop and android everything is fine, the video stretches to fill the height and respects the object-fit: fill. print of the banner in desktop But on safari,…
Diego Lopes
  • 3
  • 2
0
votes
2 answers

ngFor - Display 3 Images of Array in 1 Swipe before next "swiperSlide" starts

I have a swiper with images in the array "ktv", but I want to display 3 images one below the other, before the next "swiperSlide" begins. Any solutions for this ngFor?
Knut Becker
  • 101
  • 5
0
votes
1 answer

Problems with map and swiper carousel in JavaScript

I want to pass the images of an array of objects into the divs of a swiper slider carousel but when I do the map into the fetch to creat the HTML of the img tag with the value of the object who holds the image it doesn't work properly, it shows all…
Zuri Ruiz
  • 1
0
votes
1 answer

How can I use autoplay with Swiper Js

I create a slider in my html page with SwiperJS and display in my page correctly:
RSD
  • 87
  • 9
0
votes
5 answers

swiper-thumbs-gallery-loop-react not working in react js

I'm facing an issue I want to create a swiper thumb gallery slider. the issue is that when I copy code from swiper js and paste it into my react app it's not working and getting an error called The above error occurred in the component: while the…
Mithlesh Patel
  • 41
  • 1
  • 5
0
votes
3 answers

Get smooth scroll to slide on another page using Swiper

When I click the button 'back' on a certain page, it goes back to the page with a swiper and to that slide within a swiper (the button has an anchor and the slides within the swiper have data-hash attribute). The only problem is that it shows the…
Katarina Perović
  • 361
  • 1
  • 5
  • 22
0
votes
0 answers

How to automatically play unmuted video when changing slides

I have a video slideshow that is created using Swiper JS. Ideally I'd like to make the videos automatically play without muting them when changing slides. I have a play button on top of the video. I don't want users to keep clicking the play button…
Vaeianor
  • 169
  • 1
  • 4
  • 15
0
votes
1 answer

I am using Swiper Library to create carousel. i want to center my card element in center but i am not able to do

I am using Swiper Library to create carousel. i want to center my card element in center but i am not able to do. here is important component code please help me. i am using styled component with swiper library. const Wrapper = styled(motion.div)` …
Het Patel
  • 109
  • 7
1 2 3
…
99 100