Filterable Gallery Slider

In this example below you will see how to do a Filterable Gallery Slider with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Pondake, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Pondake ©
  • HTML
  • CSS
  • JavaScript
    		<div class="slider2">

				 <div class="slide category-website">
					<img src="http://placehold.it/360x270" />
				 </div> 
				 <div class="slide category-website">
					<img src="http://placehold.it/360x270" />
				 </div> 
     		<div class="slide category-website">
					<img src="http://placehold.it/360x270" />
				 </div> 
     		<div class="slide category-website">
					<img src="http://placehold.it/360x270" />
				 </div> 
     		<div class="slide category-website">
					<img src="http://placehold.it/360x270" />
				 </div> 
     		<div class="slide category-website">
					<img src="http://placehold.it/360x270" />
				 </div> 
     		<div class="slide category-website">
					<img src="http://placehold.it/360x270" />
				 </div> 

		</div>

/*Downloaded from https://www.codeseek.co/Pondake/filterable-gallery-slider-vxzywy */
    


/*Downloaded from https://www.codeseek.co/Pondake/filterable-gallery-slider-vxzywy */
    
// init Isotope
var $grid = $('.slider2').isotope({
  itemSelector: '.slide',
  filter: '.category-website'
});
// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};
// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
  var filterValue = $( this ).attr('data-filter');
  // use filterFn if matches value
  // filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
    var $slidescount = $('.slide').length;
  });



$('.slider2').slick({
    rows: 2,
    dots: true,
    appendDots: $('.slick-nav'),
    appendArrows: $('.slick-nav'),
    accessibility: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 1,
    infinite: false,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                rows: 2,
                slidesToScroll: 1,
                slidesToShow: 2,
                dots: true
            }
        },
        {
            breakpoint: 480,
            settings: {
                rows: 4,
                slidesPerRow: 1,
                slidesToScroll: 1,
                slidesToShow: 1,
                dots: true
            }
        }
    ]
});

Comments