主页 / 问题 / 1321883
Accepted
kiskiskit
Asked:2022-08-27 18:50:28 +0000 UTC2022-08-27 18:50:28 +0000 UTC

如何与光滑滑块中的断点交互？

  • 772

如何正确与 slick 中的断点交互。滑块不应在笔记本电脑和其他大屏幕上处于活动状态，而只能在移动设备和平板电脑上处于活动状态。你能告诉我如何使用响应属性来做到这一点吗？

$('.slider').slick({
    dots: true,
    responsive: [{
            breakpoint: 1024,
            settings: "unslick"
    }]
  });
.slider {
  display: flex;
  
}


.slider-item {
  width: 100px;
  height: 100px;
  background:  #FF6666;
  margin: 30px;
  
}
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider-item">
    
  </div>
  <div class="slider-item">
    
  </div>
  <div class="slider-item">
    
  </div>
  <div class="slider-item">
    
  </div>
</div>

html

1 个回答

  1. Best Answer

    没有激活或根本没有显示？

    1. 如果设为非活动状态（禁用滑动）

    $('.slider').slick({
    dots: true,
    responsive: [{
            breakpoint: 1024,
            swipe: false
    }]
 });

    1. 如果我们只想在触摸时显示

    @media (pointer:coarse){
/* Данный медиа-запрос позволит отдельно прописывать стили только для устройств с поддержкой тач, либо так же но с помощью медиа запросов на ширину дисплея */
  .slick {
    display: flex
  }
}

.slick {
  display: none
}

    • 1

相关问题