БЛОГ НА HUSL


Не работает слайдер Slick

Автор вопроса: Dmitry Zhurbenko

Такая проблема со слайдером.. На странице есть блок с кнопками, по нажатию на которую появляется слайдер с услугами. У каждой кнопки свой слайдер. Когда кнопка не нажата, у слайдера в css установлено display: none; Слайдер вроде работает, но если у него установлено variableWidth: true, а если поставить false, то по нажатию на кнопку Voda работает только первый слайдер, другие кнопки по нажатию тоже работают, но слайдер уже не отображается. Просто пустой блок..

Даже если оставить variableWidth: true, то все работает хорошо на десктопной версии, но проблемы начинаются на адаптиве, когда нужно в слайдере оставить всего 2 или 3 услуги вместо 4 как это на десктопной версии, опять работает только первый слайдер Voda.. Это связано с тем, что в slick я добавляю параметр responsive: и в нем указываю:

    settings: {
               **variableWidth: false,**
               slidesToShow: 3,
               infinite: true,
    }

Получается как только отключаю параметр: variableWidth: false, перестают работать два слайдера.

Может это связано, что при загрузке страницы у #kanalizace-container и topení-container стоит display:none ? уже все перепробовал. Только учусь, мало опыта. Подскажите пожалуйста в чем проблема.

$(document).ready(() => {


  $('.category').click((e) => {
    let currentElement = $(e.currentTarget);
    $('.products-container').hide();
    let id = currentElement.data('id');
    $('#' + id).show();

    $('.category').removeClass('active');
    currentElement.addClass('active');
  })

  $('.service-slick').slick({
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    variableWidth: true,
    responsive: [{
      breakpoint: 1290,
      settings: {
        variableWidth: false,
        slidesToShow: 3,
        infinite: true,
        arrows: false,
        dots: true
      }
    }, ]
  });
})
#service {
  margin: 0 auto;
  padding: 30px 0 30px;
  max-width: 1483px;
}

#service #service-title h2 {
  margin: 0 0 31px;
  text-align: center;
  font-family: Montserrat500, sans-serif;
  font-size: 26px;
  letter-spacing: 0.05em;
  color: #000000;
}

hr {
  background: #FF7A00;
  height: 5px;
  border: none;
  margin: 0;
}

#service #service-content #service-link {
  max-width: 812px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 34px 0;
}

#service #service-content #service-link .category img {
  margin-right: 8px;
}

#service #service-content #service-link .category {
  width: 250.84px;
  height: 63.33px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #939393;
  border-radius: 40px;
  background: #FFFFFF;
  outline: none;
  cursor: pointer;
  font-family: Montserrat700, sans-serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: #000000;
}

#service #service-content #service-link .active {
  border: 2px solid #FF7A00;
}

#kanalizace-container,
#topení-container {
  display: none;
}

#service #service-content .service-slick {
  max-width: 1206px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

#service #service-content .service-slick .service-item {
  width: 276.33px;
  height: 379.96px;
  border-radius: 66px;
  background: rgba(0, 0, 0, 0.06);
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  cursor: pointer;
  outline: none;
  margin-left: 15px;
  margin-right: 15px;
  background-size: cover;
  background-repeat: no-repeat;
}

#service #service-content .service-slick .service-item.img1-1 {
  background-image: url("../images/voda1.png");
}

#service #service-content .service-slick .service-item.img1-2 {
  background-image: url("../images/voda2.png");
}

#service #service-content .service-slick .service-item.img1-3 {
  background-image: url("../images/voda3.png");
}

#service #service-content .service-slick .service-item.img1-4 {
  background-image: url("../images/voda4.png");
}

#service #service-content .service-slick .service-item.img1-5 {
  background-image: url("../images/voda5.png");
}

#service #service-content .service-slick .service-item.img1-6 {
  background-image: url("../images/voda6.png");
}

#service #service-content .service-slick .service-item.img2-1 {
  background-image: url("../images/Kanalizace1.png");
}

#service #service-content .service-slick .service-item.img2-2 {
  background-image: url("../images/Kanalizace2.png");
}

#service #service-content .service-slick .service-item.img2-3 {
  background-image: url("../images/Kanalizace3.png");
}

#service #service-content .service-slick .service-item.img2-4 {
  background-image: url("../images/Kanalizace4.png");
}

#service #service-content .service-slick .service-item.img2-5 {
  background-image: url("../images/Kanalizace5.png");
}

#service #service-content .service-slick .service-item.img2-6 {
  background-image: url("../images/Kanalizace6.png");
}

