如何在此代码中更改滑块的布局? [英] How to change the layout of sliders in this code?

查看：81
本文介绍了如何在此代码中更改滑块的布局?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用光滑的滑块设置图片库， 我想在分辨率大于1024px的大屏幕上更改滑块的布局，就像在1023px的屏幕上那样. (通过将一个滑块显示在另一个滑块上方) 我需要更改什么?或添加?

I am setting up an image gallery using slick slider, I want to change the layout of the sliders when it is on big screens with resolution > 1024px , to be like what it would be if it was on 1023px screen. (by showing one slider above the other) what do I need to change ? or add ?

我想要的结果很大屏幕"

得到的结果"

我花了一些时间尝试更改值和设置，但未达到令人满意的结果.所以我处于死胡同.

I spent time trying to change values and settings but did not reach a satisfying result. So I am at dead end.

const $left = $(".left");
const $gl = $(".gallery");
const $gl2 = $(".gallery2");
const $photosCounterFirstSpan = $(".photos-counter span:nth-child(1)");

$gl2.on("init", (event, slick) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
  $(".photos-counter span:nth-child(2)").text(slick.slideCount);
});

$gl.slick({
  rows: 0,
  slidesToShow: 2,
  arrows: false,
  draggable: false,
  useTransform: false,
  mobileFirst: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 1023,
      settings: {
        slidesToShow: 1,
        vertical: true
      }
    }
  ]
});

$gl2.slick({
  rows: 0,
  useTransform: false,
  prevArrow: ".arrow-left",
  nextArrow: ".arrow-right",
  fade: true,
  asNavFor: $gl
});

function handleCarouselsHeight() {
  if (window.matchMedia("(min-width: 1024px)").matches) {
    const gl2H = $(".gallery2").height();
    $left.css("height", gl2H);
  } else {
    $left.css("height", "auto");
  }
}

$(window).on("load", () => {
  handleCarouselsHeight();
  setTimeout(() => {
    $(".loading").fadeOut();
    $("body").addClass("over-visible");
  }, 300);
});

$(window).on(
  "resize",
  _.debounce(() => {
    handleCarouselsHeight();
    /*You might need this code in your projects*/
    //$gl1.slick("resize");
    //$gl2.slick("resize");
  }, 200)
);

$(".gallery .item").on("click", function() {
  const index = $(this).attr("data-slick-index");
  $gl2.slick("slickGoTo", index);
});

