swiper-slide 하는 법

스타일시트 링크

 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.css'>

 

스크립트(body>div.wrap 아래에 걸기)

<!-- script -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js'></script>
<script src="js/slide.js"></script>

 

 

마크업( data-swiper-parallax-y="70%")

  <div class="wrap">
    <div class="inner">
      <div class="section_slide">
        <div class="topBox">
          <h2 class="title">실전! 웹사이트제작 STEP BY STEP!</h2>
          <p class="txt">함께 제작 해 볼 클론코딩 사이트입니다.</p>
        </div>

        <div class="swiper-container">
          <div class="swiper-wrapper">
            <!-- slider1 -->
            <div class="swiper-slide">
              <div class="imgBox" data-swiper-parallax-y="70%">
                <img src="img/slide_01.jpg" alt="">
                <span class="squer" data-swiper-parallax-y="70%"></span>
              </div>
              <div class="txtBox" data-swiper-parallax-x="-60%">
                <h2><span>Daebang</span> Clone Cording</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, illum. Omnis alias error maiores nostrum, accusamus fugiat laborum, repellendus sit architecto dolores quae, eligendi sapiente nihil modi aut molestias natus!</p>
              </div>
              <p class="num" data-swiper-parallax-y="-60%">01</p>
            </div>

            <!-- slider2 -->
            <div class="swiper-slide">
              <div class="imgBox" data-swiper-parallax-y="70%">
                <img src="img/slide_02.jpg" alt="">
                <span class="squer" data-swiper-parallax-y="70%"></span>
              </div>
              <div class="txtBox" data-swiper-parallax-x="-60%">
                <h2><span>Daebang</span> Clone Cording</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, illum. Omnis alias error maiores nostrum, accusamus fugiat laborum, repellendus sit architecto dolores quae, eligendi sapiente nihil modi aut molestias natus!</p>
              </div>
              <p class="num" data-swiper-parallax-y="-60%">01</p>
            </div>

            <!-- slider3 -->
            <div class="swiper-slide">
              <div class="imgBox" data-swiper-parallax-y="70%">
                <img src="img/slide_03.jpg" alt="">
                <span class="squer" data-swiper-parallax-y="70%"></span>
              </div>
              <div class="txtBox" data-swiper-parallax-x="-60%">
                <h2><span>Daebang</span> Clone Cording</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, illum. Omnis alias error maiores nostrum, accusamus fugiat laborum, repellendus sit architecto dolores quae, eligendi sapiente nihil modi aut molestias natus!</p>
              </div>
              <p class="num" data-swiper-parallax-y="-60%">01</p>
            </div>

            <!-- slider4 -->
            <div class="swiper-slide">
              <div class="imgBox" data-swiper-parallax-y="70%">
                <img src="img/slide_04.png" alt="">
                <span class="squer" data-swiper-parallax-y="70%"></span>
              </div>
              <div class="txtBox" data-swiper-parallax-x="-60%">
                <h2><span>Daebang</span> Clone Cording</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, illum. Omnis alias error maiores nostrum, accusamus fugiat laborum, repellendus sit architecto dolores quae, eligendi sapiente nihil modi aut molestias natus!</p>
              </div>
              <p class="num" data-swiper-parallax-y="-60%">01</p>
            </div>
          </div><!--swiper-wrapper-->

          <!-- 버튼 -->
          <div class="swiper-button-next">
            <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
          </div>
          <div class="swiper-button-prev">
            <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
          </div>

        </div><!--swiper-container-->
      </div><!--section_slide-->
    </div><!--inner-->
  </div><!--wrap-->

 

 

slide.js

 

if(window.innerWidth < 1200) {
  new Swiper(".swiper-container",{
      direction: "horizontal",
      slidesPerView: 1,
      nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev",
      paginationClickable: !0,
      spaceBetween: 0,
      autoplay: 1500,
      loop: !0
  })
} else {
  new Swiper(".swiper-container",{
      direction: "horizontal",
      slidesPerView: 1,
      parallax: !0,
      nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev",
      paginationClickable: !0,
      spaceBetween: 0,
      speed: 1500,
      parallax: !0,
      autoplay: 1500,
      loop: !0
  })
}