Форум

giwuf · #1 (**permalink**) 28.11.2018, 19:37

Есть slick слайдер где на каждом слайде есть по 2 абсолютно спозиционированных интерактивных элемента при клике на которые происходят определенные действия.

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

Как инициализировать элементы заранее? Фидл

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
<style>.slider {
    width: 650px;
    margin: 0 auto;
}

img {
    width: 100%;
    height: 400px;
}
.slick-slide {
    position: relative;
}
#plus-1 {
    position: absolute;
    bottom: 141px;
    right: 20%;
    width: 65px;
    height: 65px;
    cursor: pointer;
}
#plus-2 {
    position: absolute;
    top: 45%;
    left: 20%;
    width: 65px;
    height: 65px;
    cursor: pointer;
}</style>
<script>
$(document).ready(function() {
$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true
});
});</script>
<div class="slider">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
        <img id="plus-1" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
    <img id="plus-2" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
            <img id="plus-1" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
    <img id="plus-2" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
  </div>
</div>

j0hnik · #2 (**permalink**) 28.11.2018, 20:03

Прелоадер сделайте =)

рони · #3 (**permalink**) 28.11.2018, 20:07

giwuf,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #4 (**permalink**) 28.11.2018, 20:10

j0hnik,

Сообщение от giwuf

и эти элементы позиционируются с задержкой

Сообщение от giwuf

#plus-2

проблема в решётке

giwuf · #5 (**permalink**) 28.11.2018, 20:21

Сообщение от рони

giwuf,
Пожалуйста, отформатируйте свой код!

рони, извиняюсь, отформатировал.

Сообщение от рони

проблема в решётке

не очень понял. проблема возникает после последнего слайда и инициализации слайдера заново.

j0hnik,
не понял вас

UPD:
Ааа, понял! Получается, слайдер создает клоны слайдов с одинаковыми id и отсюда источник проблемы. Спасибо за подсказку

рони · #6 (**permalink**) 28.11.2018, 20:36

giwuf,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">.slider {
    width: 650px;
    margin: 0 auto;
}

.slick-slide img:first-child {
    width: 100%;
    height: 400px;
}
.slick-slide {
    position: relative;
}
.plus-1 {
    position: absolute;
    top: 45%;
    left: 20%;
    width: 65px;
    height: 65px;
    cursor: pointer;
}
.plus-1:nth-child(2) {
    left:  auto;
    right: 20%;
}

  </style>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
  <script>
$(function() {
$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true
});

});
  </script>
</head>

<body>

<div class="slider">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    <img id="plus-1" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
    <img id="plus-2" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    <img id="plus-1" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
    <img id="plus-2" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
  </div>
</div>

</body>
</html>

giwuf · #7 (**permalink**) 28.11.2018, 20:55

рони, спасибо большое! Добра в вашу семью!
К сожалению, плюсовать не дает

Форум

Справочник

Discord чат

Курсы javascript