Добавим в стандартную галерею функционал карусели и фильтрации с помощью скрипта slick.

Галерея с каруселью

У созданной галереи задаем класс, например cgallery. Инициируем slick для галереи с классом cgallery

$('.cgallery .blocks-gallery-grid').slick({
	infinite: false,
	autoplay: false,
	dots: false,
	arrows: true,
	speed: 500,
	slidesToShow: 4,
	slidesToScroll: 2,
	centerPadding: '15px',
	responsive: [
		{
		  breakpoint: 800,
		  settings: {
			slidesToShow: 3,
			slidesToScroll: 2,
		  }
		},
		{
		  breakpoint: 480,
		  settings: {
			slidesToShow: 2,
			slidesToScroll: 2
		  }
		},
		{
		  breakpoint: 330,
		  settings: {
			slidesToShow: 1,
			slidesToScroll: 1
		  }
		}
	] 
});

Добавляем фильтр

Добавляем изображениям описание в виде атрибутов для фильтра. Например: gost, one, two, three. Далее мы эти описания будем передавать в класс элемента галереи.

Скрываем вывод описаний во фронтенде:

.cgallery figcaption.blocks-gallery-item__caption {opacity: 0;}

Берем описания изображений и переводим их в класс элементов. Добавляем вывод кнопок фильтра и скрипты по нажатию каждой кнопки:

jQuery(document).ready(function() {
	
	$('.cgallery figcaption').each(function(){
		var text = $(this).text();
		$(this).parents('li.blocks-gallery-item').addClass(text);
	});
	
	
	$('.cgallery').prepend('<div class="fbtns"><div class="all-filter active">Все планировки</div><div class="gost-filter">Гостинки</div><div class="one-filter">Однокомнатные</div><div class="two-filter">Двухкомнатные</div><div class="three-filter">Трехкомнатные +</div></div>');
	
	
	$('.fbtns > *').on('click', function(){
		$('.fbtns > *').removeClass('active');
		$(this).addClass('active');
	});		


	$('.gost-filter').on('click', function(){
		$('.blocks-gallery-grid').slick('slickUnfilter');
		$('.blocks-gallery-grid').slick('slickFilter','.gost');
	});	

	$('.one-filter').on('click', function(){
		$('.blocks-gallery-grid').slick('slickUnfilter');
		$('.blocks-gallery-grid').slick('slickFilter','.one');
	});
	
	$('.two-filter').on('click', function(){
		$('.blocks-gallery-grid').slick('slickUnfilter');
		$('.blocks-gallery-grid').slick('slickFilter','.two');
	});
	
	$('.three-filter').on('click', function(){
		$('.blocks-gallery-grid').slick('slickUnfilter');
		$('.blocks-gallery-grid').slick('slickFilter','.three');
	});
	
	$('.all-filter').on('click', function(){
		$('.blocks-gallery-grid').slick('slickUnfilter');
	});

});

CSS

.fbtns {display: flex; flex-wrap: wrap;}

.fbtns > * {border: 1px solid #eee; padding: 5px 15px; border-radius: 5px; margin: 0 15px 15px; cursor: pointer;}

.fbtns > *:hover {border: 1px solid #ffc107;}

.fbtns > *.active {background: #ffc107;}

Поделиться в соц. сетях: