0

Как видите 8 блоков 4 снизу 4 сверху все устроено флексбоксами.

Слайдер начинает свою работу при ширине меньше 768 пикселей (при ресайзе или при загрузке страницы ) CODEPEN ССЫЛКА ТУТ

Проблема заключается в том что если его touchpad-ом или же другим способом сменить то новый слайд добавляется вниз а иногда проста все изчезает и растет высота блока вот так введите сюда описание изображения

А нужно чтобы было так

введите сюда описание изображения

В настройках я ничего особенного не сделал все стандартно и стабильно

          centerMode: true, //режим чтобы поставить блоки по центру
          infinite: true, //бесконечная прокрутка
          prevArrow: false, //убрал стрелки
          nextArrow: false, //убрал стрелки
          speed: 200, //скорость 200
          slidesToShow: 1, // показать 1 элемент
          slidesToScroll:1 //менять по одному элементу

Или же если кто нибудь предложит другое решение с использованием другова слайдера чтобы работал также я ответы принимаю.Главное чтобы работал

Очень хотел бы чтобы кто нибудь помог а то уже 4 ый день застрял на слайдере.

5
  • @МаксимЛенский спасибо тебе большое
    – Randall
    23 мая 2018 в 7:21
  • codepen.io/topicstarter/pen/vjMWzG?editors=0110 смотри ... не знаю какой баг вылезет
    – user33274
    23 мая 2018 в 7:24
  • @МаксимЛенский крут .!а что ты поменял мне надо знать потому что у меня на локальном scss стоит в webpack-е и я не могу просто все копи пастить
    – Randall
    23 мая 2018 в 7:28
  • смотри в самом низу css - вот эти параметры надо тебе изменить в scss
    – user33274
    23 мая 2018 в 7:30
  • @МаксимЛенский напиши ответ приму :)
    – Randall
    23 мая 2018 в 7:40

1 ответ 1

2

Вы в стилях явно указали где то ширину слайдов и собственно по этому они не помещаются

Я с !important изменил в @media стили отдельного слайда

Измените ваши стили

@media (max-width:768px) {
  .container-slick {
    max-width: 90% !important;
    margin: auto;
    border: 1px solid red;
  }
  .projects_block .slide {
    max-width: 95% !important;
    height: 100%;
    background-size: 100% 100% !important;
    margin: 0 -20px !important;
    outline: none;
  }
}

@media (max-width:555px) {
  .container-slick {
    max-width: 95% !important;
    margin: auto;
    border: 1px solid red;
  }
  .projects_block .slide {
    max-width: 95% !important;
    margin: 0 -30px !important;
    outline: none;
  }
}

3
  • спасибо еще раз если бы не ты я бы копалсья еще дня три как минимум
    – Randall
    23 мая 2018 в 8:12
  • мой маленький совет - начинай такие вещи в мобильной версииъ
    – user33274
    23 мая 2018 в 8:13
  • возму в заметку
    – Randall
    23 мая 2018 в 8:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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