gtronic
@gtronic
Учусь веб-разработке

Почему накладываются слайды slick?

Иногда(не каждый раз), при загрузке страницы возникает вот такая проблема:
5d53f6a69456f742824546.jpeg

слайдер приходит в порядок, если:
1. Изменен размер окна.
2. перезагрузить страницу,
3. нажата стрелка прокрутки слайдера.

Посмотреть вживую:
Коды прилагаю:

<div class="doctors__slider slide">
	<a href="vrachi/semenov-aleksandr-valerevich.html" class="doctors__item">
		<div class="doctors__item-img"><img src="bbe9e4f37d8fe6eea1e4a85e31.jpg" alt="Семенов Александр Валерьевич"></div>
		<span>Семенов Александр Валерьевич</span>
		<p></p>
	</a>
	<a href="vrachi/kurganova-olga-sergeevna1.html" class="doctors__item">
		<div class="doctors__item-img"><img src="f37d8fe6eea1e4a85e31.jpg" alt="Курганова Ольга Серьгеевна"></div>
		<span>Курганова Ольга Серьгеевна</span>
		<p>Косметология</p>
	</a>
	<a href="vrachi/kurganova-olga-sergeevna.html" class="doctors__item">
		<div class="doctors__item-img"><img src="4f37d8fe6eea1e4a85e31.jpg" alt="Емельянов Петр Михайлович"></div>
		<span>Емельянов Петр Михайлович</span>
		<p>Офтальмология</p>
	</a>
	<a href="vrachi/kurganova-olga.html" class="doctors__item">
		<div class="doctors__item-img"><img src="856346fcdfc0411.png" alt="Ивонин Константин Сергеевич"></div>
		<span>Ивонин Константин Сергеевич</span>
		<p>Офтальмология</p>
	</a>
	<a href="vrachi/kurganov-oleg-sergeevich.html" class="doctors__item">
		<div class="doctors__item-img"><img src="ebbe9e4f37d8fe6eea1e4a85e31.jpg" alt="Федоров Юрий Филиппович"></div>
		<span>Федоров Юрий Филиппович</span>
		<p>Офтальмология</p>
	</a>
	<a href="vrachi/kurganov-oleg.html" class="doctors__item">
		<div class="doctors__item-img"><img src="f37d8fe6eea1e4a85e31.jpg" alt="Мутиков Игорь Владимирович"></div>
		<span>Мутиков Игорь Владимирович</span>
		<p>Офтальмология</p>
	</a>
	<a href="vrachi/kurganova-olga-sergeevna-ginekologia.html" class="doctors__item">
		<div class="doctors__item-img"><img src="37d8fe6eea1e4a85e31.jpg" alt="Демиденко Галина Михайловна"></div>
		<span>Демиденко Галина Михайловна</span>
		<p>Гинекология</p>
	</a>
	<a href="vrachi/kurganov-oleg-sergeevich-kosmetologia.html" class="doctors__item">
		<div class="doctors__item-img"><img src="7e4ebbe9e4f37d8fe6eea1e4a85e31.jpg" alt="Раймова Анна Николаевна"></div>
		<span>Раймова Анна Николаевна</span>
		<p>Косметология</p>
	</a>
	<a href="vrachi/kurganov-oleg-sergeevich-flebologia.html" class="doctors__item">
		<div class="doctors__item-img"><img src="7ce7e4ebbe9e4f37d8fe6eea1e4a85e31.jpg" alt="Васильев Валерий Робертович"></div>
		<span>Васильев Валерий Робертович</span>
		<p>Офтальмология</p>
	</a>
</div>


$('.doctors__slider').slick({
		dots: true,
		infinite: true,
		slidesToShow: 4,
		slidesToScroll: 1,
		responsive: [
			{
				breakpoint: 1200,
				settings: {
					slidesToShow: 3
				}
			},
			{
				breakpoint: 992,
				settings: {
					slidesToShow: 2
				}
			},
			{
				breakpoint: 768,
				settings: {
					slidesToShow: 1
				}
			}
		]
	});


.doctors {
    padding-bottom: 140px;
    position: relative;
    overflow: hidden
}

.doctors::before {
    content: '';
    position: absolute;
    background-color: #17b3ab;
    height: 80%;
    left: -30%;
    top: 75px;
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    z-index: -2;
    width: 160%
}

.doctors__title {
    margin-bottom: 70px
}

.doctors__item {
    text-align: center;
    display: block;
    text-decoration: none;
    outline: 0
}

.doctors__item:hover {
    text-decoration: none;
    outline: 0
}

.doctors__item-img {
    width: 255px;
    height: 255px;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 13px;
    -webkit-box-shadow: 0 0 23.76px 1.24px rgba(19, 21, 22, .09);
    box-shadow: 0 0 23.76px 1.24px rgba(19, 21, 22, .09)
}

.doctors__item-img img {
    display: inline-block;
    max-width: 100%;
    height: auto
}

.doctors__item span {
    display: block;
    width: 255px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    line-height: 36px;
    color: #fff;
    margin-bottom: 12px
}

.doctors__item p {
    color: #fff;
    font-size: 20px;
    line-height: 22px;
    width: 255px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы