Owl 轮播显示不正确

Question

我正在尝试使用 owl 轮播加载我的动态类别，但它显示项目已关闭。

截图

first category **Notebook** is opened and others are closed

second category **PC** is opened and others are closed

我需要所有这些都在页面加载时打开并显示项目。如果我使用 html 版本，它工作正常，但是当我添加我的动态代码时，它会损坏，如上图所示。

代码

<div class="category-module" id="latest_category">
  <h3 class="subtitle">{{$kis->title}} - <a class="viewall" href="category.tpl">view all</a></h3>
  <div class="category-module-content">

    <!-- tabs -->
    <ul id="sub-cat" class="tabs">
      @foreach($kis->childs->take(6) as $child)
      <li><a href="#tab-cat{{$child->id}}">{{$child->title}}</a></li>
      @endforeach
    </ul>

    <!-- items -->
    @foreach($kis->childs->take(6) as $child)
      <div id="tab-cat{{$child->id}}" class="tab_content">
        <div class="owl-carousel latest_category_tabs">
          @foreach($child->products->take(10) as $ki)
          <div class="product-thumb">
            <div class="image"><a href="product.html"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="product.html">{{$ki->title}}</a></h4>
              <p class="price"> <span class="price-new">{{number_format($ki->price,0)}}</span> <span class="price-old">1.99</span> <span class="saving">-5%</span> </p>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    @endforeach
  </div>
</div>

谁能帮我找出问题所在？

PS: in case you wonder why my PHP codes are the way you see in my code I am using laravel blade templates.

更新

在这里我分享了上面代码的完整 html 版本，也许你可以找到一些我找不到的差异

<div class="category-module" id="latest_category">
  <h3 class="subtitle">Electronics - <a class="viewall" href="category.tpl">view all</a></h3>
  <div class="category-module-content">
    <ul id="sub-cat" class="tabs">
      <li><a href="#tab-cat1">Laptops</a></li>
      <!-- and more -->
    </ul>
    <div id="tab-cat1" class="tab_content">
      <div class="owl-carousel latest_category_tabs">
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html">Aspire Ultrabook Laptop</a></h4>
            <p class="price"> <span class="price-new">0.00</span> <span class="price-old">1.99</span> <span class="saving">-5%</span> </p>
            <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/macbook_pro_1-200x200.jpg" alt=" Strategies for Acquiring Your Own Laptop " title=" Strategies for Acquiring Your Own Laptop " class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html"> Strategies for Acquiring Your Own Laptop </a></h4>
            <p class="price"> <span class="price-new">,400.00</span> <span class="price-old">,900.00</span> <span class="saving">-26%</span> </p>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/macbook_air_1-200x200.jpg" alt="Laptop Silver black" title="Laptop Silver black" class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html">Laptop Silver black</a></h4>
            <p class="price"> <span class="price-new">,142.00</span> <span class="price-old">,202.00</span> <span class="saving">-5%</span> </p>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/macbook_1-200x200.jpg" alt="Ideapad Yoga 13-59341124 Laptop" title="Ideapad Yoga 13-59341124 Laptop" class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html">Ideapad Yoga 13-59341124 Laptop</a></h4>
            <p class="price"> .00 </p>
            <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/ipod_shuffle_1-200x200.jpg" alt="Hp Pavilion G6 2314ax Notebok Laptop" title="Hp Pavilion G6 2314ax Notebok Laptop" class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html">Hp Pavilion G6 2314ax Notebok Laptop</a></h4>
            <p class="price"> 2.00 </p>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/ipod_touch_1-200x200.jpg" alt="Samsung Galaxy S4" title="Samsung Galaxy S4" class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html">Samsung Galaxy S4</a></h4>
            <p class="price"> <span class="price-new">.00</span> <span class="price-old">2.00</span> <span class="saving">-50%</span> </p>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- and more -->
  </div>
</div>

更新 2

这是我的 javascript 个轮播

$("#latest_category .owl-carousel.latest_category_tabs").owlCarousel({
    itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
    lazyLoad : true,
    navigation : true,
    navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
    scrollPerPage : true,
    pagination: false,
});
$("#latest_category .tab_content").addClass("deactive");
$("#latest_category .tab_content:first").show();
//Default Action
$("#latest_category ul#sub-cat li:first").addClass("active").show(); //Activate first tab
//On Click Event
$("#latest_category ul#sub-cat li").on("click", function() {
    $("#latest_category ul#sub-cat li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $("#latest_category .tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
});

Answer 1

如果我没理解错的话，问题不在于轮播。它与选项卡脚本一起使用。

所以你最好使用 class 作为选择器。

您的标签似乎使用了类似这样的东西https://gist.github.com/hong6/7372763。

那么你最好删除 #latest_category 并使用 class。然后在您的 jquery 中，您可以添加一个 jquery 上下文。这是未经测试的代码：

$(".category-module .owl-carousel.latest_category_tabs").owlCarousel({
    itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
    lazyLoad : true,
    navigation : true,
    navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
    scrollPerPage : true,
    pagination: false,
});

$(".category-module").each(function() {
    $(".tab_content", this).addClass("deactive");
    $(".tab_content:first", this).show();
    //Default Action
    $("ul#sub-cat li:first", this).addClass("active").show(); //Activate first tab
});

//On Click Event
$(".category-module ul#sub-cat li").on("click", function() {
    var parent = $(this).parents('.category-module')
    $("ul#sub-cat li", parent).removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content", parent).hide(); 
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab, parent).fadeIn(); //Fade in the active content
    return false;
});

这里有一个 fiddle 显示了类似的情况。

Owl 轮播显示不正确

Owl Carousel not showing properly

html

javascript

laravel

owl-carousel

截图

代码

更新

更新 2