0

По какой причине не работает адаптивность у slick slider?. Может нужно доп. настройки прописывать?

Настройки slick'a

$(document).ready(function(){
  $('.head-slider__slider').slick({
    dots: true,
    infinite: true,
    speed: 1000,
  });
});

Структура слайдера:

.head-slider {
  display: flex;
  align-items: center;
  min-height: 900px;
  background: url(../img/sliders/slide_img.jpg);
  background-size: cover;
  background-position: fixed;
  .head-slider__slider {
    width: 100%;
    border: 2px solid green;
    .slider__slide {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      min-height: 500px;
      .slide__slide-header {
        h2 {
          font-size: 7rem;
          font-family: @FfontRaleway;
          font-weight: @WfontSemiBold;
          color: @whiteColor;
        }
      }
      .slide__slide-description {
        font-size: 5rem;
        font-family: @FfontRaleway;
        font-weight: @WfontLight;
        color: @whiteColor;
      }
      .slide__slide-buttons {
        a {
          .lightButtons(@whiteColor);
          margin-right: 1%;
        }
      }
    }
  }
}
<section class="head-slider">
  <div class="container">
    <div class="head-slider__slider">
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
            <svg class="slide-header__underline">
              <use xlink:href="#underline"></use>
            </svg>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
          <object data="" type=""></object>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
          <object data="" type=""></object>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
          <object data="" type=""></object>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
    </div>
  </div>
</section>

Попробовал отключить display: flex для .head-slider, это помогло, слайдер стал адаптивным, но в таком случае слайдер находится не по середине секции, а это то, для чего я и использовал flex'ы.

0

3 ответа 3

0

Сделайте так:

.head-slider {
    position: absolute;
    left: 50%
    top: 50%
    transform: translateX(-50%) translateY(-50%)
    }

То встанет все по центру и по горизонтали и по вертикали

1
  • Знаю этот способ, но мне кажется, что это костыльно в данном случаи
    – uzi_no_uzi
    14 апр 2018 в 13:31
0

Вам нужно попробовать обернуть свои slider__slide в пустые div, так как slick на каждый слайд вешает свои стили и они конфликтуют. Переопределять их не очень хорошая идея, вы будете получать вот такие баги. А вот внутри этих дивов, делайте что хотите.

Если предоставите рабочий самодостаточный пример сможем вам помочь более точно.

<section class="head-slider">
  <div class="container">
    <div class="head-slider__slider">
      <div>
        <div class="slider__slide">
          <div class="slide__slide-header">
            <h2>Expire</h2>
            <svg class="slide-header__underline">
              <use xlink:href="#underline"></use>
            </svg>
          </div>
          <div class="slide__slide-description">
            <p>Professionaly designed, carefully made for your enjoyement</p>
          </div>
          <div class="slide__slide-buttons">
            <a href="#">Explore</a>
            <a href="#">Learn more</a>
          </div>
        </div>
        <!--slide-end-->
      </div>
      <div>
        <div class="slider__slide">
          <div class="slide__slide-header">
            <h2>Expire</h2>
            <object data="" type=""></object>
          </div>
          <div class="slide__slide-description">
            <p>Professionaly designed, carefully made for your enjoyement</p>
          </div>
          <div class="slide__slide-buttons">
            <a href="#">Explore</a>
            <a href="#">Learn more</a>
          </div>
        </div>
        <!--slide-end-->
      </div>
      <div>
        <div class="slider__slide">
          <div class="slide__slide-header">
            <h2>Expire</h2>
            <object data="" type=""></object>
          </div>
          <div class="slide__slide-description">
            <p>Professionaly designed, carefully made for your enjoyement</p>
          </div>
          <div class="slide__slide-buttons">
            <a href="#">Explore</a>
            <a href="#">Learn more</a>
          </div>
        </div>
        <!--slide-end-->
      </div>
      <div>
        <div class="slider__slide">
          <div class="slide__slide-header">
            <h2>Expire</h2>
            <object data="" type=""></object>
          </div>
          <div class="slide__slide-description">
            <p>Professionaly designed, carefully made for your enjoyement</p>
          </div>
          <div class="slide__slide-buttons">
            <a href="#">Explore</a>
            <a href="#">Learn more</a>
          </div>
        </div>
        <!--slide-end-->
      </div>
    </div>
  </div>
</section>

7
  • Вот сама верстка, самодостаточный пример не могу предоставить, т.к. просто не знаю как составить такой пример uzinouzi.github.io/testtemplate
    – uzi_no_uzi
    14 апр 2018 в 15:50
  • @uzi_no_uzi Попробуйте сделать как я сказал. Дело в том что у флекс элементов своя более сложная система расчетов и именно это может мешать слику рассчитать размеры для адаптации. Сейчас вы переопределили поведение слайдов слика и считать что причина в чем то другом у меня повода нет.
    – Get-Web
    14 апр 2018 в 16:04
  • можете по подробнее объяснить? Я не особо понял, что нужно оборачивать
    – uzi_no_uzi
    14 апр 2018 в 16:06
  • @uzi_no_uzi У вас каждый блок slider__slide является слайдом и кроме ваших стилей на этот блок навешиваются стили слайдера. Вам нужно каждый вал блок slider__slide заключить в теги <div> тут ваш slider__slide </div> тогда слик повесит на них свои стили и будет х использовать по назначению, а ваши блоки будут уже внутри слайдов и работать самостоятельно
    – Get-Web
    14 апр 2018 в 16:12
  • @uzi_no_uzi добавил правильную html разметку в ответ
    – Get-Web
    14 апр 2018 в 16:15
0

Нужно было всего-лишь задать контейнеру width: 100%;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.