光滑的滑块点功能到客户设计列表

问题描述

我有两列，第一列有一个列表，我想在其中单击并更改移动框架中的幻灯片，即以下是我的 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 中的幻灯片/图像。

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

解决方法

这是我的看法：

> approx(seq_along(a)[!is.na(a)],a[!is.na(a)],seq_along(a))$y
 [1] 100000.0 137862.0 147980.8 158099.5 168218.2 178337.0 197869.2 217401.3
 [9] 236933.5 256465.7 275997.8 295530.0

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> 方法，但这只是一个快速演示代码，用于说明您可以使用哪些工具来实现您的要求。