search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.35k stars 5.88k forks source link

Slick Carousel 'slickfilter' very lagging on chrome mobile #3910

Open devLeopar opened 4 years ago

devLeopar commented 4 years ago

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 :

<div class="plus-carousel slick-initialized slick-slider slick-dotted" wfd-id="300"><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;" wfd-id="939">Previous</button>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <div class="slick-list draggable" wfd-id="869"><div class="slick-track" style="opacity: 1; width: 29403px; transform: translate3d(-891px, 0px, 0px);" wfd-id="870"><div class="carousel-container bundesliga-filter slick-slide slick-cloned" style="width: 277px;" tabindex="-1" role="tabpanel" aria-describedby="slick-slide-control015" wfd-id="921" data-slick-index="-3" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image slick-loading" data-lazy="test.png"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">Bundesliga - 21. Hafta / Bayern Munih - Leipzig</h4>
                <p class="plus-date">9 Şubat Pazar - 20:00</p>
            </div><div class="carousel-container nba-filter slick-slide slick-cloned" style="width: 277px;" tabindex="-1" role="tabpanel" wfd-id="920" data-slick-index="-2" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image slick-loading" data-lazy="test.png"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">NBA / Boston Celtics - Oklahoma City Thunder</h4>
                <p class="plus-date">9 Şubat Pazar - 23:30</p>
            </div><div class="carousel-container nba-filter slick-slide slick-cloned" style="width: 277px;" tabindex="-1" role="tabpanel" wfd-id="919" data-slick-index="-1" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image slick-loading" data-lazy="test.png"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">NBA / Chicago Bulls - Philadelphia 76ers</h4>
                <p class="plus-date">11 Şubat Salı - 02:00</p>
            </div><div class="carousel-container slick-slide slick-current slick-active" style="width: 277px;" tabindex="0" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00" wfd-id="415" data-slick-index="0" aria-hidden="false">
                <a class="plus-image-link" href="#" tabindex="0"><img class="lazy lazy-hidden plus-image" src="test.png" style="opacity: 1;"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">NCAA Basketball / Louisville - NC St</h4>
                <p class="plus-date">1 Şubat Cumartesi - 22:00</p>
            </div><div class="carousel-container nba-filter slick-slide slick-active" style="width: 277px;" tabindex="0" role="tabpanel" id="slick-slide01" wfd-id="414" data-slick-index="1" aria-hidden="false">
                <a class="plus-image-link" href="#" tabindex="0"><img class="lazy lazy-hidden plus-image" style="opacity: 1;" src="test.png"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">NBA / Minnesota Timberwolves - LA Clippers</h4>
                <p class="plus-date">1 Şubat Cumartesi - 23:30</p>
            </div><div class="carousel-container nba-filter slick-slide slick-active" style="width: 277px;" tabindex="0" role="tabpanel" id="slick-slide02" wfd-id="413" data-slick-index="2" aria-hidden="false">
                <a class="plus-image-link" href="#" tabindex="0"><img class="lazy lazy-hidden plus-image" style="opacity: 1;" src="test.png"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">NBA / Philadelphia 76ers - Boston Celtics</h4>
                <p class="plus-date">2 Şubat Pazar - 04:30</p>
            </div><div class="carousel-container premier-filter slick-slide" style="width: 277px;" tabindex="-1" role="tabpanel" id="slick-slide03" aria-describedby="slick-slide-control01" wfd-id="412" data-slick-index="3" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image" src="test.png" style="opacity: 1;"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">Premier Show</h4>
                <p class="plus-date">2 Şubat Pazar - 15:00</p>
            </div><div class="carousel-container slick-slide" style="width: 277px;" tabindex="-1" role="tabpanel" id="slick-slide04" wfd-id="411" data-slick-index="4" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image slick-loading" data-lazy="test.png"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">Belçika Ligi - 24.Hafta / Club Brugge - Royal Antwerp</h4>
                <p class="plus-date">2 Şubat Pazar - 16:30</p>
            </div><div class="carousel-container premier-filter slick-slide" style="width: 277px;" tabindex="-1" role="tabpanel" id="slick-slide05" wfd-id="410" data-slick-index="5" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image" src="test.png" style="opacity: 1;"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">Premier League - 25. Hafta / Burnley - Arsenal</h4>
                <p class="plus-date">2 Şubat Pazar - 17:00</p>
            </div><div class="carousel-container bundesliga-filter slick-slide" style="width: 277px;" tabindex="-1" role="tabpanel" id="slick-slide06" aria-describedby="slick-slide-control02" wfd-id="409" data-slick-index="6" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image" src="test.png" style="opacity: 1;"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">Bundesliga - 20. Hafta / Köln - Freiburg</h4>
                <p class="plus-date">2 Şubat Pazar - 17:30</p>
            </div><div class="carousel-container slick-slide" style="width: 277px;" tabindex="-1" role="tabpanel" id="slick-slide07" wfd-id="408" data-slick-index="7" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image slick-loading" data-lazy="test.png"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">Hollanda Ligi - 21. Hafta / Ajax - PSV Eindhoven</h4>
                <p class="plus-date">2 Şubat Pazar - 18:45</p>
            </div><div class="carousel-container premier-filter slick-slide" style="width: 277px;" tabindex="-1" role="tabpanel" id="slick-slide08" wfd-id="407" data-slick-index="8" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image" src="test.png" style="opacity: 1;"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">Premier League - 25. Hafta / Tottenham - Manchester City</h4>
                <p class="plus-date">2 Şubat Pazar - 19:30</p>
            </div><div class="carousel-container bundesliga-filter slick-slide" style="width: 277px;" tabindex="-1" role="tabpanel" id="slick-slide09" aria-describedby="slick-slide-control03" wfd-id="406" data-slick-index="9" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image" src="test.png" style="opacity: 1;"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">Bundesliga - 20. Hafta / Paderborn - Wolfsburg</h4>
                <p class="plus-date">2 Şubat Pazar - 20:00</p>
            </div><div class="carousel-container slick-slide" style="width: 277px;" tabindex="-1" role="tabpanel" id="slick-slide010" wfd-id="405" data-slick-index="10" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image slick-loading" data-lazy="test.png"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">Portekiz Ligi - 19.Hafta /  Sporting Braga - Sporting Lizbon</h4>
                <p class="plus-date">2 Şubat Pazar - 20:30</p>
            </div><div class="carousel-container nba-filter slick-slide" style="width: 277px;" tabindex="-1" role="tabpanel" id="slick-slide011" wfd-id="404" data-slick-index="11" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image" src="test.png" style="opacity: 1;"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">NBA / New Orleans Pelicans - Houston Rockets</h4>
                <p class="plus-date">2 Şubat Pazar - 22:00</p>
            </div><div class="carousel-container bundesliga-filter slick-slide" style="width: 277px;" tabindex="-1" role="tabpanel" id="slick-slide012" aria-describedby="slick-slide-control04" wfd-id="403" data-slick-index="12" aria-hidden="true">
                <a class="plus-image-link" href="#" tabindex="-1"><img class="lazy lazy-hidden plus-image" src="test.png" style="opacity: 1;"><noscript><img class="plus-image" data-lazy="test.png"></noscript></a>
                <h4 class="plus-title">Bundesliga 2 - 20. Hafta / Bochum - Hamburg </h4>
                <p class="plus-date">3 Şubat Pazartesi - 22:30</p>
            </div>
            ......

           </div></div>

