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.

Filter by
Sorted by
Tagged with
0 votes
0 answers
5 views

slideTo method doesn't work in swiperjs - nuxt-swiper library

I am making a slider using swiper.js in nuxt project(nuxt-swiper library) that has a thumbnail gallery and I want the top slider to change to the desired slide when I click on any of the photos in the ...
coder's user avatar
  • 31
0 votes
0 answers
14 views

create slider with gallery thumbnail using swiper.js - nuxt-swiper

I want to make a slider with a gallery thumbnail using swiper.js in nuxt project(nuxt-swiper library) so that when the top slider slides, the thumbnail also changes and vice versa. I also set ...
coder's user avatar
  • 31
0 votes
1 answer
35 views

Swiper how to render x next slides

I have been trying to use SwiperJS https://swiperjs.com/, however there seems to be no option that I can find to be able to set that when the slide goes out of view on the left it returns to the right ...
famasskiller's user avatar
0 votes
0 answers
21 views

How can I turn off or turn on Swiper autoplay and change the delay dinamically using php? While I want to create a custom Elementor widget

I'm trying to change the autoplay parameter of swiper slide dynamically for a custom Elementor widget. I've tried to pass a string dynamically as a object in the swiper class. But it's not working. (...
Rasib's user avatar
  • 13
0 votes
0 answers
25 views

Swiper Js styles take time to load after page refresh in Next JS. Swiper slides are stretched till Next Js loads style. How to fix this?

I have Next 14.0.3 app with tailwind CSS. I installed swiper JS of version 11.0.5 with npm. Problem is when I reload page, swiper styles take 1 or 2 seconds to load. Swiper slides become fully ...
Abdullah Abbasi's user avatar
0 votes
0 answers
4 views

run swpier js with webpack

I still can not see the dots under the slider and the arrows not functional. could you please help. webpack has one entry entry.js contains the following import 'normalize.css'; import '../sass/style....
user14691677's user avatar
0 votes
0 answers
29 views

Swiper JS slider with text content

Can some one help me to develop a slider using swiper js or Gsap with the below design. I tried swiperjs and i am not able to have a dynamic slides. https://i.stack.imgur.com/Fy9e9.jpg new Swiper(&...
senthilnathan's user avatar
-1 votes
0 answers
28 views

Swiper JS breaking when sliding left [closed]

I have a slider which displays one full slide and two other slides which only half of them is displayed. This slider works well when using arrows. However when I try using my mouse to slide from ...
Ali 's user avatar
  • 1
0 votes
0 answers
10 views

[email protected] element lag when used on angular 14

When i use Swiper Element in my angular project, I encountered lag when scrolling, hovering and modals. Hear is my config Html Component In module import { register } from 'swiper/element/bundle'; ...
Nhật Lê Đức's user avatar
0 votes
2 answers
132 views

Swiper slider. Different svg icons as pagination

Is it possible to render four different svg icons as pagination bullets in Swiper slider? Here is the HTML code: <div class="swiper"> <div class="swiper-wrapper"> ...
Alex B's user avatar
  • 3
0 votes
2 answers
39 views

Enable navigation buttons and pagination in Swiperjs - vuejs

I made a slider with a swiper.js in vuejs everything works fine but the navigation buttons and pagination don't work I set the :navigation="true" and :pagination="{clickable:true, ...
coder's user avatar
  • 31
0 votes
2 answers
30 views

SwiperJS : slide order and slide per column does not work properly in grid

sandbox: demo Swiper version: ^11.0.5 The order of the slide displayed and the rows per column is not as expected. I am working on Vue using the swiper element but the same problem is shown in the ...
Mary Ma's user avatar
  • 25
-1 votes
0 answers
31 views

Why is the css that I modified in the swiper.css from the swiper module not reflecting in my code

I wanted the swiper slides that I am using to be z-index= -1 because in my code the mobile menu goes behind it so i changed the css from the node modules but it is not reflecting the changes i made. I ...
Snehashish Patra's user avatar
0 votes
0 answers
18 views

Swiper add class to current slide when pa

I'm using Swiper JS to create a slider. I would like to add a class to the active (current) slide when the page loads and also when the slide changes. Then remove the class when the slide is not ...
Mathieu Préaud's user avatar
0 votes
0 answers
15 views

Why image rest to its original position when touched or pinched for 2nd time after zoom by pinch in swiperjs

Hi i'm facing a problem of image reset when touched or tried to pinch for 2nd time time. I'm using swiper-js version : "swiper": "^9.0.0", Here is what i'm doing : Zoomed to 30% ...
EaBengaluru's user avatar
0 votes
0 answers
19 views

Wrong mapping of slides in swiper js

I'm getting information about bestsellers. But after mapping of it the props data are mixed between slides. first slide get info from the second slide but get his own image, second slide get info get ...
Len's user avatar
  • 1
