Главная > Javascript > owl carousel filter

owl carousel filter

17 августа 2020 Написать комментарий К комментариям

Добавляется js: https://huynhhuynh.github.io/owlcarousel2-filter/dist/owlcarousel2-filter.min.js

$(document).ready(function(){
	var owl=$('.owl_1').owlCarousel({
		loop:false,
		margin:0,
		items:4,
		nav:true,
		dots:false,
		navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
	});
	$('.owl-filter-bar').on('click','li',function(){
		var item=$(this);
		$('.owl-filter-bar ul li').removeClass('active');
		item.addClass('active');
		var filter=item.data('owl-filter');
		owl.owlcarousel2_filter(filter);
	});
});
<div class="owl-filter-bar">
	<ul>
		<li data-owl-filter="*" class="active">Все</li>
		<li data-owl-filter=".d1">1</li>
		<li data-owl-filter=".d2">2</li>
		<li data-owl-filter=".d3">3</li>
		<li data-owl-filter=".d4">4</li>
		<li data-owl-filter=".d5">5</li>
	</ul>
</div>
<div class="owl-carousel owl-theme owl_1">
	<div class="item d1"></div>
	<div class="item d2"></div>
	<div class="item d3"></div>
	<div class="item d4 d5"></div>
	<div class="item"></div>
</div>

https://huynhhuynh.github.io/owlcarousel2-filter/

Categories: Javascript Tags:
  1. Пока что нет комментариев.
Похожие публикации