#service #service-content .service-slick .service-item.img3-1 {
  background-image: url("../images/topeni1.png");
}

#service #service-content .service-slick .service-item.img3-2 {
  background-image: url("../images/topeni2.png");
}

#service #service-content .service-slick .service-item.img3-3 {
  background-image: url("../images/topeni3.png");
}

#service #service-content .service-slick .service-item.img3-4 {
  background-image: url("../images/topeni4.png");
}

#service #service-content .service-slick .service-item.img3-5 {
  background-image: url("../images/topeni5.png");
}

#service #service-content .service-slick .service-item.img3-6 {
  background-image: url("../images/topeni6.png");
}

#service .slick-prev,
#service .slick-next {
  top: 53%;
}

#service .slick-prev {
  left: -35px;
}

#service .slick-next {
  right: -27px;
}

#service #service-content .service-slick .service-info {
  width: 247.64px;
  height: 98.75px;
  background: #FFFFFF;
  border-radius: 40px;
  font-family: Montserrat500, sans-serif;
  font-size: 19px;
  letter-spacing: 0.05em;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 17px;
}

#service #service-content .service-slick .service-info span {
  max-width: 212px;
}

#service #service-content #service-contact {
  margin: 73px auto 0 auto;
  max-width: 1028px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#service #service-content #service-contact #service-contact-text {
  font-family: Montserrat600, sans-serif;
  font-size: 24px;
  letter-spacing: 0.05em;
  color: #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="service">
  <div id="service-title">
    <h2>Služby</h2>
  </div>
  <hr>
  <div id="service-content">
    <div id="service-link">
      <div class="category active" data-id="voda-container">
        <img src="images/tap.png" alt="">Voda
      </div>
      <div class="category" data-id="kanalizace-container">
        <img src="images/battery.png" alt="">Kanalizace
      </div>
      <div class="category" data-id="topení-container">
        <img src="images/toilet.png" alt="">Topení
      </div>
    </div>
    <div id="voda-container" class="products-container">
      <div class="service-slick">
        <div class="service-item img1-1 open-modal">
          <div class="service-info">
            <span>Výměna ventilu </span>
          </div>
        </div>
        <div class="service-item img1-2 open-modal">
          <div class="service-info">
            <span>Výměna vodovodní baterie </span>
          </div>
        </div>
        <div class="service-item img1-3 open-modal">
          <div class="service-info">
            <span>Připojení pračky/ myčky </span>
          </div>
        </div>
        <div class="service-item img1-4 open-modal">
          <div class="service-info">
            <span>Montáž/ výměna bojlerů</span>
          </div>
        </div>
        <div class="service-item img1-5 open-modal">
          <div class="service-info">
            <span>Řešení úniky</span>
          </div>
        </div>
        <div class="service-item img1-6 open-modal">
          <div class="service-info">
            <span>Rozvody vody</span>
          </div>
        </div>
      </div>
    </div>
    <div id="kanalizace-container" class="products-container">
      <div class="service-slick">
        <div class="service-item img2-2 open-modal">
          <div class="service-info">
            <span>Výměna termohlavice na radiátor</span>
          </div>
        </div>
        <div class="service-item img2-3 open-modal">
          <div class="service-info">
            <span>Diagnostika topného systému</span>
          </div>
        </div>
        <div class="service-item img2-4 open-modal">
          <div class="service-info">
            <span>Instalace podlahového topení m2</span>
          </div>
        </div>
        <div class="service-item img2-5 open-modal">
          <div class="service-info">
            <span>Montáž/ demontáž kotlů </span>
          </div>
        </div>
        <div class="service-item img2-6 open-modal">
          <div class="service-info">
            <span>Montáž topného systému</span>
          </div>
        </div>
        <div class="service-item img2-1 open-modal">
          <div class="service-info">
            <span>Montáž/ demontáž radiátorů </span>
          </div>
        </div>
      </div>
    </div>
    <div id="topení-container" class="products-container">
      <div class="service-slick">
        <div class="service-item img3-2 open-modal">
          <div class="service-info">
            <span>Čištění Kanalizace</span>
          </div>
        </div>
        <div class="service-item img3-3 open-modal">
          <div class="service-info">
            <span>Instalace sanity (umyvadlo, sprcha, WC)</span>
          </div>
        </div>
        <div class="service-item img3-4 open-modal">
          <div class="service-info">
            <span>Rozvod/výměna kanalizačních potrubí jakéhokoliv diametru</span>
          </div>
        </div>
        <div class="service-item img3-5 open-modal">
          <div class="service-info">
            <span>Připojení kanalizačních potrubí myčky/pračky</span>
          </div>
        </div>
        <div class="service-item img3-6 open-modal">
          <div class="service-info">
            <span>Řešení úniky WC</span>
          </div>
        </div>
        <div class="service-item img3-1 open-modal">
          <div class="service-info">
            <span>Výměna/instalace sifonu </span>
          </div>
        </div>
      </div>
    </div>
    <div id="service-contact">
      <div id="service-contact-text">
        Konečná cena se řeší telefonicky při objednání.
      </div>
      <button class="button">+420 774 868 158</button>
    </div>
  </div>
