如何使Slider与亚马逊产品Sli​​der相似/相似

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替换为动态产品循环代码。

＆＃13;

＆＃13;

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


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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望这对你有用。您只需根据网站文件目录中的位置更新文件路径。