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

Всем привет и с наступающим!

Разрабатываю проект и у меня 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,
может обычный tabs вместо slider-а?

И

if($('.href').attr( "data-target")=="#modal-flint-water") ...
//вот так
if($('.href').data("target")=="#modal-flint-water")
//дважды получать объект тоже не стоит
$('.order-water').attr({"href": "shop/?add-to-cart=209", "data-product_id": "209"}); //кстати, что других значений как кроме 209 не может быть?

А вообще повторяется практически одно и тоже, наверное лучше определить параметры по условию, затем получить объекты и установить их.

рони, у меня не получилось - там же 2 стрелки и 2 надписи переключалки, которые ведут себя по-разному. И это решило бы указанную проблему?
Совсем забыл сайт указать - здесь

laimas,
а как это сможет решить мои 2 вопроса? Ради чего затея?

Мне некогда анализировать что и почему у вас не работает, я просто вижу, что много пишется одного и того же - вызываются одни и те же объекты, одни и те же параметры изменяются в условиях, разница только в значениях. Так зачем же повторять вызовы объектов, если выгоднее в условиях определить только значения параметров, а их установку производить вне условий.

Правда и глядя на значения параметров тоже не понять ничего, это что галерея для двух имеющихся в магазине товаров с id 155 и 209, других товаров нет?

laimas
а я разве писал, что у меня что-то не работает? - я писал про баги в эффектах, причем не на любом девайсе - вот и ищу причину. есть, но в слайдере выводятся только 2 самых основных на которых сделан акцент -разве это странно?

Если есть аритмия сердечная, то нельзя сказать, что в организме все работает. :)

Нет, странного ничего нет, странное в подходе - а что будет, если акцентов будет более двух и нужно будет больше картинок показывать? Вместо того чтобы прогонять код клиентский через РНР вывод ради подстановки в него id и других характеристик объекта, а тем более писать код ручками для N объектов, монотонно практически дублируя одно и тоже, нужно делать это через конфигурацию и РНР обработчик. Те объекты, что "акцентированы" выводятся на страницу со всеми необходимыми характеристиками, которые клиентский сценарий будет получать у них, то есть у текущего/смежных/родителя и т.п. объектов, работая анонимно с ключами/именами. И кода на клиенте будет гораздо меньше, и он не будет таким как у вас трудным для восприятия, и не перевариваемым. :)

Впрочем дело хозяйское, я же не заставляю, я лишь заметил.

Кроссбраузерное решение – CSS-фильтры, а именно функция drop-shadow. https://caniuse.com/#search=filter

Не претендую на то, что это лучшее решение, но можно менять значение атрибута в зависимости от нажатой кнопки. И в зависимости от значения атрибута показывать или скрывать соответствующие части.

Пример, передающий суть без точного копирования.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<style>
		
@font-face {
	font-family: Circe;
	src: url("https://cors-anywhere.herokuapp.com/http://key.alexunyr.beget.tech/wp-content/themes/silverkey/fonts/Circe-Regular.woff");
}
	
.water-delivery {
	display: flex;
	flex-flow: wrap;
	color: white;
	font: 1em Circe;
	background:
		url(http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/header-bg.jpg)
		center / cover
		#56d7fc
	;
	text-shadow: 0 .1em .1em rgba(0, 0, 0, 0.3);
}
		
.water-delivery h1 {
	font-size: 2em;
}
		
.water-delivery p {
	font-size: 1em;
}
		
.water-delivery > section {
	text-align: center;
	flex: 1;
}
		
.water-delivery > section button[data-key] {
	width: 20em;
	height: 0;
	padding: 10em 0 0 0;
	color: transparent;
	border: 0;
	transition: 300ms;
	background:
		no-repeat
		center / contain
}
		
