멀티 슬라이드 제이쿼리 작업중인데요.
<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,
},
}
});
답변 1개 / 댓글 4개
slidesPerGroup : 한번에 넘어갈 숫자
답변에 대한 댓글 4개
버전업 이후로 비율로 반응형 설정이 가능하긴 하나. 기본에 맞추어진 px를 비율로 환산하는게 번거로워 일부러 기기 사이즈에 맞추어 반응형 변환을 합니다.
https://swiperjs.com/demos
스와이퍼 데모사이트 입니다. 원하시는 테마를 찾아보고 여러가지 입맛에 맞게 구현해 보시는게 더욱 좋을 것 같습니다 ^^
swiper 플러그인을 최신형으로 사용하고 계시는거 같은데 IE는 곧 서비스 종료도 앞두고 있고
최신버전과 호환이 되지 않습니다.
아래 링크 확인해보시구요.
https://eunyoe.tistory.com/58
아랫버전 받으셔서 플러그인 적용시켜야 할 것 같습니다.
답변을 작성하려면 로그인이 필요합니다.
지금 slidesPerGroup : '8', 로 해주니 너무 금방 끝나버려서 slidesPerGroup : '4', 이렇게 넣어봤는데..처음엔 4개씩 움직이다가 2번째부턴 8개씩 움직이고 있는데요. 또 추가로 적어줘야할 부분이 있는걸까요?;; 아님 한줄 8개 단위로만 가능한건지요?