多图像滑块

Question

我想制作一个包含多个图像的滑块，它是一个非常简单的产品滑块，其中包含 link 到其产品页面的图像。我希望箭头位于滑块的两侧。我注意到，当我也实现我的滑块时，它否定了我之前在 div 中拥有的 "prettyPhoto" 功能。

不幸的是，我正在使用 HTML4。这是我放在一起的滑块的 JS fiddle！

出于某种原因我无法显示箭头...而且所有图像都在彼此之上。我只是不太确定我做错了什么。我在 javascript 和滑块方面相当陌生。

在此先感谢您的帮助。

我需要它看起来像这样：

Answer 1

为了自定义控件，您必须做几件事：

您首先必须拥有控件。默认情况下，prev/Next 控件设置为 false:

navigation: true
接下来，我们将使用 navigationText 选项为控件创建实际箭头，以将字符串数组解析为实际功能 HTML.
```
navigationText: [
      "<i class='fa fa-chevron-left'></i>",
      "<i class='fa fa-chevron-right'></i>"
   ] 
```
我差点忘了，当我查看您的 Fiddle 时，它根本无法正常工作。运行 Owl Carousel 至少需要 3 个外部文件。
1. Owl轮播CSS（可选推荐）：
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
2. Owl 轮播主题CSS（可选）：
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
3. 超棒的字体图标CSS（可选）：
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
4. jQuery（基本）：
  
  <script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
5. Owl轮播JS（必备）：
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

PLUNKER

片段

<!DOCTYPE html>
<html>

<head>
  <!--These 4 external Files are necessary for Owl to function-->

  <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
  -->

  <!--This link is both owl CSS files combined into one-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/g/jquery.owlcarousel@1.31(owl.carousel.css+owl.theme.css)">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">

  <!--<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script>
  <style>-->

  <!--This tag is both JS files combined-->
  <script src="https://cdn.jsdelivr.net/g/jquery@2.2.4,jquery.owlcarousel@1.31"></script>

  <style>
    /*
    | SVG Nav Arrow Style
    */
    /* https://gist.github.com/seeRead/11229083 */
    .prod-slider-container {
      position: relative;
      font-family: font-awesome;
    }
    .owl-buttons {
      display: flex;
      width: 100%;
      justify-content: space-between;
    }
    .owl-prev,
    .owl-next {
      position: absolute;
    }
    i.fa {
      cursor: pointer;
      position: absolute;
      font-size: 60px;
      padding-top: 8px;
      height: 64px;
      width: 72px;
      color: rgba(0, 0, 0, .5);
      background: rgba(0, 75, 222, .7);
      border-radius: 50%;
      display: table-cell;
    }
    .owl-prev,
    .owl-next {
      background-color: transparent;
      border: 0px none transparent;
      width: 0px;
      height: 0px;
    }
    .owl-perv {
      left: 0;
    }
    .owl-next {
      right: 72px;
    }
    .item {
      outline: 3px dashed grey;
    }
  </style>
</head>

<body>
  <!-- + PRODUCT SLIDERS -->
  <div class="prod-slider-container">
    <div class="inner-container">
      <div class="slider_header_text">
        <b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</div>
    </div>

    <div class="owl-carousel">

      <div class="item">
        <img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
      </div>
      <div class="item">
        <img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
      </div>
      <div class="item">
        <img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
      </div>
      <div class="item">
        <img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
      </div>
      <div class="item">
        <img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
      </div>

    </div>
    <!--.owl-carousel-->


  </div>
  <!--.prod-slider-container-->

  <script>
    $(document).ready(function() {
      $('.owl-carousel').owlCarousel({
        items: 3,
        autoPlay: 3000,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3],
        navigation: true,
        navigationText: [
          "<i class='fa fa-chevron-left'></i>",
          "<i class='fa fa-chevron-right'></i>"
        ]
      });
    });
  </script>

</body>

</html>

多图像滑块

Multi-Image Slider

javascript

css

slider

html4

片段