Stack Overflow
Stack Overflow

Questions tagged [react-swiper]

74 questions
38
votes
19 answers

Module not found: Can't resolve 'swiper/css'

Swiper 7.0.5 swiper/css gives error Module not found: Can't resolve 'swiper/css' import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; function Test() { return (
Ibad Ur Rehman
  • 696
  • 1
  • 9
  • 16
7
votes
2 answers

How to change the Swiper height or slide width in React JS without using fixed CSS

I have a card game where the player selects a card from one deck to add to a second. Pushing the button on the active card will move it to the other deck and then make it active. The active deck should be larger when in focus, while the inactive…
Matt E.
  • 950
  • 1
  • 6
  • 15
6
votes
1 answer

SwiperJS/CSS - Dynamically changing slides per view based on screen size

I'm using SwiperJS with React, and I'm trying to implement a layout where one slide is always positioned at the center of the screen, and a portion of the next slide fills up any remaining space to the right. The Swiper Documentation shows I can…
Jack
  • 128
  • 1
  • 9
3
votes
1 answer

swiper-button outside container in react

how can I make swiper nav outside the container in react js? to
Alireza Bagheri
  • 207
  • 3
  • 15
3
votes
2 answers

Make Swiper Slider Responsive in React.js

I want to make my Swiper Slider Responsive in React.js I am using Swiper React Components and I am new to this. I have added same width in media queries in css and added same width to breakpoints on component as well. But Still issue exist and it's…
user19043609
3
votes
2 answers

Module not found, Error package path ./swiper.min.css is not exported

Module not found: Error: Package path ./swiper.min.css is not expoot exported from package D:\Frontend\React\movie-app\node_mswiper rted fromodules\swiper (see exports field in D:\Frontend\React\movieles\swirts…
Kishan Dewangan
  • 31
  • 1
  • 2
3
votes
1 answer

How do i add smooth transitions to Swiper.js?

So I'm using Swiper.js by a friend's recommendation to create an auto-scrolling slider. But I can't figure out how to make the transitions between the slides smooth. Currently, when I change the autoplay ms it just changes the time it takes to…
Sermad NaJar
  • 135
  • 1
  • 5
  • 15
3
votes
4 answers

React Swiper: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addClass')

I am using react typescript. When I set thumbs={{ swiper: thumbsSwiper }} on my swiper slider component it gives me an error that Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addClass'). How can I be able to solve…
Jerin
  • 717
  • 1
  • 7
  • 28
2
votes
2 answers

How to add custom swiper pagination? (React, Tailwind)

I know there are a lot of such topics and examples, and I've looked through a lot of them. But I can't make custom pagination for the slider. My custom pagination just doesn't display. I can't even change styles of regular pagination. It must be…
Will Black
  • 350
  • 2
  • 17
2
votes
0 answers

How to add styles for first and last visible element - Swiper

I am trying to apply styles for first and last elements which includes class .swiper-slide-visible But I apply styles for all elements which do not include this class: .swiper-slide-visible:first-child { mask-image: linear-gradient(to right,…
Radomir
  • 115
  • 9
2
votes
1 answer

How to detect reach beginning or end in React Swiper?

I want to detect reached of slide in Swiper (React.js) with arrow navigate customize. Because I am not using default navigation of Swiper so I couldn't to detect reached of slide by Swiper arrows className provided, I want to hide the prev button…
Epple
  • 640
  • 14
2
votes
0 answers

Swiper autoplay not working on vertical direction

Swiper autoplay is not working when I switch direction to vertical. It is working fine on default horizontal. My swiper have 4 slides and after sliding 1, the autoplay stucks. Here is my swiper configuration:
coding-spidy
  • 41
  • 3
2
votes
0 answers

how to target the slide right after the slide which has property of 'next slide' in swiper in react

I have this component which in turn renders some card component inside SwiperSlide wrapper component. I know how to target next slide inside swiper in my css file.this is the selector: :global(.swiper-slide-next){ //some styles } the problem is How…
Ramin Khodaie
  • 242
  • 3
  • 10
2
votes
2 answers

How to set initial active slide to different index in swiperjs ReactJS?

I want to set the index of the swiper's active slide to the center position? As you can see in picture the active index is set to 0, I want it be number 3, i.e: middle and it should remain middle
Farooq Ali
  • 11
  • 1
  • 1
  • 4
2
votes
1 answer

Why are my react-swiper components swiping on button click?

I reused the promotion-slider.js swiper code in another FlashDealsProducts.js file with some changes but without any error both components slides in same direction when I click either of the slide button. I tried changing the id but it didn't…
vinender singh
  • 339
  • 1
  • 3
  • 8
1
2 3 4 5