Карусель совы не отображается должным образом - PullRequest
Новая
       18

Карусель совы не отображается должным образом

0 голосов
/ 20 декабря 2018

Я пытаюсь загрузить свои динамические категории с помощью карусели сов, но она показывает закрытые элементы.

Снимки экрана

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

one

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

two

Мне нужно, чтобы все они были открыты и отображать элементы при загрузке страницы .это работает нормально, если я использую 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">$241.99</span> <span class="saving">-5%</span> </p>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    @endforeach
  </div>
</div>

Может кто-нибудь помочь мне найти проблему?

PS: на случай, если вам интересно, почему мои PHP-коды так выглядят в моем коде, я использую шаблоны лезвий laravel.

Обновление

здесья делюсь своей полной 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">$230.00</span> <span class="price-old">$241.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">$1,400.00</span> <span class="price-old">$1,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">$1,142.00</span> <span class="price-old">$1,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"> $2.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"> $122.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">$62.00</span> <span class="price-old">$122.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;
});

1 Ответ

0 голосов
/ 20 декабря 2018

Если я правильно вас понимаю, проблема не в карусели.Это с помощью скрипта tabs.

Так что вам лучше использовать класс в качестве селектора.

Похоже, вы используете что-то вроде https://gist.github.com/hong6/7372763 для своих вкладок.

Тогда вам лучше удалить #latest_category и использовать класс.Затем в вашем 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;
});

Вот скрипка , которая показывает аналогичную ситуацию.

...