Questions tagged [react-swiper]
74 questions
0
votes
1 answer
react swiper 'Swiper cannot be used as a jsx element'
I can't seem to get react swiper working in my react typescript app. I get the error 'Swiper cannot be used as a JSX component, Type Swiper is missing the following properties from 'Element Class': render, context, setstate, forceUpdate and 3…
pinman
- 93
- 1
- 3
- 13
0
votes
0 answers
Swiper.js React Component I want multiple swiper instances on a single page?
I am attempting to add multiple instances of swiper on a single react page. I am getting the error Swiper cannot be invoked without 'New'.
I want them to navigate separately and be unique from each other.
Can anyone guide me to a solution. I have…
DKWebservices
- 23
- 5
0
votes
0 answers
Swiper.js in React How do I disable loop if there is only one slide?
Here is a swiper in react, sometimes it takes multiple swiper slide, sometimes it takes only one. How do I disable the loop feature when there's only one slide?
...
...
...
lamsmallsmall
- 105
- 7
0
votes
1 answer
Tetsing Swiper with Jest
I have this component and it is using swiper/react.
While writing test cases, I'm not able to mock the swiper event it is getting in the onSlideChange.
I'm not able to pass through the if condition in the onSlideChangeHandler function.
Can anybody…
Pradeep Sharma
- 3
- 2
0
votes
0 answers
SwiperJs Thumbs gallery not working with react-redux data.map
Swiperjs working fine with singel slider. But when i add thumbs swiper to the same page, both of them not working. The Data fetch successfully and show in the state. When i add thumbs slider secondly without refrsh page, both showing without error.…
Rohith Ramesh
- 11
- 2
0
votes
0 answers
Make react swiper pagination as a separate component and plug it in swiper
I am working on a project with a setup combination of react, tailwind and react icons. In my project multiple sliders are required (some has navigation, some has pagination etc…)
So, I created a slider factory component Carousel and controlling…
mSaif
- 33
- 4
0
votes
1 answer
Reactjs - 2 Swipers share the same index
I want to set 2 swipers to run in the same index. For example, when I navigate swiper 1 to any indices, the swiper number 2 should go to that index, and vice versa. How can I achieve it in React Swiper?
Thanks in advance.
import React, {…
Justin
- 481
- 1
- 6
- 11
0
votes
0 answers
How Can I use swiper zoom on next js Image?
I'm using react-swiper with next js creating an album.
When I write the below code it works fine with img tag:
0
votes
0 answers
Dots are not showing react swiper slider
Actually I wanna create slider with dots, slider is working, but dots are hidden. How should I make dots visible while using react swipper slider.
I am using styled components for css. The thing is, I cannot find what is false in this part of code.…
Hayk Kirakosyan
- 21
- 1
0
votes
0 answers
Which is the name of the transition effect used with Swiper.js?
Can anyone tell me what is the name of the transition effect used in the slider here https://www.rimac-automobili.com ?
As far as I can tell it uses swiper.js, but the effect is different from the standard ones.
Many thanks.
Mary O
- 75
- 11
0
votes
1 answer
0
votes
1 answer
show navigation buttons only on mouse over
I'm tring to do that with CSS but it isn't working. I've tried using:
.swiper-button-prev {
display: none;
}
.swiper-button-prev:hover {
display: block;
}
but it doesn't effect at all. if I do add some rule like background-color: yellow it…
Jack
- 16,276
- 55
- 159
- 284
0
votes
0 answers
Swiper navigation arrows at slide borders
Trying to make the arrows stick to the image/slide border and not at the carousel border! I played a long with almos all the parameters and custom css but nothing worked
Arrows at the middle of the carousel, at slide borders
I worked with positions,…
0
votes
0 answers
How can I integrate ionic refresher and swiper js in React?
Tried to implement notification page with tabs inside it, the tabs are filters based on categories. I'd like to have swipe capability using Swiper JS as suggested in doc https://ionicframework.com/docs/api/slides
and it worked well.
Then I have to…
Sedana Yoga
- 3
- 1
0
votes
0 answers
How to make a slide and two halves in Swiper?
I couldn't find a property on Swiper (React) that makes it possible to make a slide like this
Swiper 8.4.4
What property can add these two halves of the next and previous slide?
Serafim Nikolaev
- 29
- 4