如何使滑塊類似/畫廊到亞馬遜產品滑塊

Question

我建立一個網站，我不擅長js或jQuery。我不知道該怎麼做。我在尋找幾天，找到任何支持此功能的庫。不過，我找到了不同的庫，但其中大部分都與我需要的不同，縮放和縮略圖分開。它必須與Amazon或eBay產品列表滑塊類似。

任何一個可以給我一個線索我應該從哪裏開始？

PS。我試過swiper.js，但它只能雙擊放大。

更新2017年5月16日

例

Answer 1

嗨首先訪問鏈接http://www.landmarkmlp.com/js-plugin/owl.carousel/和下載滑塊。

打開你的網站主題的頭，把JS和CSS其中一個下面提及到代碼段，並更換圖片​​，JS和CSS文件的路徑，其在哪裏。

之後把HTML的部分，你想顯示你的滑塊，並與動態的產品循環代碼替換DIV。

$(document).ready(function($) { 
 
     $("#owl-example").owlCarousel(); 
 
    }); 
 

 

 
    $("body").data("page", "frontpage");

<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/css/custom.css" rel="stylesheet"> 
 
    <!-- Owl Carousel Assets --> 
 
    <link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.css" rel="stylesheet"> 
 
    <link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.theme.css" rel="stylesheet"> 
 
     <div id="demo"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
      <div class="span12"> 
 

 
       <div id="owl-example" class="owl-carousel"> 
 

 
       <div class="item darkCyan"> 
 
        <img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/touch.png" alt="Touch"> 
 
        <h3>Touch</h3> 
 
        <h4>Can touch this</h4> 
 
       </div> 
 
       <div class="item forestGreen"> 
 
        <img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/grab.png" alt="Grab"> 
 
        <h3>Grab</h3> 
 
        <h4>Can grab this</h4> 
 
       </div> 
 
       <div class="item orange"> 
 
        <img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/responsive.png" alt="Responsive"> 
 
        <h3>Responsive</h3> 
 
        <h4>Fully responsive!</h4> 
 
       </div> 
 

 
       <div class="item yellow"> 
 
        <img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/css3.png" alt="CSS3"> 
 
        <h3>CSS3</h3> 
 
        <h4>3D Acceleration.</h4> 
 
       </div> 
 

 
       <div class="item dodgerBlue"> 
 
        <img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/multi.png" alt="Multi"> 
 
        <h3>Multiply</h3> 
 
        <h4>Owls on page.</h4> 
 
       </div> 
 

 
       <div class="item skyBlue"> 
 
        <img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/modern.png" alt="Modern Browsers"> 
 
        <h3>Modern</h3> 
 
        <h4>Browsers Compatibility</h4> 
 
       </div> 
 

 
       <div class="item zombieGreen"> 
 
        <img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones"> 
 
        <h3>Zombie</h3> 
 
        <h4>Browsers Compatibility</h4> 
 
       </div> 
 

 
       <div class="item violet"> 
 
        <img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/controls.png" alt="Take Control"> 
 
        <h3>Take Control</h3> 
 
        <h4>The way you like</h4> 
 
       </div> 
 

 
       <div class="item yellowLight"> 
 
        <img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/feather.png" alt="Light"> 
 
        <h3>Light</h3> 
 
        <h4>As a feather</h4> 
 
       </div> 
 

 
       <div class="item steelGray"> 
 
        <img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/tons.png" alt="Tons of Opotions"> 
 
        <h3>Tons</h3> 
 
        <h4>of options</h4> 
 
       </div> 
 

 
       </div> 
 

 

 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.min.js"></script>

希望如此，它會爲你工作。您只需要根據它位於網站文件目錄中的位置來更新文件路徑。