<div class="form-choosen">
<input type="checkbox" class="filter-checkbox" name="color" id="audio-1" value=".blue">
<label for="audio-1">Blue</label>
<input type="checkbox" class="filter-checkbox" name="color" id="audio-2" value=".green">
<label for="audio-2">Green</label>
<input type="checkbox" class="filter-checkbox" name="color" id="audio-3" value=".red">
<label for="audio-3">Red</label>
</div>
<div id="slickColor">
<div class="filter-result__list-item audio-1 green">Green</div>
<div class="filter-result__list-item audio-1 green">Green</div>
<div class="filter-result__list-item audio-1 blue">Blue</div>
<div class="filter-result__list-item audio-1 blue">Blue</div>
<div class="filter-result__list-item audio-1 red">Red</div>
<div class="filter-result__list-item audio-1 red">Red</div>
</div>
<script type="text/javascript">
var carousel = $('#slickColor');
carousel.slick({
dots: true,
slidesToShow: 3,
});
$("input.filter-checkbox").change(function() {
var total_val = $('input.filter-checkbox:checked').length;
carousel.slick('slickUnfilter');
if(total_val > 0)
{
let slidesToKeep = [];
$('input.filter-checkbox:checked').each(function() {
color = $(this).val();
slidesToKeep.push(color);
});
color = slidesToKeep.join(',');
carousel.slick('slickFilter', color);
}
else
{
carousel.slick('slickGoTo', 0, true);
return;
}
});
</script>
