主页 / 问题 / 1030733
Accepted
Spartak
Asked:2020-10-03 18:44:45 +0000 UTC2020-10-03 18:44:45 +0000 UTC

光滑的滑块：点悬停导航

  • 772

使用标准实现，单击时滑动滑块会翻转，但我需要幻灯片在单击导航点时而不是在将鼠标悬停在它们上时更改。

  $('#slider-1').slick({

      dots: true,
      arrows: false,
      fade: true,
      autoplay: false,

  });
javascript

2 个回答

  1. Best Answer

    您可以使用该方法 切换到特定幻灯片slickGoTo。

    方法语法：

    $('.your-element').slick('slickGoTo', index, [, dontAnimate]);

    选项：

    • index- 转换到的幻灯片的索引。整数。
    • dontAnimate- 跳过动画。布尔值。默认值为false。

    默认情况下，插件创建 HTML 标记作为导航点，内容如下：

    <ul class="slick-dots">
  <li class="slick-active">
    <button type="button" ...>1</button>
  </li>

  <!-- Остальные элементы `li` списка `ul` -->
</ul>

    mouseenter当鼠标光标移动到元素上时会生成一个事件。作为这样一个元素，我选择了 button button：当你将鼠标悬停在它上面时，光标样式会发生变化。

    下面是一个使用两个滑块的演示。

    $('.slider').slick({
  dots: true,
  arrows: false,
  fade: true,
  autoplay: false,

  // dotsClass: 'slick-dots'
});

$('.slider').on('mouseenter', '.slick-dots button', function(event) {
  $(this).parents('.slider').slick('slickGoTo', $(this).parent().index());
});
    .page {
  max-width: 400px;
  margin: 2.5rem auto;
}
    <!-- Стили плагина -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" />

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

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

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

    • 5

  2. 如果要求我在最短的时间内解决这个问题，我会选择类似的解决方案：

    $('.slick-dots button').mouseenter(function (e) {
    var btn = $(this);
    btn[0].click();
});

    那些。我们只需捕捉鼠标光标出现（mouseenter）在滑块导航元素（.slick-dots button）上的事件并单击它，剩下的所有工作都交给 Slick。

    ps：发布了一个简单的例子 - https://jsfiddle.net/Denisdude/dkL312o8/23/

    • 3

相关问题