Questions tagged [react-swiper]
74 questions
0
votes
1 answer
React Swiper Errors only on Prod Next.js build - Module not found: Can't resolve 'swiper' in '/vercel/path0/components/home/swiper'
My project is locally building/working fine; however on production it is failing with the following errors that I have not been able to fix:
Module not found: Can't resolve 'swiper' in '/vercel/path0/components/home/swiper'
Module not found: Can't…
Stackaccount1
- 139
- 1
- 12
0
votes
1 answer
access the swiper classes in tailwind
Is there any way to access the swiper classes in tailwind?
This is what the code on the page looks like:
javascript
reactjs
tailwind-css
swiper.js
react-swiper
Lex2000
- 155
- 1
- 1
- 12
0
votes
0 answers
Swiper in modal (React)
I'm trying to display the swiper in a modal window. .
I did the same as in the documentation. https://swiperjs.com/react#thumbs
My code:
// imports...
SwiperCore.use([Keyboard]);
function ShowSwiper({ images, isOpen, startImage, close }: Props) {
…
Will Black
- 350
- 2
- 17
0
votes
0 answers
Swiper issue in Iphone
I am using 3js assets url in swiper, But on Ipad/Iphone browser it is not working properly & application get crash randomly. (It's working properly on web browser)
Below is my code snippet.
Slide…
Piyush T
- 1
0
votes
0 answers
React swiper height and width
I'm using swiper library for react app.
The Swiper component has this weird space that I don't know how to fill and also I don't know how to set up the height for it.
I am trying to get the blank space highlighted in orange to fill with Card…
Lukas Luke Stateczny
- 513
- 8
- 24
0
votes
2 answers
Why am I getting Next Js hydration error?
I am trying to make an web app and using react swiper fot it, but it is causing hydration. When I comment out the react swiper then I don't see the error.
I am getting "Warning: Text content did not match. Server: "Zach N." Client: "Lisa A." in the…
Siam Parvez
- 93
- 8
0
votes
5 answers
swiper-thumbs-gallery-loop-react not working in react js
I'm facing an issue I want to create a swiper thumb gallery slider. the issue is that when I copy code from swiper js and paste it into my react app it's not working and getting an error called The above error occurred in the component:
while the…
Mithlesh Patel
- 41
- 1
- 5
0
votes
0 answers
Adjust width Swiper React to screen
I am using Swiper React to creater a Carousel Slider from a map of an object received from an API.
Here is my code :
Johan
- 2,088
- 2
- 9
- 37
0
votes
1 answer
ReferenceError: Swiper is not defined white using next js
I am trying to import swiper in nextjs project using cdn link given in official documentation.
here's my code
import React from 'react'
import Image from 'next/image'
import Head from 'next/head'
import swiper from '../Configuration/swiper'
const…
Data Universe
- 1
- 1
- 3
0
votes
1 answer
how to install swiper version 6.8.4 modules?
import 'swiper/components/mousewheel/mousewheel.min.css';
Module not found: Can't resolve 'swiper/components/mousewheel/mousewheel.min.css'
i need to use mousewheel from swiper in my react app, but i don't know how to install it
amineDH
- 11
- 1
0
votes
0 answers
import 'swiper/css/pagination' this code in react and working with yarn dose not work for me
I'm writing a swiper pagination but i faced to this error:
'swiper/css/pagination' in 'C:\react\project1\src\Components\Testimonials'
and it does not show the pagination in browser
can someone help me to solve it?
react
enter code here
import {…
soroushhosseini
- 1
- 2
0
votes
1 answer
Problem with splitting one component into smaller ones React and TypeScript
**I have problem with react-swipper when i'm trying to separate it into smaller components.
Below is my full code from one component which i want to split from this:
import { Swiper } from 'swiper/react/swiper-react';
import { SwiperSlide } from…
I3artosz
- 123
- 1
- 11
0
votes
1 answer
Why react-id-swiper loop mode is not working?
I am trying to add a loop in react-id-swiper as per documentation but it won't work.
Below are my parameters for loop mode, Let me know if I am missing anything.
const params = {
slidesPerView: 1,
autoplay: {
delay: 3000,
…
Rahul Shinde
- 168
- 3
- 12
0
votes
1 answer
How to zoom.in() in a button (React swiper)?
How can I use zoom methods in the react version of swiper? I just want to make zoom in on one button and zoom out on another one.
In resume I want to know how to zoom in and zoom out on Swiper from other sibling component:
const MySwiper = () =>…
rubenmondom
- 83
- 8