"Flickity Filter - Isotope "
Bootstrap 4.1.1 Snippet by trinhquan

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard Angular
Filter elements, sidebar filter panel bootstrap 4
Easy Table Filter
Panel Tables with Filter

Questions / Comments: