Карусель совы не отображается должным образом
Я пытаюсь загрузить свои динамические категории с помощью карусели совы, но она показывает, что элементы закрыты.
Скриншоты
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">$241.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">$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;
});
@CUGreen - это не просто javascript для карусели сов, который включает все эти классы, которые вы видите в моем коде. Как я уже упоминал, если версия html будет работать нормально
Тогда как работают вкладки?
Вкладки @CUGreen получают класс с помощью javascript, позвольте мне снова обновить свой вопрос.
@CUGreen обновлен
Вам нужно будет вызвать карусель совы в обратном вызове на каждом слайдере отдельно, если у вас есть только один вызов, он откроет только первый, который соответствует. Я нашел здесь пример: codepen.io/leetech/pres/OyKmxB
@NathanielFlick, как мне это сделать? я уже пробовал получить свои карусели по классам.
См. Ссылку, которую я разместил в своем предыдущем комментарии, каждая карусель вызывается уникальным классом или идентификатором, чтобы привязать ее к функциям Owl Carousel.
@NathanielFlick просто вопрос, основанный на вашей примерной ссылке, у меня должны быть разные классы или идентификаторы, я могу добавить идентификаторы к своим классам, как и вкладки, которые я сделал, но проблема в том, что мой скрипт загружается из файла js, и это не встроенное кодирование, поэтому как я могу передать этот идентификатор в моем клинке в мой файл js?
Вы также можете использовать каждый для поиска каждого слайдера: stackoverflow.com/questions/39685863/…. Пока вы привязываетесь к своему идентификатору карусели совы, вы можете использовать каждый, чтобы найти каждого из них, независимо от того, сколько.
@NathanielFlick, я сделал каждый только что результат такой же, но что-то не так, когда я нажимаю на вкладки слайдера notbook и слайдера pc, он перескакивает между ними! Это означает, что он считает эти две вкладки ползунка как одну вкладку ползунка. как это возможно?
у вас есть несколько div с одинаковым идентификатором #latest_category?
@CUGreen да. он зацикливается, поэтому все мои слайдеры имеют этот идентификатор.
Идентификаторы элементов должны быть уникальными.
@CUGreen, я просто изменил его на класс и отредактировал свой js-код, чтобы использовать класс, но без разницы
если какие-либо вкладки скрыты, находятся ли они в DOM при загрузке страницы?
@NathanielFlick, да, они есть, также вот небольшое видео, которое я сделал из своих слайдеров, вы можете увидеть, как они себя ведут streamable.com/v9a5m
@NathanielFlick понятия не имею?
@CUGreen есть предложения?
У вас есть URL-адрес, который мы можем посмотреть? иначе диагностировать сложно.
Я могу поделиться с вами своим местным от ngrok
@NathanielFlick 368ee194.ngrok.io вот так
@NathanielFlick что-нибудь нашел?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я вас правильно понял, проблема не в карусели. Это со скриптом вкладок.
Так что лучше использовать класс в качестве селектора.
Похоже, вы используете что-то вроде этого 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;
});
Вот рабочий пример, который показывает аналогичную ситуацию.
Я уже изменил его на класс, но я также пробую использовать ваш js-код и сообщаю вам, спасибо.
Вы используете какой-то другой код для вкладок? вот в чем проблема.