Flickity filtering test

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.1/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.1/flickity.min.css">
<div class="carousel">
    <div class="items city"><img src="http://www.lorempixel.com/250/250/city" alt=""></div>
    <div class="items fashion"><img src="http://www.lorempixel.com/120/250/fashion" alt=""></div>
    <div class="items food"><img src="http://www.lorempixel.com/260/250/food" alt=""></div>
    <div class="items city"><img src="http://www.lorempixel.com/180/250/city" alt=""></div>
    <div class="items random"><img src="http://www.lorempixel.com/150/250" alt=""></div>
    <div class="items fashion"><img src="http://www.lorempixel.com/180/250/fashion" alt=""></div>
    <div class="items random"><img src="http://www.lorempixel.com/320/250" alt=""></div>
    <div class="items food"><img src="http://www.lorempixel.com/200/250/food" alt=""></div>
    <div class="items random"><img src="http://www.lorempixel.com/280/250" alt=""></div>
    <div class="items city"><img src="http://www.lorempixel.com/120/250/city" alt=""></div>
</div>
        
<div class="filter">Filter</div>

SCSS

.filter {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    background-color: #efefef;
    color: gray;
    font-family: sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 2px white;
    
    &:hover {
        background-color: #ddd;
        color: #555;
    }
}

.carousel {
    transition: all 0.5s;
    visibility: visible;
    /* overflow: hidden; */
    height: 150px;
    
    &.is-hidden {
        opacity: 0;
    }
}

.items {
    display: inline-block;
    height: 100%;
    
    img {
        height: 100%;
    }
}

JavaScript

var $c = $('.carousel'),
    f = '', s='.fashion';

function init(sel) {
	$c.flickity({
        cellSelector: sel,
        cellAlign: 'center',
        wrapAround: true,
        pageDots: true
    });
}

function destroy() {
	$c.flickity('destroy');
}

function show() {
    init(s);
    $c.removeClass('is-hidden');
}

function filter() {
    destroy();
	$c.children().not(s).toggle(false);
    
};

$('.filter').click(function(){

	// $c.addClass('is-hidden');
    
    setTimeout(filter,500);
    setTimeout(show,700);
    
});

init(f);