1

подскажите как сделать, чтобы миниатюры были вертикальными и перелистывались вертикально?

.data-img{
        display: grid;
        grid-template-columns: 140px calc(100% - 165px);
    }
.main-slider div{border: 1px solid #000}
.arrow-prev,.arrow-next{
        height: 35px;
        display: block;
        width: 35px;
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
    }
.arrow-prev{
    background-image: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAPCAQAAABQWBdtAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfjARIQDyVLzh7QAAABLUlEQVQoz43Rz0uTARjA8c+7wYIghJJOnqLDe/HiJRBkOSLGBF1qSChodIrwH1D8Azpk54QOBakYLFp0EUQMPbkdZAwyGlGMYBOEDgkDnR2CaOxV9709z8OX51cQiqTLB01DfkcVY5HKJTkDkvISnUpxa1JKylJWxTuRAi8Nq8hI++6eF4KLpWem1aRVVd1x4JGnbaN0t8Zz5v0y6DM4tO6BlIbts6XHFh1JK/7L1OyYkFZXiJYmLTk2arOl9w8l44bsK7dLGStiZrxr2/KLb8aM2FVpPUS/txJmLUf+7Y0nEnJu/d+p14Yr5j13FgVNd933Uf2vdNOWaxYtOI9PrkrKeu8wCHtsueGVh06dT+C1KV/dDsKiPnmjTlxMXM6wYhDu+Smr0YECl+Vc/wP/MUuSyrNRKgAAAABJRU5ErkJggg==);
}
.arrow-next{
    background-image: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAPCAQAAABQWBdtAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfjARIQEA2zIbi0AAABNklEQVQoz43RPUubYRQG4Ct5y+tQcQrSH+CQJXO7FT8QS5UXNa046eDQQVfBqbiIg4vQoVMpig6iQgolWIIgrS51UhwstEKbxQ+ETH6h6WIgMWmTZzz3uZ7h3LHkjjNp1xp7oRVP4pr0WRY0RAILIo/jIn8Mei9Wl8S8MyTvRVxeh1NjZuuiGW+c6pIPEpz7YlinK9/+QyZNK+i2T5CAY9uG9Di2+w8yZt6FyA4lxG970nodOqhB0j6689rG/T0SpeCHIwMi3/18QLqseWTEamkQLwuXjAute1ZBnsoITVgqu3yifGHXjR6vfHZyP0nJafHWXEVdFYivWrTrl3GONjmt5k09KCxZXeEHo3557s6WNotGFOshAmsi+0j5ZMBt1b81EKGsDmx66bI6ro1ollXUp1Ar/AtVkUtnanNA4QAAAABJRU5ErkJggg==);
}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="data-img">
  <div class="thumb-slider">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
  <div class="main-slider">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</div>

1 ответ 1

2

Читайте документацию slick slider.

Для связи двух слайдеров указываете asNavFor: " ... " , для вертикального слайда указываете vertical: true:

$('.main-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,               
  dots: false,
  arrows:false,
  infinite: true,
  asNavFor: '.thumb-slider'
});  

$('.thumb-slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,               
  dots: false,
  infinite: true,
  prevArrow:'<button class="slick-prev"></button>',
  nextArrow:'<button class="slick-next"></button>',
  asNavFor: '.main-slider',
  focusOnSelect: true,
  centerMode: false,
  vertical: true,
});   
@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css");


* {
  box-sizing:border-box;
}

.data-img{
  display: grid;
  grid-template-columns: 140px calc(100% - 165px);
}
.main-slider {border: 1px solid #000;}
.slick-arrow {
  height: 35px;
  width: 35px;
  margin-left: auto;
  margin-right: auto;
  background-color:transparent;
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  border:none;
  cursor:pointer;
}

.slick-prev{
  background-image: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAPCAQAAABQWBdtAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfjARIQDyVLzh7QAAABLUlEQVQoz43Rz0uTARjA8c+7wYIghJJOnqLDe/HiJRBkOSLGBF1qSChodIrwH1D8Azpk54QOBakYLFp0EUQMPbkdZAwyGlGMYBOEDgkDnR2CaOxV9709z8OX51cQiqTLB01DfkcVY5HKJTkDkvISnUpxa1JKylJWxTuRAi8Nq8hI++6eF4KLpWem1aRVVd1x4JGnbaN0t8Zz5v0y6DM4tO6BlIbts6XHFh1JK/7L1OyYkFZXiJYmLTk2arOl9w8l44bsK7dLGStiZrxr2/KLb8aM2FVpPUS/txJmLUf+7Y0nEnJu/d+p14Yr5j13FgVNd933Uf2vdNOWaxYtOI9PrkrKeu8wCHtsueGVh06dT+C1KV/dDsKiPnmjTlxMXM6wYhDu+Smr0YECl+Vc/wP/MUuSyrNRKgAAAABJRU5ErkJggg==);
}
.slick-next{
  background-image: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAPCAQAAABQWBdtAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfjARIQEA2zIbi0AAABNklEQVQoz43RPUubYRQG4Ct5y+tQcQrSH+CQJXO7FT8QS5UXNa046eDQQVfBqbiIg4vQoVMpig6iQgolWIIgrS51UhwstEKbxQ+ETH6h6WIgMWmTZzz3uZ7h3LHkjjNp1xp7oRVP4pr0WRY0RAILIo/jIn8Mei9Wl8S8MyTvRVxeh1NjZuuiGW+c6pIPEpz7YlinK9/+QyZNK+i2T5CAY9uG9Di2+w8yZt6FyA4lxG970nodOqhB0j6689rG/T0SpeCHIwMi3/18QLqseWTEamkQLwuXjAute1ZBnsoITVgqu3yifGHXjR6vfHZyP0nJafHWXEVdFYivWrTrl3GONjmt5k09KCxZXeEHo3557s6WNotGFOshAmsi+0j5ZMBt1b81EKGsDmx66bI6ro1ollXUp1Ar/AtVkUtnanNA4QAAAABJRU5ErkJggg==);
}

.thumb-slider {
  text-align: center;
}

.thumb-slider .slick-slide {
  
  width: 80px;
  height: 80px;
  line-height: 80px;
  border:1px solid #ccc;
  cursor:pointer;
  
}

.thumb-slider .slick-slide.slick-current {
  border-color:red;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="data-img">
  <div class="thumb-slider">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
  </div>
  <div class="main-slider">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
  </div>
</div>

Ваш ответ

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

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