Stack Overflow
Stack Overflow

Questions tagged [react-swiper]

74 questions
1
vote
1 answer

Swiper.js Integration in React with MUI Cards

I'm currently working on a React application where I'm trying to integrate Swiper.js with Material-UI (MUI) cards to create a slideable carousel of app cards. However, I'm encountering an issue where only one card appears, and the navigation arrows…
SDK
  • 1,356
  • 3
  • 19
  • 44
1
vote
1 answer

How to fix "TypeError: Swiper.initialize is not a function" Error in React Swiper with TypeScript

I try to use swiper in nextJs and Typescript. I want to edit styles with injectStyle but I get an error about initialize but I don't know how to fix it. import { useRef, useEffect } from "react"; import { register } from…
Shahdad
  • 11
  • 2
1
vote
0 answers

REACT JS: change data in swiperslide using another swiperslide in swiper-react

I am trying to change the data in one slider, by sliding the other slider. Basically I want to map the data from an api in first slider, then the active slider's id will be sent to the second api, which will return the data to be rendered in the…
Steven
  • 231
  • 1
  • 8
1
vote
0 answers

SyntaxError: Unexpected token 'export' in swiper-react.js

I have a problem when try to test my app with Jest. My app is created with create-react-app, as dependency I use Swiper and TypeScript. Somehow when I run my test I receive an error in my terminal. Jest encountered an unexpected token Jest…
Seva Sleva
  • 49
  • 4
1
vote
1 answer

Swiper and absolute positioning

I'm trying to create a floating carousel with some background underneath. The carousel is based on Swiper for react. Here is an example https://codesandbox.io/p/sandbox/swiper-react-slides-per-view-forked-9l7exy?file=%2Fsrc%2FApp.jsx if I change…
user3193620
  • 173
  • 1
  • 11
1
vote
2 answers

Swiper autoplay is not working in React.js

I have Swiper slider in react.js
Y U K I M U R A
  • 488
  • 19
1
vote
1 answer

How do I style slider swiper pagination in react?

I use the slider swiper library in my react project. I have initialized this slider and everything works, but I want to style my pagination. I have added some styles to my slider swiper component object, but I also want to add some spacing to…
Roman
  • 33
  • 7
1
vote
1 answer

how can I use break points in swiper js using react js

hy, Im using swiper.js library in react js I have spacebetween value is 100, now for breakpoint 600 I want spacebetween 30, how is it possible, how can I use breakpoints type here
Muhammad Tehsin
  • 57
  • 3
1
vote
0 answers

react swiper slidesPerColumn doesn't working

I want to show three items vertically in one slide. The official document of react swiper says to use slidesPerColumn. So, I try to use it, but, it says Swiper doesn't have slidesPerColumn properties. How can I organize the slide as shown in the…
skwFE
  • 211
  • 3
  • 9
1
vote
0 answers

Not able to swipe over iframe with react-swiper

I am using the react-swiper library to render some youtube videos in a multi carousel format they look something like this: Each one of these videos are rendered through a component the problem i am facing is that I am not able to swipe on these…
Ishmeet Singh
  • 57
  • 5
1
vote
0 answers

How to move the buttons in a React Swiper

I'm using the React Swiper component (https://swiperjs.com/react#swiper-props) and I need a way to move the two buttons to change slide because they get over my other components. I want them to be on the side of the black box. As suggested by…
Allennick
  • 445
  • 2
  • 10
1
vote
0 answers

react-id-swiper: Using scrollbar to switch slides doesn't work without CssMode enabled, won't detect scroll

I am trying to make a swiper that is 100vh tall. So basically, when the user is scrolling down the page, when the full slide is in their vision, the swiper begins and when the user scrolls up/down, they can go up and down slides. For e.g, scrolling…
Donnie Berry
  • 99
  • 1
  • 12
0
votes
1 answer

export 'Pagination' (imported as 'Pagination') was not found in 'swiper' (possible exports: Swiper, default)

I wanted to add the Pagination from swiper. The import statement I used is import { Pagination } from "swiper"; My configuration: The error i`m getting is : I have seen at multiple places that its working fine but not sure why I`m encountering…
Lakshay Rohilla
  • 1,654
  • 6
  • 9
  • 30
0
votes
0 answers

React Swiper Property 'spaceBetween' does not exist on type 'IntrinsicAttributes & RefAttributes & SwiperProps'

I'm using React, Typescript and Swiper. versions React: 18.2.0 typescript: 5.2.2 swiper: 10.2.0 I get an error when using any property like that: Type '{ children: Element[]; spaceBetween: number; }' is not assignable to type 'IntrinsicAttributes &…
Andrey
  • 1
  • 1
0
votes
0 answers

in my Next.JS SSR rendering page, Swiper doesn't show correctly when JavaScript is disabled in browser

everything works correctly but if I disable JavaScript in the browser, my Swiper slider doesn't show correctly (an item fills full width and height) My swiper slider ( for arrays of brands) import React from "react"; import {BannerType} from…
Ramin eghbalian
  • 2,348
  • 1
  • 16
  • 36
1
2
3 4 5