0 votes
1 answer
22 views

swiper react blocks web page scrolling by touch(swipe) on a mobile device

I made 3 swipers in my application and only this one doesn't allow me to scroll the site with a swipe, here are the settings that I set for this swiper: <Swiper allowTouchMove={false} ...
frozzen_alacrity's user avatar
0 votes
0 answers
36 views

Swiper Js 3D Coverflow Effect on 1 side only

I create a swiper slider in nextjs using it 3D Coverflow plugin.. but i want to achive something else.. here is my code and also what i want to achieve.. <Swiper effect={"coverflow&...
Ali Zahid's user avatar
0 votes
0 answers
13 views

How i use swiper js with npm (vanila javascript)

I am facing several problems using swiper js when i Initialize it with npm Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css&...
abdulaziz's user avatar
0 votes
0 answers
21 views

Styling navigation in swiper

hello i want a style like this navigation but i can't seem to style it correctly get it done, i will post below the picture that i need as i tried to make it absolute and position it outside of this ...
nick 's user avatar
  • 101
0 votes
0 answers
32 views

how can pass instance of swiper to another swiper as thumbs in Qwikjs

I created a Swiper component in Qwik and it works perfectly. but when I use two swiper together to handle thums swiper, I have a problem with pass instance of thumb swiper to the main swiper . I ...
behnam rahmani's user avatar
0 votes
0 answers
23 views

Swiper JS - Go To Slide By Clicking On A Seperate Element

I've been struggling with this functionality for the past few days as I am still learning javascript. I'm using Swiper JS in my website and I have a list of links that are outside my swiper instance. /...
Brian Love's user avatar
0 votes
0 answers
34 views

how to change swiper-button-prev and next color with swiper in Ruby on rails 7?

I want to change swiper-button-prev and next color with swiper in Ruby on rails 7 My html code <swiper-container navigation="true" pagination="true" scrollbar="...
paul's user avatar
  • 1
0 votes
0 answers
13 views

How can I slide to index from state variable for SwiperJs in ReactJs?

Currently, I'm implemented reactjs component which show per view at 5 items and using loop mode from SwiperJS. Each item can clickable and it will set useState after click for keep current selecting ...
Nawin P.'s user avatar
  • 233
0 votes
0 answers
7 views

How to display photos using swiper

i wand to show my photos like this: but my code doesn't work, this is my code using wordpress dynamic content : <section class="section-showroom"> <div class="container ...
WijWij's user avatar
  • 1
1 vote
1 answer
35 views

Pause video when not in view swiper.js

I recently started using javascript swiper - https://swiperjs.com. I made the slides to contain html videos. The problem is that if I play a video and then swipe for another slide it (logically) keeps ...
Adam's user avatar
  • 45
0 votes
1 answer
57 views

change the background color of focused (middle ) slide in swiper.js

I am made a slider using html CSS and swipper.js. i want the color of the focused (middle ) slide is black and other slides are blue how can i do that. i tried but the it is not working properly it ...
Muhammad Ismail's user avatar
0 votes
0 answers
23 views

Error ERR_REQUIRE_ESM require() of ES Module /node_modules/swiper/swiper-vue.mjs not supported

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/macbook/Projects/relocate-front/node_modules/swiper/swiper-vue.mjs not supported. Instead change the require of /Users/macbook/Projects/relocate-...
Verbe's user avatar
  • 1
1 vote
0 answers
48 views

Swiper slider grid shows incorrect order

I was making slider using Swiper and React.js. I want to show 2 items in per page. But it shows the items with incorrect order. Swiper version: 10.0.0 React version: 18 Here is my code. <Swiper ...
Li 1001's user avatar
  • 75
0 votes
0 answers
34 views

Css error while using swiper js in quasar js in ssr mode

I build a web app in quasar js and decided to use swiper js. My app runs fine in spa mode but in ssr mode it returns this error.Unknown file extension ".css" for /Users/admin/Documents/work/...
John Pachuau's user avatar
0 votes
1 answer
29 views

Installed SwiperJs and having problems Importing pagination from modules

Installed SwiperJs and having problems Importing pagination from modules in my nextjs project. I get the error "Module not found: Package path ./modules is not exported from package" I tried ...
Ellis Otoo's user avatar
-1 votes
0 answers
18 views

Conflict between locomotive scroll and jquery

I have a couple of code conflicting with locomotive scroll. When initializing locomotive, swiperjs and back-to-top function not working. I changed also the order of calling scripts but no luck. Any ...
Jamaal's user avatar
  • 1
0 votes
0 answers
25 views

SwiperJs - How to show 1 half slides and 1 full slides

I have two images. I want to use swiperjs 11.0.4 in ReactJs and show 1 full slide in the center and then a half slide either side and can loop. I assume this is possible but can't work out how. Can ...
Ngọc Hòa's user avatar
0 votes
2 answers
36 views

How can i prevent product image height from shrinking when the underlying text starts wrapping?

When the height of the screen changes the height of the thumbnail image is not consistent throughout the slider. Whenever the text starts wrapping the thumbnail's height starts shrinking to fit the ...
ygnsl's user avatar
  • 21
0 votes
0 answers
11 views

Editing ace code editor does not work when a code fragment is inserted into swiper-slide from Swiperjs. What to do?

It starts working as soon as I take it outside the swiper-slide. I tried to add many options of swiperJs, it doesnt work. The code fragment itself is displayed as it should, but editing and clicking ...
Daniilk's user avatar
1 vote
1 answer
118 views

Dynamically set a Swiper JS param

Im trying to dynamically set the eventsTarget inside the mousewheel object in Swiper dependant on changes to a data property using Vue.js. Essentially when disableBodyScroll is true the carousel can ...
Billy Brown's user avatar
0 votes
0 answers
54 views

How to make two slides on the sides in Swiper coverflow

I have a Swiper slider with coverflow effect I need to make sure that two slides are on the sides and the active one is in the middle Now the problem is that initially everything is correct, but when ...
Marling's user avatar
  • 23
0 votes
1 answer
32 views

SwiperJS Card Layout Integration

Code Reference: Example At Code Sandbox I want to be able to swiper or click the swiper navigation buttons, such that it only traverse 1 slide at a time with this layout. Which is a slidesPerView: &...
Joshua's user avatar
  • 1
-1 votes
0 answers
25 views

how to show item shadow in swiper?

I have a problem with box-shadow item. Because of swiper has **overflow: hidden;*, and my container has max-width property my box-shadows item cut with swipers. How can I fix this problem, and show ...
Illia Skoropad's user avatar
2 votes
1 answer
62 views

A centered swiper slider/owl carousel with variable aspect ratio images

I want to be able to use images of any dimensions in my slider which have a big centered image and not-active slides are like thumbnails. If you look at this you will understand what I want. Enter ...
Taimoor_Shan's user avatar
0 votes
1 answer
23 views

Why my swiper buttons are not visible and not working in reactjs code

Here is the code of the ROW slider using swiper and 2nd code is the buttons but still button are not showing up on screen at all,and not working as well i can see the buttons in inspect element , but ...
Mr. CLOWN's user avatar
0 votes
0 answers
15 views

How can I change the size of the arrow on my swiperjs slider?

I already tried to change it by trying to use svg{transform: scale(0.5);} but it doesn't work, I also can't access the arrow class... NOTE: they are using the swiper through the CDN <swiper-...
gileadejls's user avatar
2 votes
1 answer
33 views

Need first slide in Swiper slideshow to fade in

All the subsequent slides fade in and out smoothly, but the first slide starts at 100 opacity. How can I make the first slide also fade in? javascript $(document).ready(function () { // Disable ...
Jeremy C's user avatar
0 votes
1 answer
36 views

Swiper - Protruding slide from the next/prev group of 2 slides is not visible until click next/prew

Swiper.js - How to make two slides in a group in the center, with the next and previous slides sticking out, with using loop in Swiper.js? The main problem is that the protruding slide from the next/...
Sergey_Sanches-Peres's user avatar
0 votes
0 answers
28 views

Swiper.js visible 3 slides need to have different width

enter image description here Here is how it looks like now. enter image description here How it should looks like, perfectly aligned with the box below. Here is my current config. <Swiper ...
OchkoMN's user avatar
0 votes
0 answers
19 views

How to disable Swiper Slider at specific condition?

Is is possible that at some particular point i can disable swiper slider, means the scenario is when i am scrolling with mouse on slider after reached at the end of slide I am unable to scroll my ...
Muhammad Sameer's user avatar
0 votes
0 answers
22 views

Swiper - Display the number of the current slides in view

I am using Swiper and the grid format to display 12 slides at a time. I would like pagination to display the number of slides on one page vs the number of pages. For example, let's say I have 36 ...
kadams277's user avatar
0 votes
1 answer
91 views

How to use Swiper modules from cdn build in browser

I just noticed that using swiper-bundle (https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.js) cdn is loading a lot of feature that i am not using then i discovered that there's swiper.min....
kernel's user avatar
  • 57
0 votes
0 answers
38 views

How to stop propagation of events of Swiper.JS?

I am using Swiper Element in a React app as described here: https://swiperjs.com/blog/using-swiper-element-in-react In this app, we have a top menu bar that is hidden by default and should appear (...
Paul Wellner Bou's user avatar
1 vote
1 answer
58 views

Swiper do not set slides width to "auto"

I am trying to make width of my slides in future - by their width. I have already tried thousand of recommendations but nothing helped me. Can you recommend something to me, so that my slides will ...
Ілля's user avatar

1
2 3 4 5
45