Question

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

遗憾的是我正在使用HTML4。这是我把滑块放在一起的JS小提琴！

由于某种原因，我无法显示箭头......并且所有图像都在彼此之上。我只是不太确定我做错了什么。我是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>"
   ] 
```
我差点忘了，当我回顾你的小提琴时，它根本没有运作。运行Owl Carousel至少需要3个外部文件。
1. Owl Carousel CSS（可选推荐）：
  
  ＆lt; link rel =“stylesheet”href =“https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css”＆gt;
2. Owl Carousel主题CSS（可选）：
  
  ＆lt; link rel =“stylesheet”href =“https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css”＆gt;
3. Font-Awesome Icons CSS（可选）：
  
  ＆lt; link rel =“stylesheet”href =“https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css”＆gt;
4. jQuery（Essential）：
  
  ＆lt; script src =“https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js”＆gt;＆lt; / script＆gt;
5. Owl Carousel JS（必备）：
  
  ＆lt; script src =“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”＆gt;＆lt; / script＆gt;

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>

多图像滑块

1 个答案:

段