Questions tagged [react-swiper]
74 questions
0
votes
0 answers
Swiper type error with ESLint and Typescript
I'm making a NextJS 12 Typescript swiper carousel. In developer mode, it runs fine, but when I run npm run build, it returns Type error
./src/layouts/components/ProductDetailContainer.tsx:56:17
Type error: Type '{ children: Element[]; navigation:…
Luan Tran
- 376
- 1
- 3
- 15
0
votes
1 answer
How to customize Swiper navigation buttons in React?
I want to customize the navigation buttons in Swiper. but when I try to move the navigation buttons outside of the Carts, they are not visible.
I tried doing it manually with position but it didn't work :(
How to move it out of carts?
Ps: I'm not…
Bahriddin
- 71
- 1
- 4
0
votes
0 answers
Swiper Navigation and Pagination not working in react used Vite
I imported import { Navigation, Pagination } from 'swiper/modules'; and when** modules={[Navigation, Pagination]} **is used inside swiper tag. navigation button itself missing in browser. if modules={[Navigation, Pagination]} is not used navigation…
naaz
- 1
- 3
0
votes
1 answer
how to move arrows using swiper?
This is my carousel but here when I want to configure the swiper-button the arrows are very far from the image, any idea how to make them closer (modify their position)?
effect={'coverflow'}
grabCursor={false}
centeredSlides={true}
…
Ibizaz
- 1
0
votes
0 answers
React Swiper Style file edits are not saved
swiper-bundle in my React project.min.i can't edit the css part, it doesn't apply the style when I edit and save, there are those who have the same problem in stackoverflow, I changed the color or something with the code I added below, but I'm…
0
votes
0 answers
Swiper not working on React TypeScript (v5.1.6)
I got this Swiper error while I was testing Swiper. Can someone help me fix it?
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import "swiper/css";
import…
DIoDOBrando
- 1
- 2
0
votes
0 answers
React Swiper Thumbs Gallery Loop is not working
I am using SwiperJs in React and want to do a function called Swiper Thumbs Gallery Loop. But when I add the loop={true} attribute, when I click on next or prev it doesn't move forward the slide only when I drag the slide will the next and prev…
Crodic
- 1
0
votes
0 answers
Don't work slidesPerView in Swiper. What is at problem?
*Unfortunately, slidesPerView in Swiper does not work, which should display 3 pictures at once:
*
<>
GameForYouOnline
- 1
- 1
0
votes
0 answers
Swiper Element (WebComponent) - How do prevent injectStyles from affecting other carousels "swiper": "^9.3.2",
I am using the Swiper Element (WebComponent) within a React component. The components I am building are for a real estate agency, and I need to include multiple carousels on the page, each with different designs.
Initially, I successfully styled the…
Marcos Riani
- 1
- 1
- 2
0
votes
1 answer
Swiper not showing background image from local directory in react
I tried adding image from the project local repo called "images" and use it as background image in the swiper carousel, but the image is not displaying. It's showing only the and write-up. The background image is not showing. The write up suppose…
DaPlug
- 9
- 4
0
votes
0 answers
How to disable focus on Swiper Pagination bullets when clickable
I'm using Swiper with the Pagination module, I added a tab index to an anchor inside each card and I want the user to be able to use keyboard navigation on the anchors themselves.
My issue is that if I set the bullets to be clickable (which I want)…
maja
- 697
- 5
- 18
0
votes
0 answers
Swiper js "autoheight " not resizing for first slide height when page mount
Guys I'm facing a problem in my reactapp and i don't know how to fix it. I searched a lot in stackoverflow but didn't find anything useful.
I have a fullWidth Image slider and i set the swiper autoHeight property to true. because images don't have…
Solid1
- 426
- 1
- 2
- 14
0
votes
0 answers
Swiper ReactJS | initialSlide issue
when I use initialSlide, the index I pass to it is completely broken. Imagine that I give it index 3, it will show me the first slide, if I give it index 4 it will give me the 5th. Did you encounter the same bug?
Pierre Loti
- 95
- 1
- 6
0
votes
0 answers
Reactjs Swiper Controller to sync all slider in class component
I wondered is there any way to sync all my Slider elements.
The component will be render via an array but I got no idea how to set the controller to make them all move together.
Here's the code:
import React from 'react';
import { Controller } from…
Hsuan Hsu
- 69
- 4
0
votes
0 answers
How do I get thumbs to change with the main slides in a react swiper carousel?
The main swiper slides (class=testimonial) rotate vertically as expected but the thumbs (class=gallery-thumbs) are static
I have followed the react swiper demo to create the carousel with thumbs.
I was expecting the thumbs to rotate into center…
Niall
- 9
- 1