$gl2.on("afterChange", (event, slick, currentSlide) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

body {
  font: normal 18px/1.5 monospace;
  overflow: hidden;
  background: #424242;
}

.over-visible {
  overflow: visible;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: white;
}

.container {
  max-width: 880px;
  padding: 20px 10px;
  margin: 0 auto;
}

.synch-carousels {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.synch-carousels > * {
  width: 100%;
}

.synch-carousels .right {
  order: -1;
}

.synch-carousels .left {
  overflow: hidden;
}

.synch-carousels .gallery {
  display: none;
}

.synch-carousels .slick-slide {
  outline: none;
}

.synch-carousels .slick-vertical .slick-slide {
  border: none;
}

.synch-carousels .gallery .slick-list {
  height: auto !important;
  margin: 0 -20px;
}

.synch-carousels .gallery .slick-slide {
  cursor: pointer;
}

.synch-carousels .gallery .slick-slide {
  margin: 0 20px;
}

.synch-carousels .nav-arrows {
  display: flex;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.synch-carousels .nav-arrows svg {
  fill: white;
}

.synch-carousels .arrow-left {
  margin-right: 35px;
}

.synch-carousels .photos-counter {
  position: absolute;
  top: 10px;
  right: 0;
  padding: 0 20px;
  color: white;
  background: #292929;
}

@media screen and (min-width: 480px) {
  .synch-carousels .right {
    margin-bottom: 20px;
  }

  .synch-carousels .gallery {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  .synch-carousels .right {
    position: relative;
    width: calc(100% - 230px);
    margin-bottom: 0;
    order: 2;
  }

  .synch-carousels .left {
    width: 210px;
  }

  .synch-carousels .gallery .slick-slide {
    margin: 0 0 20px 0;
  }

  .synch-carousels .gallery .slick-list {
    margin: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>


<div class="loading">Carousel is loading...</div>
<div class="container">
  <div class="synch-carousels">

    <div class="left child">
      <div class="gallery">
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery1.jpg" alt="">
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery2.jpg" alt="">
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery3.jpg" alt="">
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery4.jpg" alt="">
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery5.jpg" alt="">
        </div>
      </div>
    </div>

    <div class="right child">
      <div class="gallery2">
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery1.jpg" alt="" />
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery2.jpg" alt="" />
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery3.jpg" alt="" />
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery4.jpg" alt="" />
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery5.jpg" alt="" />
        </div>
      </div>
      <div class="nav-arrows">
        <button class="arrow-left">
          <!--SVGs from iconmonstr.com-->
          <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.117 12l7.527 6.235-.644.765-9-7.521 9-7.479.645.764-7.529 6.236h21.884v1h-21.883z"/></svg>
        </button>
        <button class="arrow-right">
          <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>
          </button>
      </div>
      <div class="photos-counter">
        <span></span><span></span>
      </div>
    </div>
  </div>
</div>

我希望UI在大于1024px的大屏幕上执行，其方式与在1023px的屏幕上执行的方式类似，以便将一个滑块显示在另一个之上，而不是彼此相邻.

I want the UI to perform on bigger screens > 1024px in similar manner as it performs on 1023px screens, to show one slider above the other, not next to each others.

推荐答案

更改最小宽度:css中的9999px值，并在js if (window.matchMedia("(min-width: 9999px)").matches)

change min-width: 9999px value in css and modify this line in your js if (window.matchMedia("(min-width: 9999px)").matches)

const $left = $(".left");
const $gl = $(".gallery");
const $gl2 = $(".gallery2");
const $photosCounterFirstSpan = $(".photos-counter span:nth-child(1)");

$gl2.on("init", (event, slick) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
  $(".photos-counter span:nth-child(2)").text(slick.slideCount);
});

$gl.slick({
  rows: 0,
  slidesToShow: 2,
  arrows: false,
  draggable: false,
  useTransform: false,
  mobileFirst: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 9999,
      settings: {
        slidesToShow: 1,
        vertical: true
      }
    }
  ]
});

$gl2.slick({
  rows: 0,
  useTransform: false,
  prevArrow: ".arrow-left",
  nextArrow: ".arrow-right",
  fade: true,
  centerMode: true,
  asNavFor: $gl
});

function handleCarouselsHeight() {
  if (window.matchMedia("(min-width: 9999px)").matches) {
    const gl2H = $(".gallery2").height();
    $left.css("height", gl2H);
  } else {
    $left.css("height", "auto");
  }
}

$(window).on("load", () => {
  handleCarouselsHeight();
  setTimeout(() => {
    $(".loading").fadeOut();
    $("body").addClass("over-visible");
  }, 300);
});

$(window).on(
  "resize",
  _.debounce(() => {
    handleCarouselsHeight();
    /*You might need this code in your projects*/
    //$gl1.slick("resize");
    //$gl2.slick("resize");
  }, 200)
);

$(".gallery .item").on("click", function() {
  const index = $(this).attr("data-slick-index");
  $gl2.slick("slickGoTo", index);
});

$gl2.on("afterChange", (event, slick, currentSlide) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
});

$('.gallery2').slickLightbox({
  itemSelector        : 'a',
  navigateByKeyboard  : true
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

body {
  font: normal 18px/1.5 monospace;
  overflow: hidden;
  background: #424242;
}

.over-visible {
  overflow: visible;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: white;
}

.container {
  max-width: 880px;
  padding: 20px 10px;
  margin: 0 auto;
}

.synch-carousels {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.synch-carousels > * {
  width: 100%;
}

.synch-carousels .right {
  order: -1;
}

.synch-carousels .left {
  overflow: hidden;
}

.synch-carousels .gallery {
  display: none;
}

.synch-carousels .slick-slide {
  outline: none;
}

.synch-carousels .slick-vertical .slick-slide {
  border: none;
}

.synch-carousels .gallery .slick-list {
  height: auto !important;
  margin: 0 -20px;
}

.synch-carousels .gallery .slick-slide {
  cursor: pointer;
}

.synch-carousels .gallery .slick-slide {
  margin: 0 20px;
}

.synch-carousels .nav-arrows {
  display: flex;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.synch-carousels .nav-arrows svg {
  fill: white;
}

.synch-carousels .arrow-left {
  margin-right: 35px;
}

.synch-carousels .photos-counter {
  position: absolute;
  top: 10px;
  right: 0;
  padding: 0 20px;
  color: white;
  background: #292929;
}

@media screen and (min-width: 480px) {
  .synch-carousels .right {
    margin-bottom: 20px;
  }

  .synch-carousels .gallery {
    display: block;
  }
}

@media screen and (min-width: 9999px) {
  .synch-carousels .right {
    position: relative;
    width: calc(100% - 230px);
    margin-bottom: 0;
    order: 2;
  }

  .synch-carousels .left {
    width: 210px;
  }

  .synch-carousels .gallery .slick-slide {
    margin: 0 0 20px 0;
  }

  .synch-carousels .gallery .slick-list {
    margin: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css" rel="stylesheet"/>
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js"></script>

<div class="loading">Carousel is loading...</div>
<div class="container">
  <div class="synch-carousels">

    <div class="left child">
      <div class="gallery">
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery1.jpg" alt="Image One">
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery2.jpg" alt="Image Two">
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery3.jpg" alt="Image Three">
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery4.jpg" alt="Image Four">
        </div>
        <div class="item">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery5.jpg" alt="Image Five">
        </div>
      </div>
    </div>

    <div class="right child">
      <div class="gallery2">
        <div class="item">
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery1.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery1.jpg" alt="Image One" />
          </a>
        </div>
        <div class="item">
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery2.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery2.jpg" alt="Image Two" />
          </a>
        </div>
        <div class="item">
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery3.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery3.jpg" alt="Image Three" /></a>
        </div>
        <div class="item">
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery4.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery4.jpg" alt="Image Four" />
          </a>
        </div>
        <div class="item">
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery5.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery5.jpg" alt="Image Five" />
          </a>
        </div>
      </div>
      <div class="nav-arrows">
        <button class="arrow-left">
          <!--SVGs from iconmonstr.com-->
          <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.117 12l7.527 6.235-.644.765-9-7.521 9-7.479.645.764-7.529 6.236h21.884v1h-21.883z"/></svg>
        </button>
        <button class="arrow-right">
          <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>
          </button>
      </div>
      <div class="photos-counter">
        <span></span><span></span>
      </div>
    </div>
  </div>
</div>

这篇关于如何在此代码中更改滑块的布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