</div>

$('.category').click((e) => {
        let currentElement = $(e.currentTarget);
        $('.products-container').hide();
        let id = currentElement.data('id');
        $('#' + id).show();

        $('.category').removeClass('active');
        currentElement.addClass('active');
    })

    $('.service-slick').slick({
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        variableWidth: true,
        responsive: [
            {
                breakpoint: 1290,
                settings: {
                    variableWidth: false,
                    slidesToShow: 3,
                    infinite: true,
                    arrows: false,
                    dots: true
                }
            },
        ]
    });
#service {
    margin: 0 auto;
    padding: 30px 0 30px;
    max-width: 1483px;
}

#service #service-title h2 {
    margin: 0 0 31px;
    text-align: center;
    font-family: Montserrat500, sans-serif;
    font-size: 26px;
    letter-spacing: 0.05em;
    color: #000000;
}

hr {
    background: #FF7A00;
    height: 5px;
    border: none;
    margin: 0;
}

#service #service-content #service-link {
    max-width: 812px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 34px 0;
}

#service #service-content #service-link .category img {
    margin-right: 8px;
}

#service #service-content #service-link .category {
    width: 250.84px;
    height: 63.33px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #939393;
    border-radius: 40px;
    background: #FFFFFF;
    outline: none;
    cursor: pointer;
    font-family: Montserrat700, sans-serif;
    font-size: 22px;
    letter-spacing: 0.05em;
    color: #000000;
}

#service #service-content #service-link .active {
    border: 2px solid #FF7A00;
}

#kanalizace-container, #topení-container {
    display: none;
}

#service #service-content .service-slick {
    max-width: 1206px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

#service #service-content .service-slick .service-item {
    width: 276.33px;
    height: 379.96px;
    border-radius: 66px;
    background: rgba(0, 0, 0, 0.06);
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer;
    outline: none;
    margin-left: 15px;
    margin-right: 15px;
    background-size: cover;
    background-repeat: no-repeat;
}

#service #service-content .service-slick .service-item.img1-1 {
    background-image: url("../images/voda1.png");
}

#service #service-content .service-slick .service-item.img1-2 {
    background-image: url("../images/voda2.png");
}

#service #service-content .service-slick .service-item.img1-3 {
    background-image: url("../images/voda3.png");
}

#service #service-content .service-slick .service-item.img1-4 {
    background-image: url("../images/voda4.png");
}

#service #service-content .service-slick .service-item.img1-5 {
    background-image: url("../images/voda5.png");
}

#service #service-content .service-slick .service-item.img1-6 {
    background-image: url("../images/voda6.png");
}

#service #service-content .service-slick .service-item.img2-1 {
    background-image: url("../images/Kanalizace1.png");
}

#service #service-content .service-slick .service-item.img2-2 {
    background-image: url("../images/Kanalizace2.png");
}

#service #service-content .service-slick .service-item.img2-3 {
    background-image: url("../images/Kanalizace3.png");
}

#service #service-content .service-slick .service-item.img2-4 {
    background-image: url("../images/Kanalizace4.png");
}

#service #service-content .service-slick .service-item.img2-5 {
    background-image: url("../images/Kanalizace5.png");
}

#service #service-content .service-slick .service-item.img2-6 {
    background-image: url("../images/Kanalizace6.png");
}

#service #service-content .service-slick .service-item.img3-1 {
    background-image: url("../images/topeni1.png");
}

#service #service-content .service-slick .service-item.img3-2 {
    background-image: url("../images/topeni2.png");
}

#service #service-content .service-slick .service-item.img3-3 {
    background-image: url("../images/topeni3.png");
}

#service #service-content .service-slick .service-item.img3-4 {
    background-image: url("../images/topeni4.png");
}

#service #service-content .service-slick .service-item.img3-5 {
    background-image: url("../images/topeni5.png");
}

#service #service-content .service-slick .service-item.img3-6 {
    background-image: url("../images/topeni6.png");
}


#service .slick-prev, #service .slick-next {
    top: 53%;
}

