Closed 1mehdifaraji closed 2 years ago
This is the code I got from the official docs : ` import React from "react"; import Swiper from "react-id-swiper"; import "swiper/css/swiper.css";
const Home = () => { const params = { direction: "vertical", pagination: { el: ".swiper-pagination", clickable: true, }, }; return ( <Swiper {...params}>
<div>Slide #2</div> <div>Slide #3</div> <div>Slide #4</div> <div>Slide #5</div> </Swiper>
); }; export default Home; ` But it shows all the divs and swiper doesn't work properly
I solved the issue with this css class in global styles : .swiper-container { height: 10em; overflow: hidden; }
.swiper-container {
height: 10em;
overflow: hidden;
}
This is the code I got from the official docs : ` import React from "react"; import Swiper from "react-id-swiper"; import "swiper/css/swiper.css";
const Home = () => { const params = { direction: "vertical", pagination: { el: ".swiper-pagination", clickable: true, }, }; return ( <Swiper {...params}>
); }; export default Home; ` But it shows all the divs and swiper doesn't work properly