Мучаюсь с этим слайдером уже неделю. Должно получиться как на изображении:
Загрузила с Slick SLider - Sync. Вставила в сетку, задала картинкам фиксированный размер.
И тут понеслось, в браузере через f12 блок slick-track выходит за разрешение окна. Плюс не могу понять почему маленькая картинка слайдера полностью съезжает, плюс из-за слайдера появляются внутренние отступы, из-за которых по ширине картинку не получается вытянуть...
Помогите, вообще не понимаю как с этим работать
$(document).ready(function() {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav',
draggable: false
});
$('.slider-nav').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
focusOnSelect: true,
arrows: true,
autoplay: false,
autoplaySpeed: 2000,
draggable: false,
infinite: false,
prevArrow: '<img class="larrow-gallery" src="images/gallery/larrow-gallery.svg">',
nextArrow: '<img class="rarrow-gallery" src="images/gallery/rarrow-gallery.svg">'
});
});
galery {
grid-row: 5/6;
display: grid;
grid: auto/auto;
justify-items: center;
align-items: center;
padding: 0;
margin: 0;
overflow-x: hidden;
}
.slider-for {
grid-row: 1/2;
grid-column: 1/2;
justify-self: center;
align-self: center;
height: 41vh;
width: 100vw;
}
.slider-for2 {
background-size: cover;
background-repeat: no-repeat;
height: 40.5vh;
width: 100vw;
z-index: -1;
filter: blur(0.2vw);
}
.slider-for2>img {
width: 100vw;
height: auto;
background-repeat: no-repeat;
}
.border-slider-nav {
grid-row: 1/2;
justify-self: center;
align-self: center;
width: 80vw;
height: 41vh;
background-color: #829329;
clip-path: polygon(20% 0%, 90% 0%, 80% 100%, 10% 100%);
display: grid;
grid: repeat(2, auto)/auto;
position: absolute;
grid-row-gap: 2vh;
z-index: 1000;
}
#border-slider-name {
margin: 2vh 0 0 0;
text-align: center;
font-size: 1.5vw;
font-family: Roboto Slab;
justify-self: center;
align-self: center;
color: #E7DECD;
grid-row: 1/2;
}
.slider-nav2>img {
width: 28vw;
height: 28vh;
padding: 0;
margin: 0;
border: 0.5vw solid #E7DECD;
}
.slider-nav2 {
grid-row: 1/2;
}
.slider-nav {
grid-row: 2/3;
justify-self: center;
align-self: center;
display: grid;
grid: auto/auto;
}
.larrow-gallery {
left: -14%;
}
.rarrow-gallery {
right: -14%;
}
.larrow-gallery,
.rarrow-gallery {
width: 3vw;
position: absolute;
display: block;
transform: translate(0, -50%);
cursor: pointer;
top: 50%;
z-index: 1000;
}
<galery>
<div class="slider-for">
<div class="slider-for2"><img src="images/gallery/1.jpg"> </div>
<div class="slider-for2"><img src="images/gallery/2.jpg"> </div>
<div class="slider-for2"><img src="images/gallery/3.jpg"> </div>
<div class="slider-for2"><img src="images/gallery/4.jpg"> </div>
</div>
<div class="border-slider-nav">
<p id="border-slider-name">Примеры работ</p>
<div class="slider-nav">
<div class="slider-nav2"><img src="images/gallery/1a.jpg"></div>
<div class="slider-nav2"><img src="images/gallery/2a.jpg"></div>
<div class="slider-nav2"><img src="images/gallery/3a.jpg"></div>
<div class="slider-nav2"><img src="images/gallery/4a.jpg"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="sync-slider.js"></script>
</galery>