slick 플러그인 사용

왜 slick을 사용하고 swiper를 사용하지 않습니까?swiper2는 이동단이 미끄러질 때 렉이 잘 걸리기 때문에 이동단에 적합하지 않습니다. swiper3는 이동단의 렉 문제를 해결했지만 IE10+만 호환되기 때문에 pc단에서의 호환성이 좋지 않습니다.한편, slick 플러그인은 이런 문제가 존재하지 않는다. 이것은 jquery 1.7과 이상의 버전을 바탕으로 하는 옵션 카드 플러그인으로 호환성이 양호하고 화호, 크롬, Safari와 IE8 및 이상의 pc단 브라우저에 적용되며 이동단에서의 사용에도 문제가 없다.
1. slick 플러그인 도입:
먼저, 글의 첫머리에서 말한 바와 같이 slick 플러그인을 사용하려면 jquery1을 불러와야 합니다.7 이상 버전입니다.그 다음에 slick 플러그인의 도입 방식은 swiper 플러그인과 마찬가지로 머리에 다음과 같은 코드를 추가해야 한다.

</code></pre> 
 <p>       slick         ，         ，         ：</p> 
 <pre><code><link rel="stylesheet type="text/css" href="    /slick-theme.css">
</code></pre> 
 <h4>2.  slick  ：</h4> 
 <p>   slick   swiper        ，     swiper，slick          ，      。               ——1.jpg 2.jpg div（       “pic”），  swiper        ：</p> 
 <pre><code><div class="pic swiper-container">
    <div class="swiper-wrapper>
       <div class="swiper-slide"><img src="img/1.jpg"> </div>
       <div class="swiper-slide"><img src="img/2.jpg"></div>
    </div>
</div>
</code></pre> 
 <p>    ，      swiper，             ， slick         ，      ：</p> 
 <pre><code>$('.pic').slick(); 
</code></pre> 
 <p>   ，          ，   slick            。</p> 
 <h4>3.  slick css  ：</h4> 
 <p>  slick css  ，     .slick-slick{} .slick-list{}   ，   slick        ，          ，  ：</p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 258px; max-height: 400px;"> 
   <div class="image-view"> 
    <a href="https://img.  .com/image/info10/72df8b363cdb4bdbacd599225bbd53b2.jpg" target="_blank"><img src="https://img.  .com/image/info10/72df8b363cdb4bdbacd599225bbd53b2.jpg" width="258" height="400" alt="slick      _ 1   " style="border:1px solid black;"></a> 
   </div> 
  </div> 
  <div class="image-caption">
               
  </div> 
 </div> 
 <p>    ，      <code>.slick-slide:focus { outline:none;}</code>   。</p> 
 <h4>4.  slick   ：</h4> 
 <p>swiper             ，        swiper     ，        ：</p> 
 <pre><code>var mySwiper = new Swiper('.swiper-container',{
      loop:false
});
</code></pre> 
 <p> slick            ，             ：</p> 
 <pre><code>$('.pic').slick({
       infinite:false
})；
</code></pre> 
 <p>         ， <code>$('.pic').slick('slickSetOption', 'infinite', false);</code>     。</p> 
 <p>slick swiper            ，  ：<br> slick </p> 
 <blockquote> 
  <p>pauseOnHover（                    ），pauseOnDotsHover（                    ），dots（      ），rtl（         ）</p> 
 </blockquote> 
 <p> swiper </p> 
 <blockquote> 
  <p>autoplayStopOnLastautoplay（                  ）scrollbarDraggable（                ）</p> 
 </blockquote> 
 <p>      ，swiper  3D  ，slick    3D  。</p> 
 <p>  slick       ：</p> 
 <blockquote> 
  <p>1.accessibility  true ，       tab         <br> 2.adaptiveHeight true ，                <br> 3.autoplay true ，          <br> 4.cssEase 'ease' ，  css3 ease  ，               <br> 5.edgeFriction 0 ，          ，       。<br> 6.infinite false ，      。<br> 7.initialSlide 1 ，   1       。<br> 8.swipe false ，       。</p> 
 </blockquote> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1289271663816417280"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">