2

На сайте будет 8 блоков: 4 сверху, 4 снизу (12 блоков по каждому col-lg-12 col-xl-12).

При ширине меньше 768 пикселей они будут в одну колонку встраиваться как видите col-md-6 у класса projects-block.

Нужно чтобы при маленькой ширине (ниже 768 пикселей) slick -slider начал работать.

А при больших экранах деактивировалсья перепробовал уже все задавал slider-container и классу row и классу projects-block ничего не помогает.

Но проблема в том, что он и ошибку в консоли не выдает.

Помогите, очень прошу.

function mobileOnlySlider() {
    $(document).ready(function(){
        $('.projects-block').slick({
            slidesToShow: 2,
            slidesToScroll: 1,
            autoplay: true,
            arrows: false,
            touchMove:true,
            dots: false,
                pauseOnHover: false,
                responsive: [{
                    breakpoint: 568,
                    settings: {
                        slidesToShow: 2,
                        settings:"unslick"
                }
            }]
        });
    });
}
if(window.innerWidth < 768) {
    mobileOnlySlider();
}
$(window).resize(function(e){
    if(window.innerWidth < 768) {
        if(!$('.slider').hasClass('slick-initialized')){
            mobileOnlySlider();
        }

    }else{
        if($('.slider').hasClass('slick-initialized')){
            $('.slider').slick('unslick');
        }
    }
});
.projects_block {
    margin-bottom: 2%;
    display: flex;
}
.project_block {
        display: flex;
        flex-direction: column;
        height: 100px;
        margin: 0 1%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <div class="projects">
    <h3 class="projects_title">Our <span>project</span></h3>
    <div class="container-fluid">
        <div class="row">
            <div class="projects_block slider-container col-sm-6 col-md-6 col-lg-12 col-xl-12">
                <div class="project_block slide">
                    <div class="project_name">Discover Milan's religious sites</div>
                </div>
                <div class="project_block slide">
                    <div class="project_name">Saint Petersburg Philharmonic Orchestra</div>
                </div>
                <div class="project_block slide">
                    <div class="project_name">Grand Hall Music </div>
                </div>
                <div class="project_block slide">
                    <div class="project_name">Hand-made art & design workshop</div>
                </div>
            </div>
            <div class="projects_block slider-container col-sm-6 col-md-6 col-lg-12 col-xl-12">

                <div class="project_block slide">
                    <div class="project_name">Historical instruments expo</div>
                </div>
                <div class="project_block slide">
                    <div class="project_name">2016 Festival & Performance Guide</div>
                </div>
                <div class="project_block slide">
                    <div class="project_name">Winston Creek Regional Museum</div>
                </div>
                <div class="project_block slide">
                    <div class="project_name">Michelle Adams: A star on the rise</div>
                </div>
            </div>
        </div>
    </div>
</div>

0

2 ответа 2

3

Добавьте вот это

$(window).on('load resize', function() {
  if ($(window).width() < 640) {
    $('#items:not(.slick-initialized)').slick({
      centerMode: true,
      dots: true,
      infinite: true,
      speed: 100,
      slidesToShow: 1
    });
  } else {
    $("#items.slick-initialized").slick("unslick");
  }
});
body {
  margin: 0;
}

.item {
  height: 50px;
  background-color: #cda;
  border: 1px solid;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div id="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

6
  • спасибо большое
    – Demon __
    22 мая 2018 в 10:42
  • @МаксимЛенский , нужно добавить ещё событие load и сделать защиту от запуска уже инициализированного слайдера(я использую селектор :not(.slick-initialised)). Иначе слайдер при входе с мобильного не запустится, только после resize.
    – zhurof
    22 мая 2018 в 11:06
  • @ГеннадийЖуров да я уже сделал :)
    – Demon __
    22 мая 2018 в 12:50
  • @МаксимЛенский скопировать тот же код который ты предоставил удалить unslick и добавить вместо resize onload и все :)
    – Demon __
    22 мая 2018 в 12:51
  • 1
    @МаксимЛенский это ответ на твой вопрос покажите как это делать
    – Demon __
    22 мая 2018 в 16:49
0

Возможно, моё решение поможет кому-то.

Необходимо создать копию блока со слайдером и обернуть оба блока в overlay. И открывать/скрывать блоки на брейкпоинтах через указание свойства display для overlay. Таким образом нет пересечения со свойствами, которые задаёт slick.

Важно! Слайдером выступает не overlay, а блок внутри неё - project_slider.

Работает стабильно, без jQuery, перезагружать страницу не надо.

.project_slider_overlay {
  display: none;
}
.project_blocks_overlay {
  display: block;
}

@media screen and (max-width: 768px) {
  .project_slider_overlay {
    display: block;
  }
  .project_blocks_overlay {
    display: none;
  }
}
<div class="project_slider_overlay">
  <div class="project_slider">
    <div class="project_block slide">
      <div class="project_name">Discover Milan's religious sites</div>
    </div>
    <div class="project_block slide">
      <div class="project_name">Saint Petersburg Philharmonic Orchestra</div>
    </div>
    <div class="project_block slide">
      <div class="project_name">Grand Hall Music </div>
    </div>
    <div class="project_block slide">
      <div class="project_name">Hand-made art & design workshop</div>
    </div>
  </div>
</div>

<div class="project_blocks_overlay">
  <div class="project_blocks">
    <div class="project_block slide">
      <div class="project_name">Discover Milan's religious sites</div>
    </div>
    <div class="project_block slide">
      <div class="project_name">Saint Petersburg Philharmonic Orchestra</div>
    </div>
    <div class="project_block slide">
      <div class="project_name">Grand Hall Music </div>
    </div>
    <div class="project_block slide">
      <div class="project_name">Hand-made art & design workshop</div>
    </div>
  </div>
</div>

Ваш ответ

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

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