На сайте будет 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>