79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
import { Autoplay, Navigation, Pagination } from "swiper";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css/pagination";
|
|
|
|
const swiperOptions = {
|
|
modules: [Autoplay, Navigation, Pagination],
|
|
slidesPerView: 1,
|
|
spaceBetween: 0,
|
|
autoplay: {
|
|
delay: 3000,
|
|
disableOnInteraction: false,
|
|
},
|
|
loop: true,
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
};
|
|
|
|
export default function Slider2() {
|
|
return (
|
|
<section className="slider d-flex justify-content-center align-items-center"
|
|
style={{ padding: "90px 0 0" }}>
|
|
<div className="slider-wrapper" style={{ maxWidth: "1920px", width: "100%" }}>
|
|
<Swiper {...swiperOptions} className="theme_carousel position-relative">
|
|
|
|
{/* Slide 1 */}
|
|
<SwiperSlide>
|
|
<img
|
|
src="assets/images/slider/1.png"
|
|
alt="Slide 1"
|
|
style={{
|
|
width: "100%",
|
|
height: "auto",
|
|
display: "block",
|
|
}}
|
|
/>
|
|
</SwiperSlide>
|
|
|
|
{/* Slide 2 */}
|
|
<SwiperSlide>
|
|
<img
|
|
src="assets/images/slider/2.png"
|
|
alt="Slide 2"
|
|
style={{
|
|
width: "100%",
|
|
height: "auto",
|
|
display: "block",
|
|
}}
|
|
/>
|
|
</SwiperSlide>
|
|
|
|
{/* Slide 3 */}
|
|
<SwiperSlide>
|
|
<img
|
|
src="assets/images/slider/3.png"
|
|
alt="Slide 3"
|
|
style={{
|
|
width: "100%",
|
|
height: "auto",
|
|
display: "block",
|
|
}}
|
|
/>
|
|
</SwiperSlide>
|
|
|
|
<div className="swiper-button-prev"></div>
|
|
<div className="swiper-button-next"></div>
|
|
</Swiper>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|