主页 / 问题 / 867119
Accepted
Александр Делен
Asked:2020-08-10 21:53:53 +0800 CST2020-08-10 21:53:53 +0800 CST

光滑的滑块响应[关闭]

  • 772

问题是这样的：
我们去这里 http://www.mitrix.io/mobile-development
在页面中间有一个黑色部分“我们的专业领域”
有一个标题和 8 个元素 l-dedicated-developers__item
像这样：在桌面上它应该看起来像现在一样，宽度：830px，列表被转换为 X 滚动，但我希望它是一个具有滑动效果的滑块，当返回一个分辨率时宽度大于宽度 830px，应该再次有一个常规列表。

我使用 Slick 滑块，但我不知道如何在不重新加载页面的情况下使其初始化，而是通过调整窗口大小。

slider

1 个回答

  1. Best Answer

    $(window).on('load resize orientationchange', function () {

  $('.js-slider').each(function () {
    var $carousel = $(this);

    if ($(window).width() > 830) {

      if ($carousel.hasClass('slick-initialized')) {
        $carousel.slick('unslick');
      }

    } else {

      if (!$carousel.hasClass('slick-initialized')) {
        $carousel.slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          mobileFirst: true,
        });
      }

    }
  });

});
    body {
  margin: 0;
  padding: 0;
}

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

.container__row {
  display: flex;
}

.block {
  height: 200px;
  min-width: 50%;
}

.block1 {
  background-color: lightcoral;
}

.block2 {
  background-color: lightblue;
}
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="container js-slider">
  <div class="container__row js-slider">
    <div class="block block1">A</div>
    <div class="block block2">B</div>
  </div>
</div>

    • -1

相关问题