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
3 answers

Stop and Start autoplay in swiper container based on the Video play and pause event

I am trying to put a combination of video and image elements inside the swiper container with auto-play attribute. But I tried to stop the autoplay function in swiper when the video is playing and start the autoplay when the video is paused or…
Thajudeen K
  • 11
  • 1
  • 3
0
votes
1 answer

Swiper js autoheight prop not resizing for first slide height

So, I'm using SwiperJs with autoheight. I expected that on slide change the container adapts its height depending on the content (simple images in my case). And it does update on slide change. The problem is that on first load the slide seems to…
Nuno Lemos
  • 9
  • 1
  • 4
0
votes
0 answers

Using zoom with Swiper JS for React

I have a slider which is rendered using map(). I need to apply zoom to an img, SwiperJS documentation for React doesn't say anything about it :( I used zoom from swiperJS modules, didn't help const Blog = () => { return ( < < Swiper…
Adlan
  • 23
  • 4
0
votes
0 answers

Swiper js - filtering/removing slides

I'm facing a problem playing with swiperjs. I need to filter swiper slides but according to the swiper API we have some methods designed for slides manipulation as swiper.removeSlide(slideIndex) etc. This is fine however when we run this method we…
Maciej Koson
  • 1
0
votes
1 answer

Swiper JS vertical slider showing only 1 row of items

I'm trying to create a simple vertical slider that shows only 1 item using Swiper JS V8 jQuery(document).ready(function ($) { var termsSwiper; let swiperSettings = { direction: "vertical", navigation: { nextEl:…
odedta
  • 2,430
  • 4
  • 24
  • 51
0
votes
0 answers

How can I use this javascript function by accessing it in an Angular event?

In my .ts file inside the class itself, I set this class with different properties, like slides in the virtual object. Question - I want to access and add more slides in my .ts file in both the ngOnInit and in some event, but I can't seem to figure…
chuckd
  • 13,460
  • 29
  • 152
  • 331
0
votes
1 answer

Add button outside of Photoswipe Lightbox to open first image with Alpine JS

I have a Photoswipe Lightbox applied to a SwiperJS gallery, and I would like to add a button outside the lightbox-wrapper, that opens the first image, no matter what the current visible image is. Here's the code that populates the gallery and…
Rvervuurt
  • 8,589
  • 8
  • 39
  • 62
0
votes
1 answer

swiper element inside swiperComponent does not exists angular13

i have imported swiperComponent in my appComponent in angular13: import { SwiperComponent } from 'swiper/angular'; and imported in the class with ViewChildren: @ViewChildren('swiperSlideShow') swiperSlideShow!: QueryList; In the…
softwareplay
  • 1,379
  • 4
  • 28
  • 64
0
votes
1 answer

Loading SwiperComponent in appComponent Angular 13 with ViewChild

I have a simple carousel in angular 13 appCoponent and i would like to stop and resume the autoplay but i am getting The swipercomponent to be undefined but it's not behind any ngif or other shadowing directive so the problem probably lays in the…
softwareplay
  • 1,379
  • 4
  • 28
  • 64
0
votes
2 answers

How to add Pagination to Swiper carousel in a React app?

I use "swiper": "6.8.4" in React app and create carousel. Everything is working, except pagination - its not appearing on the page. Do you see what I do in a wrong way? swiper pagination api docs ... function Carousel() { return (
Adel D.
  • 3
  • 3
0
votes
1 answer

SwiperJs slides not showing on Django template

So,I am trying to show images in slider in my small blog. In my index page I am looping through all my blogs. And If I have images, I am looping through images in Swiper js slider. I think I have done everything appropriately. But no image or slider…
Captain America
  • 25
  • 2
  • 7
0
votes
1 answer

SwiperJS not sliding slides with ReactJS

I'm having problems, crating a slider which slides in react. I importted swiper and installed ist via terminal with npm install swiper. MY Swiper looks like this in the HTML: And this is the frontEnd: Th slider gets shown, but i cannot slide it,…
slideBruv
  • 80
  • 13
0
votes
0 answers

Swiperjs Custom Pagination in the loop

I've found here on stack how to create custom pagination for swiperjs and the code is like this: new Swiper('.swiper', { pagination: { el: '.pagination', clickable: true, renderBullet: function (index, className) { return `
user3420510
  • 11
  • 3
0
votes
0 answers

Swiper.js SwiperSlide render props not working properly with Swiper loop set to true

I'm kinda stucked into a problem where isPrev and isNext SwiperSlide render props are not working correctly in a Swiper with loop prop set into true. What I am trying to achieve is to have a fading transform effect that depends on which direction…
Amia
  • 96
  • 6
0
votes
0 answers

Where can i find detailed documentation about how to implement Swiper slider in React?

Does anyone know how to implement the Swiper slider properly in React? Basically, I want to know how to implement autoplay, loop, and navigation buttons properly.
Md. Monirul Islam
  • 1
1 2 3
…
99
100