Here is my Selection Buttons HTML :

<div>
  <div class="plus-selector">
    <ul>
      <li><a id="hepsi_sl" class="a filter-button" href="#"><i class="icon-home" aria-hidden="true"></i></a></li>
      <li><a id="premier_sl" class="a filter-button" href="#"><i class="icon-pl-ters-ico" aria-hidden="true"></i></a></li>
      <li><a id="bundesliga_sl" class="a  filter-button" href="#"><i class="icon-bundesliga-logo-ico" aria-hidden="true"></i></a></li>
      <li><a id="nba_sl" class="a filter-button" href="#"><i class="icon-nba-logo-ico" aria-hidden="true"></i></a></li>
      <li><a id="formula_sl" class="a filter-button" href="#"><i class="icon-f1-logo-ico" aria-hidden="true"></i></a></li>
      <li><a id="ufc_sl" class="a filter-button" href="#"><i class="icon-ufc-logo-ico" aria-hidden="true"></i></a></li>
    </ul>
  </div>
</div>

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

.plus-selector .on{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}
.plus-selector .on:before{
  transform: scale(1.2);
  box-shadow: 0 0 15px #d35400;
  filter: blur(3px);
}

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

devLeopar commented 4 years ago

Anyone who re-generate the issue on mobile chrome ?

EdvinasKilbauskas commented 2 years ago

I can replicate it. Iphone 11 with chrome