Я использую скользкую карусель на своей веб-странице для отображения событий из нашего расписания, и все в порядке, пока фильтрация слайдов не будет соответствовать тем же критериям. Он почти идеально работает на настольном компьютере и, что удивительно, на мобильном сафари (iphone 8+), но очень медленный на мобильном chrome (протестированный Samsung A70).
Позвольте мне показать вам весь код и попробовать объяснить вещи, чтобы преодолеть его до сих пор.
Вот моя гладкая карусель 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>
Вот мои кнопки выбора 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>
Вот последний javascript код, который я применил к странице (используя выбор идентификатора вместо классов)
<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>
И, наконец, класс «on», добавляемый при каждом выборе кнопок фильтра
.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);
}
Как вы можете видеть, я пытаюсь отключить "slickfilter" на jquery коде, который увеличивает скорость нажатия на эффект перехода, но если я добавлю еще раз, он будет тормозить только на chrome моб.
Также вы можете проверить в прямом эфире с эту ссылку
Заранее спасибо за предложения