<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="">
</div>
<div class="swiper-slide">
<img src="">
</div>
<div class="swiper-slide">
<img src="">
</div>
<div class="swiper-slide">
<img src="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>



<script>
var swiper = new Swiper(".mySwiper", {
effect: "fade",
centeredSlides: true,
loop:true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});

let $slides = document.querySelectorAll('.swiper-slide, .swiper-pagination');
for (let i of $slides) {
i.addEventListener('mouseover', function(){
swiper.autoplay.stop();
});
i.addEventListener('mouseout', function(){
swiper.autoplay.start();
});
};
</script>

<style>
/* 슬라이드 디자인 /
.swiper {
/width: 400px;
height: 100%;
border-radius:10px;/
}
.swiper-slide img {
/width: 400px;/
display: block;
/height: 100%;*/
object-fit: cover;
}
.swiper-pagination{
bottom: 1px !important;
}
.swiper-pagination-bullet {
background-color: rgb(0, 0, 0) !important;
opacity: 0.4 !important;
border: solid 2px rgb(0, 0, 0);
box-shadow: 0 0 3px rgb(0, 0, 0);
}
.swiper-pagination-bullet-active {
background-color: rgb(255, 255, 255) !important;
border: solid 2px rgba(0, 0, 0,1);
opacity: 1 !important;
}
</style>

Link URL

제목1
제목2
제목3
제목4
제목5
제목6
제목7
소제1
소제2
소제3
소제4
소제5
기타1
기타2
기타3
기타4
기타5
기타6