목록으로

swiper slider 질문입니다ㅠㅠ 채택완료

소솝빵

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전 조회 2,938

답변 1

안녕하세요.. swiper slider 쓰는데 저랑 비슷한건 데모를 찾아봐도 안나와서요 ㅠㅠ

3695986177_1602059822.7434.png

이런식으로 나오는걸 원하는데 ..
3695986177_1602059910.5087.png

계속 이렇게 나오네요 ㅠㅠ ...

3695986177_1602059968.9908.png

소스는 이건데요.. ㅠㅠ 혹시 저랑 비슷하게 만들어보신 분 있으신가요 ㅠㅠ

#swiper

답변 1개

정렬:

채택된 답변

+20 포인트

ifelse

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전

Copy





.swiper-container {

  width: 400px;

  height: auto;

  box-sizing: border-box;

}

.swiper-slide {

  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  height:33%;

  background:#333;

  color:#fff;

  font-size:72px;

}





  

    1

    2

    3

    4

    5

    6

    7

    8

    9    

  

  

  

  

  

  

  







var sliderSelector = '.swiper-container',

    options = {

      init: false,

      speed:800,

      slidesPerView: 1, // or 'auto'

      slidesPerColumn: 3,

      slidesPerGroup:1,

      spaceBetween: 5,

      grabCursor: true,

      autoplay: {

        delay:3000

      },

      navigation: {

        nextEl: '.swiper-button-next',

        prevEl: '.swiper-button-prev',

      },

      pagination: {

        el: '.swiper-pagination',

        clickable: true,

      },      

    };

var mySwiper = new Swiper(sliderSelector, options);

mySwiper.init();

로그인 후 평가할 수 있습니다