自定义设计列表的光滑滑块点功能答案

【问题标题】：Slick slider dots functionality to custome design list自定义设计列表的光滑滑块点功能
【发布时间】：2021-05-04 07:30:01
【问题描述】：

我有两列，在第一列有一个列表，我想在其中单击并更改移动框架中的幻灯片，即以下是我的 html

<div class="convenience-wrapper">
                    <div class="convenience-content">
                        <h3>Convenience</h3>
                        <ul class="list-unstyled">
                            <li class="active">One</li>
                            <li>Two</li>
                            <li>Three</li>
                            <li>Four</li>
                        </ul>
                    </div>
                    <div class="mobile-wrapper">
                        <div class="mobile-frame">
                            <img src="images/mobile-frame.png" alt="Mobile Frame" />
                        </div>
                        <div class="mobile-screens">
                            <img src="images/order-on-app.png" alt="Order on App" />
                            <img src="images/flexible-quantity.png" alt="Flexible quantity" />
                            <img src="images/buy-now-pay-later.png" alt="Buy now pay later" />
                            <img src="images/scan-qr.png" alt="Scan QR" />
                        </div>
                    </div>
                </div>

我想点击左侧列表，即一、二、三，并想更改“移动屏幕” div 中的幻灯片/图像。

我搜索了很多，但每个人都在重新定位和更改圆点样式，我想要在我自己的自定义设计列表中使用圆点功能，任何人都可以指导我如何实现。

【问题讨论】：

标签： javascript slick.js

【解决方案1】：

这是我的看法：

jQuery(document).ready(($) => {
  $("#mySlider").slick({
    infinite: true
  })
  $("#myNavList > li").click((e) => {
    let element_index = [...e.target.parentElement.children].indexOf(e.target)
    $("#mySlider").slick("slickGoTo", element_index)
  })
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<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.8.1/slick.min.js"></script>
<div>
  <ul id="myNavList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <div id="mySlider" style="max-width: 100%">
    <img src="https://picsum.photos/200?1"/>
    <img src="https://picsum.photos/200?2"/>
    <img src="https://picsum.photos/200?3"/>
  </div>
</div>

我个人不会在生产中使用element_index 方法，但这只是一个快速演示代码，用于解释您可以使用哪些工具来实现您的要求。

【讨论】：