Всем привет и с наступающим!
Разрабатываю
проект и у меня 2 вопроса по поводу слайдера в первом экране где при клике на стрелки или надписи происходит смена слайдера с заменой товара и всех надписей:
1) Почему на некоторых (но, не всех) девайсах разный эффект при смене слайда при подгрузке картинок (в одном плавно появляется, а во втором резко) и что можно с этим сделать?
Видео
2) Если очень быстро кликать на стрелку вправо-вправо-вправо или влево-влево-влево, то в какой-то момент картинка бутылки не успевает подгрузиться за информацией на слайде и отображение сбивается - вместо серебряный ключ в подписи и бутылке получается наоборот.
Код:
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.header-slider').slick({
adaptiveHeight: true,
prevArrow: '<div class="prev"></div>',
nextArrow: '<div class="next"></div>',
fade: true,
speed: 900,
cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
});
$('#slider-info-arrow-1').on('click', function() {
if($('.slick-current').find('img').attr('alt')=="Шуфанский ключ") {
$(this).removeClass('silver-key-img').addClass('silver-key-img-hover');
$('#slider-info-arrow-2').removeClass('shufansky-key-img-hover').addClass('shufansky-key-img');
$('.href').attr( "data-target", '#modal-natural-water').text("Природная вода");
$('.href-mobile').attr( "data-target", '#modal-natural-water').text("Природная вода");
$('.order-water').attr("href", "shop/?add-to-cart=209");
$('.order-water').attr("data-product_id", "209");
$('.product-text-mobile').text("Серебряный ключ 19 л");
$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-silver-key.jpg');
$('.header-slider').slick('slickGoTo', 0, true);
}
});
$('#slider-info-arrow-2').on('click', function() {
if($('.slick-current').find('img').attr('alt')=="Серебряный ключ") {
$(this).removeClass('shufansky-key-img').addClass('shufansky-key-img-hover');
$('#slider-info-arrow-1').removeClass('silver-key-img-hover').addClass('silver-key-img');
$('.href').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
$('.href-mobile').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
$('.order-water').attr("href", "shop/?add-to-cart=155");
$('.order-water').attr("data-product_id", "155");
$('.product-text-mobile').text("Шуфанский ключ 19 л");
$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-shufansky-key.jpg');
$('.header-slider').slick('slickGoTo', 1, true);
}
});
$('.prev.slick-arrow').on('click', function(event) {
event.preventDefault();
if($('.href').attr( "data-target")=="#modal-flint-water") {
$('#slider-info-arrow-1').removeClass('silver-key-img').addClass('silver-key-img-hover');
$('#slider-info-arrow-2').removeClass('shufansky-key-img-hover').addClass('shufansky-key-img');
$('.href').attr( "data-target", '#modal-natural-water').text("Природная вода");
$('.href-mobile').attr( "data-target", '#modal-natural-water').text("Природная вода");
$('.order-water').attr("href", "shop/?add-to-cart=209");
$('.order-water').attr("data-product_id", "209");
$('.product-text-mobile').text("Серебряный ключ 19 л");
$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-silver-key.jpg');
$('.header-slider').slick('slickGoTo', 0, true);
}
else {
$('#slider-info-arrow-2').removeClass('shufansky-key-img').addClass('shufansky-key-img-hover');
$('#slider-info-arrow-1').removeClass('silver-key-img-hover').addClass('silver-key-img');
$('.href').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
$('.href-mobile').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
$('.order-water').attr("href", "shop/?add-to-cart=155");
$('.order-water').attr("data-product_id", "155");
$('.product-text-mobile').text("Шуфанский ключ 19 л");
$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-shufansky-key.jpg');
$('.header-slider').slick('slickGoTo', 1, true);
}
});
$('.next.slick-arrow').on('click', function(event) {
event.preventDefault()
if($('.href').attr( "data-target")=="#modal-flint-water") {
$('#slider-info-arrow-1').removeClass('silver-key-img').addClass('silver-key-img-hover');
$('#slider-info-arrow-2').removeClass('shufansky-key-img-hover').addClass('shufansky-key-img');
$('.href').attr( "data-target", '#modal-natural-water').text("Природная вода");
$('.href-mobile').attr( "data-target", '#modal-natural-water').text("Природная вода");
$('.order-water').attr("href", "shop/?add-to-cart=209");
$('.order-water').attr("data-product_id", "209");
$('.product-text-mobile').text("Серебряный ключ 19 л");
$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-silver-key.jpg');
$('.header-slider').slick('slickGoTo', 0, true);
}
else {
$('#slider-info-arrow-2').removeClass('shufansky-key-img').addClass('shufansky-key-img-hover');
$('#slider-info-arrow-1').removeClass('silver-key-img-hover').addClass('silver-key-img');
$('.href').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
$('.href-mobile').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
$('.order-water').attr("href", "shop/?add-to-cart=155");
$('.order-water').attr("data-product_id", "155");
$('.product-text-mobile').text("Шуфанский ключ 19 л");
$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-shufansky-key.jpg');
$('.header-slider').slick('slickGoTo', 1, true);
}
});
Не претендую на то, что это лучшее решение, но здесь есть пару нюансов, поясню некоторые, чтобы было понятно для чего так делаю: прозрачные картинки с ховер эффектом и насколько я понял перерыв гору инфы - на сегодня нет кроссбраузерного решения тени вокруг прозрачного объекта, поэтому обхожусь заменами изображений вместо css стилей.
Картинки подгружаю заранее таким образом:
body::after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
content:url(img/bottle-shufansky-key.png) url(img/bottle-silver-key.png);
}