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.
2,230
questions
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 ...
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 ...
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 ...
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.
(...
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 ...
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....
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(&...
-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 ...
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';
...
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">
...
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, ...
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 ...
-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 ...
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 ...
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% ...
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 ...
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}
...
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&...
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&...
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 ...
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 ...
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.
/...
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="...
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 ...
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 ...
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 ...
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 ...
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-...
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
...
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/...
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 ...
-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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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: &...
-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 ...
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 ...
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 ...
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-...
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 ...
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/...
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
...
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 ...
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 ...
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....
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 (...
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 ...