如何解决光滑的滑块点功能到客户设计列表
我有两列,第一列有一个列表,我想在其中单击并更改移动框架中的幻灯片,即以下是我的 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>
方法,但这只是一个快速演示代码,用于说明您可以使用哪些工具来实现您的要求。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。