.water-delivery > section button[data-key]:hover {
	filter: drop-shadow(0 0 1em #009af7);
}
		
.water-delivery figure {
	position: relative
}
		
.water-delivery > section:last-child img {
	max-width: 100%;
	opacity: 0;
	transition: 500ms;
	will-change: opacity;
}

.water-delivery .slick-arrow {
	align-self: center;
	width: 2em;
	height: 2em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	border-radius: 100%;
	border: none;
	background: #009af7;
	color: white;
	margin: .25em;
}

.water-delivery .slick-arrow.right {
	order: 1;
	align-self: center;
}
		
.water-delivery > section:last-child img:not(:last-of-type) {
	position: absolute;
}

	</style>
</head>
<body>
	<section class="water-delivery">
		<button class="slick-arrow left">&larr;</button>
		<button class="slick-arrow right">&rarr;</button>
		<section>
			<h1>Доставка воды</h1>
			<p><strong>Природная вода</strong> из скважины<br>прямо с месторождения</p>
			<div>
				<button data-key="silver">Серебрянный ключ</button>
				<button data-key="shufansky">Шуфанский ключ</button>
			</div>
		</section>
		<section>
			<figure>
				<img class="img-fluid" src="http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/bottle-silver-key.png" alt="Серебряный ключ">
				<img class="img-fluid" src="http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/bottle-shufansky-key.png" alt="Шуфанский ключ">
			</figure>
		</section>
	</section>
	<script>
		
		const keys = ["silver", "shufansky"];
		
		document.head.appendChild((style => {
			style.textContent = keys.map(key => `
				.water-delivery > section button[data-key="${key}"] {
					background-image:
						url(http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/${key}-key-slider.png)
				}

				.water-delivery[data-key="${key}"] > section:last-child img[src*="${key}-key"] {
					opacity: 1;
				}

				.water-delivery[data-key="${key}"] > section button[data-key="${key}"] {
					filter: drop-shadow(0 0 1em #009af7) drop-shadow(0 0 1em white);
				}
			`).join("\n\n");
			return style;
		})(document.createElement("style")));
		
		document.addEventListener("click", ({ target }) => {
			if(!target.matches(
				`${keys.map(k => `[data-key="${k}"]`).join(", ")}, .slick-arrow`
			)) return;
			
			const root = target.closest(".water-delivery");
			const key = target.dataset.key;
			const index = keys.indexOf(key);
			root.dataset.key = key;
			
			for(const arrow of root.querySelectorAll(".slick-arrow")) {
				arrow.dataset.key = keys[
					(keys.length + (
						arrow.classList.contains("left") ? -1 : 1
					) + index) % keys.length
				];
			}
		});
		
		for(const e of document.querySelectorAll(`[data-key="${keys[0]}"]`))
			e.click();
		
	</script>
</body>
</html>

Malleys, супер! Не знаю насколько это правда, но даже в эмуляции ie8 работает, хотя caniuse в это не верит)
На всякий случай, лучше дополнительно использовать вебкиты для лучшей совместимости
-webkit-filter

laimas спасибо за ваше наблюдение, похоже, что вы правы, но я пока не разобрался, как это можно сделать правильно.

Всех с наступившим!!

Просто не писать "именных скриптов", у вас ведь фактически для каждого из двух товаров свой обработчик, которые как браться близнецы похожи друг на друга.

Есть коллекция элементов, сколько их в наборе, что за контент она содержит не суть важно, но если нужно по событию обработать коллекцию, то обработчик должен быть один, а в нем можно всегда получить у текущего объекта или у его родителя из атрибута/атрибутов необходимые данные.

Галерея подключает необходимое либо через html структуру ею же определяемую, либо через определяемые ею атрибуты у элементов, либо через объект указываемый при инициализации. Пусть база хранит некие товары имеющие оценки, на основании которых серверный сценарий согласно условиям галереи выводит их на страницу для нее. В атрибуты элементов можно поместить необходимое и для пользовательского сценария. Не надо прогонять JS скрипт через РНР вывод для чтобы подставлять в JS скрипт конкретные id, тексты и т.п., это плохо. А тем более плохо, если это делается руками, ибо при смене объектов или их добавлении, придется править клиентский скрипт.

Если по условию определяются некие значение для вывода или атрибутов элементов, то наверное выгоднее определить значения, а потом описать вывод, установку атрибутов. Здесь удобнее либо тернарный оператор, либо описание значений в массиве/объекте, индексом для выборки в котором будет служить результат условия преобразованный в число. То есть:

var cond = $('.href').data("target")=="#modal-flint-water", //или  +($('.href').data("target")=="#modal-flint-water") для индекса
    opt1 = cond ? val1 : val2,
    opt2 = cond ? val1 : val2,
    .......
//используем
$('.order-water').attr({href: opt1, oth: opt2, ...});
.....