I'm using slick carousel on my webpage to display events from our schedule and everthing is fine until filtering slides according to same criterias. It is working almost perfectly on desktop, and surprisingly on mobile safari(iphone 8+) but it is very laggy on mobile chrome (tested samsung A70).
Let me show you whole code and try to explain things to overcome it until now.
Here is last javascript code that i applied to page (using selection of id instead of classes)
<script type="text/javascript">
jQuery(".plus-carousel").slick({
lazyLoad: 'ondemand',
draggable : false,
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows:true,
responsive: [
{
breakpoint: 1440,
settings: {
draggable : true,
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 1200,
settings: {
draggable : true,
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 760,
settings: {
draggable : true,
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
////////////////////////////Slick Carousel Init/////////////////////////
//adding related sport carousels filtering classes just after carousel load the page
jQuery.each(jQuery('.plus-title'),function(index,value){
if(value.innerText.toLowerCase().indexOf('bundesliga')>=0){
jQuery(this.parentElement).addClass("bundesliga-filter");
}
if(value.innerText.toLowerCase().indexOf('premier')>=0){
jQuery(this.parentElement).addClass("premier-filter");
}
if(value.innerText.toLowerCase().indexOf('nba')>=0){
jQuery(this.parentElement).addClass("nba-filter");
}
if(value.innerText.toLowerCase().indexOf('ufc')>=0){
jQuery(this.parentElement).addClass("ufc-filter");
}
if(value.innerText.toLowerCase().indexOf('formula')>=0){
jQuery(this.parentElement).addClass("formula-filter");
}
});
var pl_filt = jQuery('.premier-filter');
var bundesliga_filt = jQuery('.bundesliga-filter');
var ufc_filt = jQuery('.ufc-filter');
var formula_filt = jQuery('.formula-filter');
var nba_filt = jQuery('.nba-filter');
//filter as premier lig
jQuery('#premier_sl').on('click', function(){
//removing on class from all
jQuery('.plus-selector .filter-button').removeClass('on');
//adding only selected
jQuery( this ).addClass( "on" );
//cleaning filter - removing this to see if filter slows down on mobile
/*jQuery('.plus-carousel').slick('slickUnfilter');
//adding this sports filtering
jQuery('.plus-carousel').slick('slickFilter',pl_filt);*/
});
//filter as bundesliga
jQuery('#bundesliga_sl').on('click', function(){
//removing on class from all
jQuery('.plus-selector .filter-button').removeClass('on');
//adding only selected
jQuery( this ).addClass( "on" );
//cleaning filter - removing this to see if filter slows down on mobile
/*jQuery('.plus-carousel').slick('slickUnfilter');
//adding this sports filtering
jQuery('.plus-carousel').slick('slickFilter',bundesliga_filt);*/
});
//filter as nba
jQuery('#nba_sl').on('click', function(){
//removing on class from all
jQuery('.plus-selector .filter-button').removeClass('on');
//adding only selected
jQuery( this ).addClass( "on" );
//cleaning filter
jQuery('.plus-carousel').slick('slickUnfilter');
//adding this sports filtering
jQuery('.plus-carousel').slick('slickFilter',nba_filt);
});
//filter as formula
jQuery('#formula_sl').on('click', function(){
//removing on class from all
jQuery('.plus-selector .filter-button').removeClass('on');
//adding only selected
jQuery( this ).addClass( "on" );
//cleaning filter
jQuery('.plus-carousel').slick('slickUnfilter');
//adding this sports filtering
jQuery('.plus-carousel').slick('slickFilter',formula_filt);
});
//filter as ufc
jQuery('#ufc_sl').on('click', function(){
//removing on class from all
jQuery('.plus-selector .filter-button').removeClass('on');
//adding only selected
jQuery( this ).addClass( "on" );
//cleaning filter
jQuery('.plus-carousel').slick('slickUnfilter');
//adding this sports filtering
jQuery('.plus-carousel').slick('slickFilter',ufc_filt);
});
//unfilter all
jQuery('#hepsi_sl').on('click', function(){
//removing on class from all
jQuery('.plus-selector .filter-button').removeClass('on');
//adding only selected
jQuery( this ).addClass( "on" );
//cleaning filter
jQuery('.plus-carousel').slick('slickUnfilter');
});
</script>
Finally Here is "on" class to be added during each selection of filter buttons
As you can see i try to disable "slickfilter" on jquery code that increase speed of transition click effect but if i add again it is being laggy on just chrome mobile.
I'm using slick carousel on my webpage to display events from our schedule and everthing is fine until filtering slides according to same criterias. It is working almost perfectly on desktop, and surprisingly on mobile safari(iphone 8+) but it is very laggy on mobile chrome (tested samsung A70).
Let me show you whole code and try to explain things to overcome it until now.
Here is my slick carousel HTML :
Here is my Selection Buttons HTML :
Here is last javascript code that i applied to page (using selection of id instead of classes)
Finally Here is "on" class to be added during each selection of filter buttons
As you can see i try to disable "slickfilter" on jquery code that increase speed of transition click effect but if i add again it is being laggy on just chrome mobile.
Also you can check at live from this link
It is also asked on stackoverflow : https://stackoverflow.com/questions/60020552/slick-carousel-slickfilter-very-lagging-on-chrome-mobile
Thanks in advance for suggestions