Slick Slider - Скрытие дополнительных слайдов, пока слайдер не инициализирован - PullRequest
Новая
       9

Slick Slider - Скрытие дополнительных слайдов, пока слайдер не инициализирован

0 голосов
/ 23 сентября 2019

Я изо всех сил пытаюсь использовать технику (которая работала для меня ранее в других проектах, но по какой-то причине не в этот раз), чтобы скрыть дополнительные слайды, которые создаются скользящим слайдером, пока слайдер не будет готов и под контролеммакета слайдов.

Основной причиной беспокойства является абсолютно позиционирование: после элемента, назначенного в этом правиле .inforrative-slider-section .simple-slide-container: after {}.Это по-прежнему отображается, даже если основной слайд не работает.

Слайдер становится тем, чем должен вскоре после загрузки, но до этой точки только этот абсолютно позиционированный элемент неоднократно показывается на странице, где каждый слайд будет показываться, если онне получил slick'd.

Каков наилучший способ скрытия дополнительных слайдов (& the: after) до тех пор, пока слайдер не будет создан и готов к показу слайдов?

Не знаю, как еще это сформулировать, поэтому я опубликую упрощенную версию своего кода: 

	$('.simple-slider').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		autoplay: false,
		autoplaySpeed: 5000,
		speed: 500,
		dots: true,
		arrows: false
	});
	/* GENERAL */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box!important;
		position: relative;
	}
		@media screen and (max-width: 1023px) {
			* {
				text-align: center;
			}
		}

	body {
		width: 100%;
		height: 100%;
	}
		.section {
			width: 100%;
			height: auto;
			margin: 0 auto;
			position: relative;
			display: block;
		}	
			.section-inner {
				width: 100%;
				max-width: 1248px;
				height: auto;
				margin: 0 auto;
				position: relative;

				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;

				flex-direction: row;
				align-items: stretch;
				justify-content: space-between;
			}
	.noselect {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.box-link {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		text-decoration: none;
		outline: 0;
		z-index: 150;
	}
	/* GENERAL */

	.slick-dots {
		width: 100%;
		height: 50px!important;
		position: absolute;
		bottom: 20px!important;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		list-style: none;
	}
		.slick-dots li {
			width: 25px!important;
			height: 25px!important;
			margin: 10px!important;
			text-align: center;
			border-radius: 50%!important;
			cursor: pointer;
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
		}
			.slick-dots li button {
				width: 100%!important;
				height: 100%!important;
				background-color: white!important;
				outline: 0;
				color: transparent;
				border: 3px solid white;
				border-radius: 50%!important;
				cursor: pointer;
				-webkit-transition: all 0.3s;
				transition: all 0.3s;
			}
				.slick-dots li button:hover {
					border: 3px solid white;
					background-color: #585CD3!important;
				}
				.slick-dots li button[aria-selected=true] {
					background-color: #585CD3!important;
					border: 3px solid #585CD3;
				}

	.informative-slider-section .section-inner {
		max-width: 100%;
		color: white;
	}
		.simple-slider {
			width: 100%;
			height: 500px;
		}
			.simple-slide {
				height: 500px;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
			}
				.informative-slider-section .simple-slide-inner {
					display: -webkit-box;
					display: -moz-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
					.informative-slider-section .simple-slide-container {
						width: 50%;
						height: 500px;
						background-size: auto;
						background-repeat: repeat;
						background-position: right;
					}
					.informative-slider-section .simple-slide-image {
						width: 50%;
						height: 500px;
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center;
					}
						.informative-slider-section .simple-slide-container:after {
							content: '';
							width: 0;
							height: 0;
							position: absolute;
							top: 0;
							left: 100%;
							border-style: solid;
							border-width: 500px 50px 0 0;
							border-color: #222853 transparent transparent transparent;
							z-index: 1;
						}
						.informative-slider-section .simple-slide-container-inner {
							width: calc(100% - 40px);
							max-width: 584px;
							position: absolute;
							top: 50%;
							right: 20px;
							-ms-transform: translateY(-50%);
							-webkit-transform: translateY(-50%);
							transform: translateY(-50%);
						}
							.informative-slider-section .simple-slide-title {
								text-transform: uppercase;
							}
							.informative-slider-section .simple-slide-button {
								display: inline-block;
								padding: 10px 20px;
								background-color: #e20437;
								-webkit-transition: all 0.7s;
								transition: all 0.7s;
							}
								.informative-slider-section a:hover ~ .simple-slide-inner .simple-slide-button {
									background-color: #9D1750;
								}
								.informative-slider-section .simple-slide-button-text {
									margin: 0;
								}
	@media screen and (min-width: 768px) and (max-width: 1247px) {
		.informative-slider-section .simple-slide-container {
			width: 624px;
		}
		.informative-slider-section .simple-slide-image {
			width: calc(100% - 624px);
		}
	}
	@media screen and (max-width: 767px) {
		.informative-slider-section .simple-slide-container {
			width: 100%;
		}
			.informative-slider-section .simple-slide-container:after {
				display: none;
			}
			.informative-slider-section .simple-slide-container-inner {
				right: auto;
				left: 50%;
				-ms-transform: translate(-50%, -50%);
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
		.informative-slider-section .simple-slide-image {
			display: none;
		}
	}

	.slick-slider:not(.slick-initialized),
	.slick-slider:not(.slick-initialized) .slick-slide,
	.slick-slider:not(.slick-initialized) .slick-slide .simple-slide-container:after {
		display: none!important;
	}
	.slick-slider:has(.slick-initialized),
	.slick-slider:has(.slick-initialized) .slick-slide,
	.slick-slider:has(.slick-initialized) .slick-slide .simple-slide-container:after {
		display: block!important;
	}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<div class="section informative-slider-section noselect">
	<div class="section-inner">
		<div class="simple-slider">
			<div class="simple-slide">
				<a href="/" class="box-link"></a>
				<div class="simple-slide-inner">
					<div class="simple-slide-container" style="background-color: red;">
						<div class="simple-slide-container-inner">
							<h3 class="simple-slide-title">Hello</h3>
							<p class="simple-slide-content">World</p>
							<div class="simple-slide-button">
								<h4 class="simple-slide-button-text">Clean this world up!</h4>
							</div>
						</div>
					</div>
					<div class="simple-slide-image" style="background-color: blue;">
					</div>
				</div>
			</div>
			<div class="simple-slide">
				<a href="/" class="box-link"></a>
				<div class="simple-slide-inner">
					<div class="simple-slide-container" style="background-color: red;">
						<div class="simple-slide-container-inner">
							<h3 class="simple-slide-title">Hello</h3>
							<p class="simple-slide-content">World</p>
							<div class="simple-slide-button">
								<h4 class="simple-slide-button-text">Clean this world up!</h4>
							</div>
						</div>
					</div>
					<div class="simple-slide-image" style="background-color: blue;">
					</div>
				</div>
			</div>
			<div class="simple-slide">
				<a href="/" class="box-link"></a>
				<div class="simple-slide-inner">
					<div class="simple-slide-container" style="background-color: red;">
						<div class="simple-slide-container-inner">
							<h3 class="simple-slide-title">Hello</h3>
							<p class="simple-slide-content">World</p>
							<div class="simple-slide-button">
								<h4 class="simple-slide-button-text">Clean this world up!</h4>
							</div>
						</div>
					</div>
					<div class="simple-slide-image" style="background-color: blue;">
					</div>
				</div>
			</div>
			<div class="simple-slide">
				<a href="/" class="box-link"></a>
				<div class="simple-slide-inner">
					<div class="simple-slide-container" style="background-color: red;">
						<div class="simple-slide-container-inner">
							<h3 class="simple-slide-title">Hello</h3>
							<p class="simple-slide-content">World</p>
							<div class="simple-slide-button">
								<h4 class="simple-slide-button-text">Clean this world up!</h4>
							</div>
						</div>
					</div>
					<div class="simple-slide-image" style="background-color: blue;">
					</div>
				</div>
			</div>
			<div class="simple-slide">
				<a href="/" class="box-link"></a>
				<div class="simple-slide-inner">
					<div class="simple-slide-container" style="background-color: red;">
						<div class="simple-slide-container-inner">
							<h3 class="simple-slide-title">Hello</h3>
							<p class="simple-slide-content">World</p>
							<div class="simple-slide-button">
								<h4 class="simple-slide-button-text">Clean this world up!</h4>
							</div>
						</div>
					</div>
					<div class="simple-slide-image" style="background-color: blue;">
					</div>
				</div>
			</div>
			<div class="simple-slide">
				<a href="/" class="box-link"></a>
				<div class="simple-slide-inner">
					<div class="simple-slide-container" style="background-color: red;">
						<div class="simple-slide-container-inner">
							<h3 class="simple-slide-title">Hello</h3>
							<p class="simple-slide-content">World</p>
							<div class="simple-slide-button">
								<h4 class="simple-slide-button-text">Clean this world up!</h4>
							</div>
						</div>
					</div>
					<div class="simple-slide-image" style="background-color: blue;">
					</div>
				</div>
			</div>
			<div class="simple-slide">
				<a href="/" class="box-link"></a>
				<div class="simple-slide-inner">
					<div class="simple-slide-container" style="background-color: red;">
						<div class="simple-slide-container-inner">
							<h3 class="simple-slide-title">Hello</h3>
							<p class="simple-slide-content">World</p>
							<div class="simple-slide-button">
								<h4 class="simple-slide-button-text">Clean this world up!</h4>
							</div>
						</div>
					</div>
					<div class="simple-slide-image" style="background-color: blue;">
					</div>
				</div>
			</div>
			<div class="simple-slide">
				<a href="/" class="box-link"></a>
				<div class="simple-slide-inner">
					<div class="simple-slide-container" style="background-color: red;">
						<div class="simple-slide-container-inner">
							<h3 class="simple-slide-title">Hello</h3>
							<p class="simple-slide-content">World</p>
							<div class="simple-slide-button">
								<h4 class="simple-slide-button-text">Clean this world up!</h4>
							</div>
						</div>
					</div>
					<div class="simple-slide-image" style="background-color: blue;">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

Дайте мне знать, если вы видите виновника?

Спасибо, Джейсон.

1 Ответ

1 голос
/ 23 сентября 2019

Вы можете использовать селектор :not(.slick-initialized) на вашей карусели следующим образом: 

.simple-slider:not(.slick-initialized) .simple-slide-container:after {
    display: none;
}

Обратите внимание, что другие ваши правила CSS нацелены на .slick-slider, даже если этот элемент не существует при загрузке страницы (это то, что поймало меня в первый раз), так что они фактически ничего не делают: 

.slick-slider:not(.slick-initialized),
.slick-slider:not(.slick-initialized) .slick-slide,
.slick-slider:not(.slick-initialized) .slick-slide .simple-slide-container:after {
    display: none!important;
}
...