Owl Foundation 6 的轮播问题

Question

你能帮我解决JS与Foundation 6的冲突吗

这个食谱 — http://zurb.com/university/lessons/adding-on-to-a-great-foundation — 对我没有帮助。

我需要在 Foundation 中使用 Owl 旋转木马。

如何使用下面的 Javascript 代码？

$(document).foundation();

jQuery(document).ready(function(){

});

谢谢。

Answer 1

没有冲突。

在您的 HTML 中，您必须在 jquery.js.

之后包含 owl-carousel.js 文件

在您的 app.js 中，放入您的调用代码并使用您的 owl-carousel 包装器的 ID。示例：

$( document ).ready(function() { 

 // homepage slider
  $("#owl-homepage").owlCarousel({

    navigation : false, // Show next and prev buttons
    slideSpeed : 300,
    paginationSpeed : 400,
    singleItem:true,
    transitionStyle : "backSlide",
    autoPlay: true
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<div class="row expanded">
  <!-- rotating images -->
  <div id="owl-homepage" class="owl-carousel owl-theme" style="height: 100vh">

    <div class="item" style="background-image: url('img/7.png'); min-height: 80vh; background-position: center center;"></div>
    <div class="item" style="background-image: url('img/6.png'); min-height: 80vh; background-position: center center;"></div>
    <div class="item" style="background-image: url('img/1.png'); min-height: 80vh; background-position: center center;"></div>
    <div class="item" style="background-image: url('img/2.png'); min-height: 80vh; background-position: center center;"></div>
    <div class="item" style="background-image: url('img/3.png'); min-height: 80vh; background-position: center center;"></div>
    <div class="item" style="background-image: url('img/4.png'); min-height: 80vh; background-position: center center;"></div>
    <div class="item" style="background-image: url('img/5.png'); min-height: 80vh; background-position: center center;"></div>
   
  </div>
 </div>

希望这对您有所帮助:)

Owl Foundation 6 的轮播问题

Owl Carousel issue with Foundation 6

javascript

carousel

conflict

owl-carousel

zurb-foundation-6