<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<h1>Isotope - Flickity Filter</h1>
<div class="container">
<div id="filters" class="button-group">
<button class="button is-checked" data-filter="all">
All
</button>
<button class="button" data-filter=".art">
Art
</button>
<button class="button" data-filter=".branding">
Branding
</button>
<button class="button" data-filter=".indentity">
Indentity
</button>
<button class="button" data-filter=".mockup">
Mockup
</button>
<button class="button" data-filter=".photography">
Photography
</button>
</div>
<div class="slider" data-flickity='{ "draggable": false }'>
<div class="slide flickity art"></div>
<div class="slide flickity art"></div>
<div class="slide flickity art"></div>
<div class="slide flickity branding"></div>
<div class="slide flickity branding"></div>
<div class="slide flickity branding"></div>
<div class="slide flickity branding"></div>
<div class="slide flickity branding"></div>
<div class="slide flickity indentity"></div>
<div class="slide flickity indentity"></div>
<div class="slide flickity mockup"></div>
<div class="slide flickity mockup"></div>
<div class="slide flickity mockup"></div>
<div class="slide flickity mockup"></div>
<div class="slide flickity mockup"></div>
<div class="slide flickity mockup"></div>
<div class="slide flickity mockup"></div>
<div class="slide flickity mockup"></div>
<div class="slide flickity photography"></div>
<div class="slide flickity photography"></div>
<div class="slide flickity photography"></div>
<div class="slide flickity photography"></div>
</div>
</div>
<div class="col-12 copy-right text-center">© Friday, March 1, 2024 quanth</div>
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: #FAFAFA;
}
h1,
.button-group {
text-align: center;
margin-bottom: 30px;
}
.button {
cursor: pointer;
}
.button:hover {
background: #1ea7fd;
color: #ffffff;
}
.button.is-checked {
background: #1ea7fd;
color: #ffffff;
}
.flickity {
width: 66%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: flickity;
}
/* cell number */
.flickity:before {
display: block;
text-align: center;
content: counter(flickity);
line-height: 200px;
font-size: 80px;
color: white;
}
.copy-right {
margin-top: 50px;
}
const slider = $('.slider');
const filterButtons = $('#filters');
const flickitySlider = {
cellSelector: '.flickity',
cellAlign: 'center',
wrapAround: true,
contain: true,
arrowShape: 'M 0,50 L 60,00 L 50,30 L 80,30 L 80,70 L 50,70 L 60,100 Z'
}
function flicitySlider() {
slider.flickity(flickitySlider);
}
flicitySlider();
filterButtons.on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
var slide = slider.find('.slide');
if (filterValue === 'all') {
slide.fadeIn(450);
slide.addClass('flickity');
} else {
var active = $(`${filterValue}`).fadeIn(450);
slide.addClass('flickity');
slide.not(active).removeClass('flickity');
slide.not(active).hide();
}
slider.flickity('destroy');
flicitySlider();
$('.button').removeClass('is-checked');
$(this).addClass('is-checked');
});
