For the past two days, I've been struggling to successfully implement a Swiper Grid feature in my Next.js application. Despite trying various solutions from stackoverflow and experimenting with different approaches, none of them have resulted in the d ...
I've got a website that utilizes the Swiper carousel from SwiperJS, find it here: An issue I am facing is that the navigation elements are invisible but functional, with the pagination feature unaffected. This peculiar behavior is observed only in Safari ...
Is there a way to have an autoplay feature in Swipper only if the number of items in the array is greater than 5? I have multiple arrays with varying lengths and want to display them in Swipper. ...
Having an issue with my Next 14.0.3 app and tailwind CSS. I recently installed swiper JS version 11.0.5 using npm. The problem arises when I reload the page, it takes about 1 or 2 seconds for the swiper styles to load. During this time, the swiper slides s ...
I've been attempting to implement custom paginations for my component in order to have bullets outside the container, but unfortunately they are not showing up in the DOM. Below is the code snippet of the component: export function CommentSlider({ comment ...
Having some issues with importing pagination from modules in SwiperJs for my nextjs project. The error message "Module not found: Package path ./modules is not exported from package" keeps popping up. I have tried updating the module to the latest version ...
Issue with Swiper.js Navigation Buttons vanishing in production mode While the Swiper.Js navigation buttons are visible during development, they seem to disappear in the production environment. Configuration file: next.config.js const withSass = require( ...
Link to my page: Click here Design reference: View design The design requires flexing the 2 arrow buttons, but these elements are missing in the code(source: autoplay swiper). How can I align them to the right-bottom corner? <div class="flex" ...
My issue relates to using swiperJS with multiple images, as I'm struggling to make it take the full width and height of the containing div. Despite applying styling like this to my images: .swiper-slide img { width: 100%; height: 1 ...
We recently updated to next.js 13 and encountered the following error message: TypeError: Cannot read properties of null (reading 'useState') The error stack trace is displayed below: Warning: Invalid hook call. Hooks can only be called inside ...
Seeking information on browser compatibility. I am interested in upgrading to the latest version 8.4.5 of Swiper JS for my project, currently using version 4.1.6. Upon examining their shared Github repository file .browserslistrc, I noticed changes that ta ...
I am currently utilizing the SwiperJs library in conjunction with Angular. I am interested in adding a feature where clicking will navigate to the next (or previous) 3 slides instead of just 1 slide. The regular arrows function correctly, with this code ...
When trying to integrate Swiper with Next.js, I ran into an issue concerning thumbnails. "onSwiper={setThumbsSwiper}" This line is causing a TypeScript error: swiper-react.d.ts(23, 3): The expected type comes from property 'onSwiper' w ...
Does anyone know of a way to enable two-finger swipe on a Vertical Swiper? I attempted to retrieve the object from swiper.touches, but it didn't provide me with the number of fingers used during swiping as described in the documentation. https://dev ...
I've been struggling with this issue for a while now. I need to move the pagination outside of the slider, but using padding or margin doesn't seem to work. It always remains inside the slider, and if I try to position it outside, it gets hidden. ...
While trying to create an endless carousel using swiper js on my website, I encountered a slight vibration between the slides that makes it seem like the images are flickering. Despite my efforts, I have been unable to find a solution to this issue. Any as ...
Encountering an issue with my unit tests post upgrading from Swiper 6 to 7. My setup includes Angular 12 and Swiper 7.3.1. The unit tests were functioning properly before the upgrade (Swiper version 6.5.9). Incorporating the SwiperModule in my tests like ...
How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...
In my current project, I am utilizing the swiper slider within a Next.JS development environment and styling with Sass. However, despite following the documentation guidelines to apply custom styles to the slider arrows, they do not display correctly. My ...
My quest to create a Swiper in React with autoplay functionality using Swiper.js has been quite a challenge. Despite following the instructions diligently and researching extensively, I couldn't find a solution. I even tried referencing a jQuery example th ...
Is there a way to adjust the spacing between slides in Swiper js using relative units such as 2rem? The entire page is designed with relative units. All measurements are set in rem, which adjusts based on the viewport size for optimal adaptability. For i ...
I am looking to create a homepage where I can swipe through one post at a time in mobile view. I have experimented with React Swiper, but it only allows horizontal swiping of posts. I would like to swipe posts vertically instead. Any suggestions on how t ...
Currently, I have set up two instances of swiper.js and I am looking to scroll both while interacting with just one of them. Update: My primary objective is to replicate the core functionality seen on the swiper homepage. Update 2: I came across this lin ...
Currently, I have integrated a Swiper component into my React application. The Swiper consists of n slides, with each slide requiring a set of m images to be randomly selected as the background upon loading. Prior to transitioning to React, I had devised ...
I've been trying to incorporate Swiper for a slider in my React application, but it's not behaving as expected. Here's what I did: npm install Swiper Then I imported Swiper in the componentDidMount method of my component like this: import Swiper from 's ...
I am currently utilizing Swiper JS and have encountered an issue. In my Swiper slider, each slide contains a button. Whenever I click on the slide or the button itself, the slide becomes the active one, causing the entire slider to move. Is there a way to ...
<template> <swiper v-for="item in items" :key="item.id" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> ...
I've been attempting to incorporate Swiper with "vue": "^2.6.11", however I keep encountering runtime errors. Despite following the instructions on , and modifying the imports as advised: // Import Swiper Vue.js components import { Swip ...
Swiper is not compatible with Next 13. Using the default React example of Swiper + 'use client' at the top of the page does not yield the expected results. To replicate the issue, follow these steps: Create a bare-bones Next 13 app using this command: ...