#service .slick-prev {
    left: -35px;
}

#service .slick-next {
    right: -27px;
}

#service #service-content .service-slick .service-info {
    width: 247.64px;
    height: 98.75px;
    background: #FFFFFF;
    border-radius: 40px;
    font-family: Montserrat500, sans-serif;
    font-size: 19px;
    letter-spacing: 0.05em;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 17px;
}

#service #service-content .service-slick .service-info span {
    max-width: 212px;
}

#service #service-content #service-contact {
    margin: 73px auto 0 auto;
    max-width: 1028px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#service #service-content #service-contact #service-contact-text {
    font-family: Montserrat600, sans-serif;
    font-size: 24px;
    letter-spacing: 0.05em;
    color: #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="service">
        <div id="service-title">
            <h2>Služby</h2>
        </div>
        <hr>
        <div id="service-content">
            <div id="service-link">
                <div class="category active" data-id="voda-container">
                    <img src="images/tap.png" alt="">Voda
                </div>
                <div class="category" data-id="kanalizace-container">
                    <img src="images/battery.png" alt="">Kanalizace
                </div>
                <div class="category" data-id="topení-container">
                    <img src="images/toilet.png" alt="">Topení
                </div>
            </div>
            <div id="voda-container" class="products-container">
                <div class="service-slick">
                    <div class="service-item img1-1 open-modal">
                        <div class="service-info">
                            <span>Výměna ventilu </span>
                        </div>
                    </div>
                    <div class="service-item img1-2 open-modal">
                        <div class="service-info">
                            <span>Výměna vodovodní baterie </span> 
                        </div>
                    </div>
                    <div class="service-item img1-3 open-modal">
                        <div class="service-info">
                            <span>Připojení pračky/ myčky </span>
                        </div>
                    </div>
                    <div class="service-item img1-4 open-modal">
                        <div class="service-info">
                            <span>Montáž/ výměna bojlerů</span>
                        </div>
                    </div>
                    <div class="service-item img1-5 open-modal">
                        <div class="service-info">
                            <span>Řešení úniky</span>
                        </div>
                    </div>
                    <div class="service-item img1-6 open-modal">
                        <div class="service-info">
                            <span>Rozvody vody</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="kanalizace-container" class="products-container">
                <div class="service-slick">
                    <div class="service-item img2-2 open-modal">
                        <div class="service-info">
                            <span>Výměna termohlavice na radiátor</span> 
                        </div>
                    </div>
                    <div class="service-item img2-3 open-modal">
                        <div class="service-info">
                            <span>Diagnostika topného systému</span>
                        </div>
                    </div>
                    <div class="service-item img2-4 open-modal">
                        <div class="service-info">
                            <span>Instalace podlahového topení m2</span>
                        </div>
                    </div>
                    <div class="service-item img2-5 open-modal">
                        <div class="service-info">
                            <span>Montáž/ demontáž kotlů </span>
                        </div>
                    </div>
                    <div class="service-item img2-6 open-modal">
                        <div class="service-info">
                            <span>Montáž topného systému</span>
                        </div>
                    </div>
                    <div class="service-item img2-1 open-modal">
                        <div class="service-info">
                            <span>Montáž/ demontáž radiátorů </span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="topení-container" class="products-container">
                <div class="service-slick">
                    <div class="service-item img3-2 open-modal">
                        <div class="service-info">
                            <span>Čištění Kanalizace</span> 
                        </div>
                    </div>
                    <div class="service-item img3-3 open-modal">
                        <div class="service-info">
                            <span>Instalace sanity (umyvadlo, sprcha, WC)</span>
                        </div>
                    </div>
                    <div class="service-item img3-4 open-modal">
                        <div class="service-info">
                            <span>Rozvod/výměna kanalizačních potrubí jakéhokoliv diametru</span>
                        </div>
                    </div>
                    <div class="service-item img3-5 open-modal">
                        <div class="service-info">
                            <span>Připojení kanalizačních potrubí myčky/pračky</span>
                        </div>
                    </div>
                    <div class="service-item img3-6 open-modal">
                        <div class="service-info">
                            <span>Řešení úniky WC</span>
                        </div>
                    </div>
                    <div class="service-item img3-1 open-modal">
                        <div class="service-info">
                            <span>Výměna/instalace sifonu </span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="service-contact">
                <div id="service-contact-text">
                    Konečná cena se řeší telefonicky při objednání.
                </div>
                <button class="button">+420 774 868 158</button>
            </div>
        </div>
    </div>


Источник

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

licensed under cc by-sa 3.0 with attribution.