Показать сообщение отдельно
  #1 (permalink)  
Старый 29.12.2018, 19:05
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 165

Почему получаю разный эффект при подгрузке слайдов
Всем привет и с наступающим!

Разрабатываю проект и у меня 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);
}

Последний раз редактировалось giwuf, 29.12.2018 в 21:11.
Ответить с цитированием