1

Мучаюсь с этим слайдером уже неделю. Должно получиться как на изображении:

Должно выглядеть так Загрузила с 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>

1
  • @РустамГимранов, да
    – strquest
    15 дек 2019 в 12:30

1 ответ 1

0

Необходимо определиться с выбором технологии: либо гриды, либо флексы. Смешивая их, вы сами себя запутываете.

В примере ниже были выбраны флексы и созданы два вспомогательных блока: один слева, другой - справа, потому что так проще отцентрировать лицевой слайдер. Задаём этим блокам, помимо одинаковой ширины, внешние отступы margin-left: auto; для левого и margin-right: auto; для правого. Далее, уже индивидуально при помощи clip-path обрезаем их отображение.

Фоновый слайдер имеет абсолютное позиционирование, поэтому просто скрываем лишнее при переполнении родительского контейнера overflow: hidden;.

$('#front-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '#background-slider',
  autoplay: true,
  autoplaySpeed: 2000,
  infinite: true,
  nextArrow: '<button type="button" class="slick-next">Next</button>',
  prevArrow: '<button type="button" class="slick-prev">Previous</button>',
});

$('#background-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  draggable: false,
  fade: true,
  focusOnSelect: false,
});
:root {
  --dark: #222;
  --gray-dark: #333;
  --gray: #888;
  --light: #eee;
  --white: #fff;
  --green: #819329;
  --primary: var(--green);
}

body {
  background: var(--light);
}

.page {
  max-width: 1140px;
  margin: 2.5rem auto;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
}

.left-slider-helper,
.right-slider-helper {
  width: 80px;
  z-index: 1;
  background-color: var(--primary);
}

.left-slider-helper {
  margin-left: auto;
  clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.right-slider-helper {
  margin-right: auto;
  clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 0% 100%);
}

.front-slider-wrapper {
  height: 100%;
  position: relative;
  max-width: 400px;
  z-index: 2;
  background-color: var(--primary);
  color: var(--white);
}

.front-slider-inner .slick-slider {
  border: 1px solid var(--light);
  padding: 4px;
  background: var(--white);
}

.background-slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<!-- Стили плагина -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

<div class="page">
  <div class="left-slider-helper"></div>

  <div class="front-slider-wrapper">
    <div class="front-slider-inner">
      <h3>Примеры работ</h3>
      <div id="front-slider" class="slider">
        <img src="https://via.placeholder.com/400x200/ff9ff3/FFFFFF?text=Изображение+1" />
        <img src="https://via.placeholder.com/400x200/feca57/FFFFFF?text=Изображение+2" />
        <img src="https://via.placeholder.com/400x200/ff6b6b/FFFFFF?text=Изображение+3" />
        <img src="https://via.placeholder.com/400x200/48dbfb/FFFFFF?text=Изображение+4" />
        <img src="https://via.placeholder.com/400x200/1dd1a1/FFFFFF?text=Изображение+5" />
      </div>
      <p>Описание текущей работы</p>
    </div>
  </div>

  <div class="right-slider-helper"></div>

  <div class="background-slider-wrapper">
    <div class="background-slider-inner">
      <div id="background-slider" class="slider">
        <img src="https://via.placeholder.com/400x200/ff9ff3/FFFFFF?text=Изображение+1" />
        <img src="https://via.placeholder.com/400x200/feca57/FFFFFF?text=Изображение+2" />
        <img src="https://via.placeholder.com/400x200/ff6b6b/FFFFFF?text=Изображение+3" />
        <img src="https://via.placeholder.com/400x200/48dbfb/FFFFFF?text=Изображение+4" />
        <img src="https://via.placeholder.com/400x200/1dd1a1/FFFFFF?text=Изображение+5" />
      </div>
    </div>
  </div>
</div>

<!-- Скрипты плагина-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

1
  • Спасибо, большое
    – strquest
    16 дек 2019 в 3:30

Ваш ответ

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

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