멀티 슬라이드 제이쿼리 반응형 설정
본문
멀티 슬라이드 제이쿼리 작업중인데요.
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="/img/images/ptn_logo_01.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_02.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_03.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_04.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_05.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_06.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_07.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_08.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_09.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_10.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_11.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_12.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_13.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_14.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_15.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_16.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_17.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_18.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_19.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_20.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_21.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_22.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_23.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_24.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_25.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_26.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_27.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_28.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_29.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_30.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_31.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_32.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_33.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_34.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_35.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_36.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_37.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_38.jpg" alt=""></div>
<div class="swiper-slide"> <img src="/img/images/ptn_logo_39.jpg" alt=""></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
이렇게 넣었고
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 49,
centeredSlides: false,
slidesPerView : '8',
loopAdditionalSlides : 1,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
한줄에 8개씩 들어가게 세팅해서 잘 돌아갑니다.
근데 반응형이여서 해상도에 따라서 너무 작게 보여서 조정해주고 싶어서 아래를 적용시켜야하는데
이대로 <script>안에 넣어보니 적용이 안되어서요~
어떻게 사용해야하는걸까요?
그리고 지금 현재는 왼쪽 오른쪽 화살표를 누르면 한개씩 이미지가 옆으로 이동하는데
8개씩 한번에 이동할 수 있게 가능할까요?
-------------------------------------------------------------------------------------------------------------
반응형 설정
swiper는 breakpoints라는 객체로 반응형 설정이 가능합니다. 아래 설정은 브라우저의 가로 크기가 768px 이하 일 때 동작하는 예시입니다.
breakpoints : { // 반응형 설정이 가능 width값으로 조정
768 : { slidesPerView : 1, }, },
//5.3.0부터 "비율"(너비 / 높이)로 설정이 가능해졌습니다.
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 10,
breakpoints: {
'@0.75': {
slidesPerView: 2,
spaceBetween: 20,
},
'@1.00': {
slidesPerView: 3,
spaceBetween: 40,
},
'@1.50': {
slidesPerView: 4,
spaceBetween: 50,
},
}
});