наложение иконок друг на друга в слайдере на slick.js

Question

У меня есть автоматический слайдер с иконками, сделанный средствами slick. Слайдер отлично работает, и причем адаптивный уже. НО есть один маленький нюанс, который портит всю общую картину. Заключается она в следующем - при старте и ресайзинге окна слайдер работает, как часы, но стоит только "прогуляться" по пунктам меню, т.е. по сайту, и вернуться на главную страницу (на нем слайдер), то получается в прямом смысле слова "каша" - все иконки накладываются друг на друга.. и по истечению нескольких секунд, иконки принимают свои дефолтные позиции и слайдер продолжает работать. Бывает такое, что слипшиеся иконки так и не расплываются. Покажу скрины, где они в слипшимся состоянии. Так же, приведу код. Подскажите, пожалуйста, в чем может быть проблема? Может быть в порядке подключения плагинов? С начала подключен jquery, после идет сам slick, а уже следующим по очереди файл js с инициализацией сладйера.

[![

$(document).ready(function () {
	
	$(".header_content_two").slick({
	  autoplay: true,
	  dots: false,
	  arrows: false,
	  infinite: true,
	  mobileFirst: true,
	  adaptiveHeight: true,
	  speed: 500,
	  //slidesToShow: 7,
	  responsive: [
	  {
      breakpoint: 1350,
      settings: {
        slidesToShow: 7,
        slidesToScroll: 7
      }
    },
    {
      breakpoint: 1250,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 5
      }
    },
    {
      breakpoint: 1150, 
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    },
	{
      breakpoint: 500, 
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    },
	{
      breakpoint: 400, 
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    }
  ]
	});
  });

.header_content_two {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header_content_two_block {
    display: grid !important;
    grid-template-rows: 100px 1fr;
    justify-items: center;
    align-items: center;
  }

  .header_content_two_block_text {
    font-family: RobotoCondensed;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #000000;
  }

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="header_content_two">
                    <div class="header_content_two_block">
                        <img src="https://99px.ru/sstorage/86/2018/06/mid_30850_963312.jpg" alt="">
                        <span class="header_content_two_block_text">
                            1
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://99px.ru/sstorage/86/2018/06/mid_30850_963312.jpg" alt="">
                        <span class="header_content_two_block_text">
                            2
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://99px.ru/sstorage/86/2018/06/mid_30850_963312.jpg" alt="">
                        <span class="header_content_two_block_text">
                            3
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://99px.ru/sstorage/86/2018/06/mid_30850_963312.jpg" alt="">
                        <span class="header_content_two_block_text">
                            4
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://99px.ru/sstorage/86/2018/06/mid_30850_963312.jpg" alt="">
                        <span class="header_content_two_block_text">
                            5
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://99px.ru/sstorage/86/2018/06/mid_30850_963312.jpg" alt="">
                        <span class="header_content_two_block_text">
                            6
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://99px.ru/sstorage/86/2018/06/mid_30850_963312.jpg" alt="">
                        <span class="header_content_two_block_text">
                            7
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://99px.ru/sstorage/86/2018/06/mid_30850_963312.jpg" alt="">
                        <span class="header_content_two_block_text">
                           8
                        </span>
                    </div>
                </div>

]1]1

БЛОГ НА HUSL

наложение иконок друг на друга в слайдере на slick.js

Ответы (0 шт):