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

components are not loading in next js using swiper

The homepage is blanked using swiper in nextjs. and also all the components within the file also not loaded in the browser using swiper. I guess the other dependencies of the package.js may cause the problem. The problem needs to be solved as I…
Rajib khan
  • 9
  • 3
0
votes
0 answers

Ionic-Angular: How to remove white space after last slide in Ionic

I did this code below but it didn't work enter image description here
Aldrich LAWSON
  • 1
0
votes
0 answers

Swiper.js + Elementor

I'm trying to change the bullets for a swiper instance in Elementor to dynamic, but having issues. I'm not a javascript wiz by any means so I'm piecing things together with the example show on here:…
Robert
  • 21
  • 3
0
votes
0 answers

swiper js not updating loop not working properly in react

enter image description here (please ignore my English i'm from India) this above image show when swiper create loop is not working until i manually slide. here is my swiper code. when i slide then loop show all duplicate slides. function…
Vikas soni
  • 17
  • 2
0
votes
0 answers

SwiperJs - maintaining zoom ratio/scale when moving through slides

I'm using a Swiper Component (v8.3.2) in an Ionic Capacitor app (Angular) I'm building. I need to be able to keep the current zoom ratio/scale when moving to a previous or next slide. But I'm a bit stuck how to implement this, if possible at…
BigPete
  • 1
0
votes
0 answers

Swiper JS in React Project

I have installed and imported swiper js. I have the following data: const data = [ { avatar: me, name: 'abc', review: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam adipisci saepe porro optio necessitatibus nobis…
Ujjwal Kuikel
  • 1
  • 1
  • 4
0
votes
0 answers

SwiperJS - Pinch zoom not zooming in correct pinched area

When I pinch zoom on an image, it does not zoom in on the area where I pinched. It does not center on the part between the two fingers. Site to try it out: https://swiperjs.com/demos#zoom Tested the demo site on an iPhone in Safari and integrated a…
BigPete
  • 1
0
votes
1 answer

Swiper - prevent click on parent element when drag

Is there a quick solution to prevent click at parent element when I release drag on slider? Problem: click on the product card is counted when the user drags a photo in the slider. What way to make sure that a click on the product card is not…
Lex2000
  • 155
  • 1
  • 1
  • 12
0
votes
2 answers

Swiper Js cannot read properties of undefined ('reading includes)

I have this component I wrote for reviews using swiperjs in a react and nextjs project but I have been getting an error with seems to be coming from this reviews component saying Unhandled Runtime Error TypeError: Cannot read properties of undefined…
Chidimma Nworah
  • 159
  • 11
0
votes
0 answers

Swiper less imports return an error on build

I am creating a customization package of swiper. I have installed swiper 8.3.2 and I'm importing files in a swiper.less files, like so: @import (less) 'swiper/less'; @import (less) 'swiper/less/navigation'; @import (less)…
florinpavel
  • 35
  • 5
0
votes
0 answers

How to set Swiper width to fit-content in Angular

I have my swiper inside a mat dialog with slidesPerView: 1. The height is set as 100%. But I can't seem to make the width of the overall container equal to the active slide. I have an image inside each slide with margin: auto, thus centering the…
Urooj
  • 151
  • 7
0
votes
0 answers

Swiper gives error when trying to create bundle "Error [ERR_REQUIRE_ESM]: require() of ES Module --- not supported"

I am creating a component library using react, storybook, scss, and bundling using rollup. I am using commonJs module but swiper js only support esModule and because of that when I am trying to import my library in the application it's giving me the…
Archana Agivale
  • 317
  • 1
  • 3
  • 14
0
votes
0 answers

Swiper active slide come first in react

I have a Swiper slider and I want the active slide to come first when I navigate between the slides. The active slide is bigger than the others and it has a different component.
fateme barzegar
  • 31
  • 6
0
votes
1 answer

Swiper slide brakes after hide images with [display: "none"]

I really need help with this. I'm building a slider with swiper js I have a product with few options, the idea is to filter the images that don't match with the option selected. I know swiper has a lot of method and events, but the closest I found…
EricMainhard
  • 21
  • 2
0
votes
0 answers

I am working on a project and using swiperJS to create a slider but the breakpoints are not working, your help would be very much appreciated

I am working on a project and using swiperJS to create a slider but the breakpoints are not working, your help would be very much appreciated. Everything else is working with the exception of the breakpoints...... Here is the code...