[plugIn] swiperSlider 사용하기

swiperSlider 바로가기

 

HTML

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

 

CSS

scrollbar 사용시

scrollbar-drag 색상 및 너비 제어하기

/* will not work as it should 스크롤바 너비 제어 */
.swiper-horizontal .swiper-scrollbar{width: 50%!important;}
.swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {background-color: red;}

 

var swiper = new Swiper(".categorySwiper", {
	//초기값 설정은 모바일이 먼저 적용됨
    spaceBetween: 60, //간격
    slidesPerGroup: 2, //슬라이드 될 때 몇개의 그룹 생성할 건지
    loop: false, //반복유무 (true일 경우 무한반복 슬라이드)
    slidesPerView: 6, //몇개의 컨텐츠를 보여줄 것인지
	slidesOffsetBefore : 30, //시작 지점 간격(처음 콘텐츠 간격)
    slidesOffsetAfter : 30, //마지막 지점 간격
    autoplay: { //몇초 뒤에 이동할 건지
                delay: 5000,
            },
    scrollbar: {
        el: '.swiper-scrollbar',
        dragSize: 50, //스크롤바 드래그 가능한 요소의 크기(px)
    },
    pagination : { // 페이징 설정
        el : '.swiper-pagination',
        clickable : true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
	},
    
    breakpoints: {
            750: { //브라우저가 750보다 클때
                spaceBetween: 60,
                slidesPerView: 6,
                slidesOffsetBefore : 30,
                slidesOffsetAfter : 30,
                slidesPerGroup: 2, //슬라이드 될 때 몇개의 그룹 생성할 건지
                loop: false, //반복유무 (true일 경우 무한반복 슬라이드)
            }
        }
});

 

slidePerGroup은 슬라이드 될 때 하단에 그룹 생성을 어떻게 할 것인가를 말한다.

현재 slidesPerGroup: 2라고 지정했기 때문에 scrollbar 가 두개로 나뉜다.

 

이런 식으로 slidesPerGroup의 개수 생성

 

---

220511추가

한페이지에서 다중 스와이퍼 적용할때 주의사항

한페이지에 다중으로 스와이퍼를 사용해야할 경우 앞에 변수는 다르게 지정해주어야 한다.

또한 각각의 스와이퍼 pagination이나 navigation도 부모를 타고 들어가야 개별적으로 작동한다.

 

 

 

swiperslide 스크롤 너비 제어하는 방법 이슈

Swiper slider, how to reduce the width of the scrollbar

 

스와이퍼 옵션 정리