2,194 questions
-3
votes
0
answers
38
views
How can I add animation to image slides? [closed]
How can I insert an animation code here so that the images will rotate in a carousel?
var swiper = new Swiper(".mySwiper", {
slidesPerView: 5,
spaceBetween: 10,
breakpoints: {
0: { ...
- 17
0
votes
0
answers
41
views
Swiper.js centeredSlides with loop not showing next slides on mobile
I'm using Swiper.js with centeredSlides: true and loop: true on mobile. I want the current slide centered and the previous/next slides partially visible (about 20% on each side).
Currently, the first ...
- 13
0
votes
1
answer
26
views
Is it possible to combine the SwiperJs modules of Navigation and Fade Effect with eachother?
So i am trying to combine the navigation module and the fade effect module so that when i click on a navigation button it uses a fade effect.
However, for some reason this does not seem to work and it ...
- 125
1
vote
1
answer
83
views
swiper.js w/ coverflow causing 'mouse' problems?
<html>
<head>
<style>
.swiper-slide {
width: 75px !important;
cursor: no-drop;
}
</style>
&...
- 53
0
votes
1
answer
47
views
Clicking on thumbnail slide does not change main Swiper slider
Angular v20
Swiper v11.2.10
I am using Swiper Web Components in an Angular project to build a product gallery with a main slider (sw-primary) and a vertical thumbnail slider (sw-secondary).
The ...
- 6,228
1
vote
1
answer
45
views
How to preserve PicoCSS (form) styling inside Swiper <swiper-slide>?
Questions:
How to preserve PicoCSS (form) styling inside Swiper <swiper-slide>?
What is causing PicoCSS form styling to break inside Swiper <swiper-slide>?
The styles injected by Swiper ...
- 18k
0
votes
0
answers
32
views
Swiper reference Instance destroyed when getting swiper offsceen
I'm having a little trouble understanding the destroyed feature. When is it activated?
I have the following setup: I have a vertical swiper in Vue3. OnMount, the swiper is read into a variable.
...
- 1,345
1
vote
2
answers
224
views
Swiper slider with box shadow
I have a problem with SwiperJS slider - I would like to add for each item a box-shadow.
When I wrap it with swiper CSS classes then I can see that overflow is hidden and crop my shadow.
How can I ...
- 51
0
votes
0
answers
50
views
swiper.update() triggers slideChange unexpectedly — how to prevent or handle it?
I'm building a custom datepicker component using Swiper.js in an Angular project. The component includes three Swiper instances for year, month, and day selection.
The month list is dynamically ...
- 23
2
votes
0
answers
165
views
How to dynamically update the language direction (RTL / LTR)? [closed]
Problem
I'm using Swiper Element in an Angular component and I want to dynamically update the swiper's direction based on the current language ('ar' for RTL, 'en' for LTR) using a LangService.
The ...
- 386
2
votes
0
answers
76
views
How to allow a slider item to overflow only from the top on hover, but hide overflow on the sides in a swiper slider? [closed]
Question:
I’m working with Swiper.js slider and have a hover effect on each slide where the slide grows in size and moves upward, overflowing outside the main slider container.
My goal is:
On hover, ...
- 21
0
votes
0
answers
58
views
Swiper slide is not taking the full width of the carousel, even when specified as show 1 slide
I'm trying to make my slides take up on the whole swiper, its not meant to show the prev and next slides, just one since its basically a Hero.
This is my current code, you will notice i try to ...
0
votes
0
answers
30
views
React swiper doesn't centralize on the phone sized screen
I'm using the Swiper library to display images. It works fine on tablets and desktops, but I’m having trouble with small phone screens:
At 320px width it looks okay, but there's too much space ...
0
votes
0
answers
40
views
Disable warning in Drupal Swiper Formatter module
I’m using the Drupal module “Swiper formatter” to create my website Swiper. However, when the slides are fewer than required, Drupal displays a warning message:
"The number of slides is less than ...
- 53
1
vote
0
answers
99
views
And pagination to div outside of swiper container in Angular 19 and Swiper 11
I have the swiper container working on the page with no issues, so its installed correctly and initialized.
However in this latest version of Swiper I cannot make the pagination appear in the normal ...
- 55
1
vote
0
answers
161
views
Swiper.js Marquee/Ticker effect is not moving
I'm trying to build a Swiper Marquee/Ticker for a logo garden, but the I'm experiencing some issues, I cannot get the Swiper to actually start moving on its with AutoPlay. When I interact with the ...
0
votes
0
answers
74
views
Swiper.js slides disappearing during transition in React (Vite + Swiper 11)
I'm using Swiper.js v11 with React and Vite, and I'm encountering two issues:
Items overflow from swiper-wrapper at large screens.
During swiping (manual or autoplay), the in-active slide briefly ...
- 189
0
votes
1
answer
71
views
Hide Non-Visible Slides + Make Responsive
I have a few things that I am trying to do with SwiperJS. You can see on my site here: http://newgl.greenlegion.com
ISSUE 1: i cannot figure out a way to see more of the slide on mobile. It's tough ...
- 718
0
votes
0
answers
40
views
Swiper with verrtical direction; autoplay and autoheight has weird jumps
I'm trying to create a "marquee" carousel style with Swiper.
My swiper properties are the following:
{
loop: true,
speed: 5000,
allowTouchMove: false,
slidesPerView: "...
-1
votes
1
answer
77
views
SwiperSlide components do not appear when the Swiper is being swiped
I just installed SwiperJs in my project and copied the code from the docs. But the images, that I'm supposed to swipe to see, are all hidden expect for the first one.
When I swipe, the content of the ...
- 351
-1
votes
1
answer
85
views
How to resize slide left and right from center?
I need to make it so that 5 slides of cards of N slides are displayed on the page. I know that there is Swiper.js for this, but I haven't worked with it.
Below I have tried to describe the structure ...
1
vote
1
answer
76
views
SwiperJs not working properly when rendering it conditionally
In my angular application, I have 4 swiper slide, which i want to render conditionally. But its not working properly. I have added images as well at bottom.
Issue - On initial load all swiper are ...
- 25
1
vote
1
answer
73
views
Swiper.js works locally but breaks after deployment to Vercel (Angular)
I’ve implemented Swiper.js in an Angular (using v18) component to display a certifications carousel. While it renders perfectly during local development using npm start, the styling completely breaks ...
- 494
0
votes
0
answers
84
views
Infinite looping Swiper.js "thumbnail" navigation?
Using modified version of swiper.js "thumbs" gallery and help from this codepen, I'm trying to get an infinitely looping menu/slide combination:
Here's what I have so far
// Assign some ...
1
vote
1
answer
93
views
Swiper component won't center the slide if freeMode is activated
I have a swiper that contains multiple slides (they don't fit entirely on screen). I need the Swiper to have freeMode set to true so that on mobile the slides keep scrolling after touchEnd.
My problem ...
- 21
1
vote
1
answer
34
views
Jumping spacebetwen when initialize
How i can solve this?
While the slider is initializing the slides have no spaces
and after initialization they appear and the result is an ugly jump
I tried to set additional indents via CSS as a ...
- 107
-1
votes
1
answer
144
views
TypeError: Cannot read properties of undefined (reading 'future')
The application suddenly started throwing up the below exception during the build process.
TailwindCSS v3.4.14
Node.js v20.19.0
yarn build
I could see, the error comes from a external NPM library:
...
- 411
0
votes
1
answer
182
views
Swiper wont be centered
I made this slider using swiper, so the current slide should always look bigger than the rest, and be centered. Also the 10px margin between slides shold be kept.
But after running my code, the slides ...
- 1,811
0
votes
0
answers
99
views
Screen reader announces all aria labels when removing an item from Vue Swiper component
The Problem
I'm using a Vue 3 Swiper component to display flight cards with accessibility support. When a user clicks the delete button on a flight card, the screen reader announces ALL the aria ...
0
votes
0
answers
108
views
How do I scroll a slide within a vertical slide and have it snap to the next slide and fade with Swiper.js?
As the title says, how do I scroll through a slide that has 500vh and then snap to the next slide and fade with Swiper.js?
https://codepen.io/Echo1017/pen/NPWrBGq?editors=1010
<!DOCTYPE html>
&...
- 1
1
vote
1
answer
97
views
I am tying to learn frontend in this code, I am trying to call data from Basehub CMS and show it on a carousel
Here is the code I am trying. I think the problem is I am calling both the server component and the client component on the same file. But I don't know how solve that.
I have tried to break the slide ...
- 11
0
votes
0
answers
49
views
Angular Swiper Only Shows One Slide Initially Before Loading Others
import { Component } from '@angular/core';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { TmdbService } from '../../services/tmdb.service';
import { OnInit, ...
0
votes
1
answer
144
views
Swiper Element (WebComponent) - how to use slideTo
I have updated my angular version from 12 to 16 for my Ionic project and have had to update the slider component.
I am using the Swiper Element (WebComponent) v11.2.4 https://swiperjs.com/element and ...
- 5,003
0
votes
0
answers
124
views
Mobile Video Play/Pause Toggle Not Working Reliably (SwiperJS Slider)
I'm using Swiper JS to create a slider of TikTok videos on my website. I've implemented a feature where users can click on the video itself to toggle between play and pause. This works perfectly on ...
- 1
0
votes
0
answers
30
views
SwiperJS Slides Advancing Unexpectedly Due to Autofill in Angular
I’m having an issue with SwiperJS in my Angular application where the slides unexpectedly advance when autofill is used in my reactive form.
Issue Details
When autofill occurs, Swiper advances 4 ...
- 1
1
vote
0
answers
301
views
Problem with swiper loading correctly in nextjs 15-swiper 11
next15
swiper11
tailwind 4
I used the swiper library but at the first moment of page loading it only shows one of the components and in the next second they all load.
Even if I want to put a loader ...
- 31
0
votes
1
answer
439
views
How can I prevent slide overflow on Swiper slideshow (do not show more than the desired number of slides)
Problem: My Swiper slideshow is displaying as many slides as can fit on the screen, rather than adhering to the number of slides specified in the settings. I want to display one slide on screens ...
- 85
0
votes
2
answers
244
views
Swiper JS infinite height issue with NextJs
Swiper JS in nextjs and with "use client" doesn't calculate height properly. It looks like there is a calculation error and the height is calculated multiple times resulting in large height?
...
- 1,571
0
votes
0
answers
87
views
JS part of glide.js does not work properly
Hello I am trying again with my question with better phrasing. To put simply, when I run the code without JS part of glide:
<script>
new Glide('.glide').mount()
</script>
The slides ...
- 11
0
votes
0
answers
83
views
How to create interaction/event on swiper.slide using swiper.js
When clicking on the swiper.slide the image pops up, but it moves with the swiper instead of being fixed to screen like I want it to be.
Loom video explaining below
Webflow read only link: https://...
0
votes
0
answers
15
views
Cards glitch sometimes on Macbook Air laptop only
The code about the testimonials section on the website is as seen in the video.
I am getting a strange error that when I scroll the cards and quickly click on the green button, instead of going to ...
0
votes
3
answers
466
views
Navigation arrows are not showing
I've been trying to use Swiper js, it went well until I needed to use it 2 more times at different parts of the code, the problem is: the navigation arrows simply don't appear in the page and I can't ...
- 13
1
vote
0
answers
69
views
How to make Javascript work when using Swiper or Glide?
I am trying to make kind of a personal website, I would like to put there a slider with some projects I did. I have next to no experience with Javascript. HTML and CSS works fine, however when I try ...
- 11
0
votes
0
answers
95
views
swiper-slide: How to create hover &/or click interaction so when swiper-slide is clicked on the image pops up larger
I can't seem to get only the swiper-slide that's clicked on to pop up. Instead all the images with the class pop up at once.
I have tried using webflow native interactions in interactions panel using ...
0
votes
0
answers
13
views
How to keep slidesPerGroup when swipe back after reachEnd?
I have 7 slides and swiper setting loop: false, slidesPerView: 3, slidesPerGroup: 3,
Swipe 3 cards at a time.
When there are not enough cards left for the next group of 3, it should show the last 3 ...
1
vote
1
answer
34
views
How to align Card(bootstrap) heights in SwiperSlide(swpier.js)
I'm trying to align the height of Card (bootstrap) in SwiperSlide (swpier.js) so that they have the same height, I tried several things but nothing worked.
<Container>
<Swiper
...
- 51
0
votes
0
answers
26
views
PhotoSwiper not working with React - Modal does not open on button click
I'm trying to integrate PhotoSwiper with my React project, but it's not opening the modal when the button is clicked. The modal does not open when I click the button, and I don't see any errors in the ...
0
votes
0
answers
91
views
how to remove a slide in swiperjs with a transition
How can I combine a removeSlide with a transition? It would be great if I could do this with a fade out of the slide and a move together of the remaining slides.
swiper.removeSlide(slideNum);
No ...
- 1,345
0
votes
0
answers
70
views
why is Swiper Js next button not working?
I have this code that loops through an object of products to create product cards automatically instead of manually adding the HTML it also creates a swiper structure.
The issue is, when I click next ...
1
vote
1
answer
181
views
Error in responsive breakpoints of swiper in react
I am trying to implement a swiper slider in React but the responsive breakdown is not working. I want in mobile devices the slider to have 2 slides but it is not working.
In the mobile devices it's ...
