$(document).ready(function(){
$('.slick-slider').slick();
});
<div class="slick-slider MYSTYLECLASS">
<div class="MYSTYLECLASS__ITEM">your content</div>
<div class="MYSTYLECLASS__ITEM">your content</div>
<div class="MYSTYLECLASS__ITEM">your content</div>
</div>
<div class="slick-slider MYSTYLECLASS-2">
<div class="MYSTYLECLASS-2__ITEM">your content</div>
<div class="MYSTYLECLASS-2__ITEM">your content</div>
<div class="MYSTYLECLASS-2__ITEM">your content</div>
</div>
<div class="slick-slide"><div class="container-content">слайд 1</div></div>
<div class="slick-slide slick-current"><div class="container-content">слайд 2</div></div>
<div class="slick-slide"><div class="container-content">слайд 3</div></div>
.slick-current > .container-content {
transform: scale(2);
}
.class_1 {
@extend .class_2;
right: 0;
left: 0;
}
.class_2 {
position: absolute;
top: 0;
bottom: 0;
}
%position {
position: absolute;
top: 0;
bottom: 0;
}
.class_1 {
@extend %position;
right: 0;
left: 0;
}
.class_2 {
@extend %position;
}
.parent
.child__img
.child__hover
.title
| my title
.desc
| my description
.parent{
position: relative;
}
.child__img{
тут код для картинки
}
.child__hover{
display: none;
}
.parent:hover .child__hover {
display: block;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
background: #ccc;
}
.title{
стиль заголовка
}
.desc{
стиль описания
}
$(function() {
var $togglers = $(".js-deps-popup");
return $togglers.on("click", function(e) {
var $this = $(this),
$item = $this.next(".dep"),
$active = $(".dep_show");
$item.toggleClass("dep_show");
$active.removeClass("dep_show");
e.stopPropagation();
});
});
$(function() {
$(document).click(function(e) {
var $togglersPopup = $(".dep__popup");
if (!$togglersPopup.is(e.target) &&
$togglersPopup.has(e.target).length === 0
) {
$(".dep").removeClass("dep_show");
}
});
});