如何使Slider与Amazon产品Slider类似/库

Question

我建立了一个网站，我不擅长js或jQuery。我不知道该怎么办。我搜索了几天，以找到任何支持这个功能的库。然而，我发现了不同的库，但它们中的大多数都与我所需要的不同，缩放和缩略图。它必须类似于亚马逊或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>

​

希望它会对你有用。您只需要更新文件路径，根据它位于您的网站文件目录。