javascript - UIKIT Slider 轮播中心点击
问题描述
有没有办法让旋转木马的图像在点击时以视口为中心?
仅当您单击项目符号导航时它才会居中,如果您单击对象本身,我需要它居中(li)
这是我目前的 html,5 个图像轮播,内容在悬停/单击时显示在下面
谢谢
<div uk-slider="center: true">
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items uk-grid-collapse uk-grid-small uk-child-width-1-2 uk-child-width-1-2@s uk-child-width-1-5@m company-slider" align="center">
<li><img src="images/image1.jpg""></li>
<li><img src="images/image2.jpg""></li>
....
....
</ul>
</div>
<a class="uk-position-center-left-out slide-ars" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right-out slide-ars" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center"></ul>
</div>
<div>
<ul class="uk-subnav uk-hidden">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
...
...
</ul>
<ul class="uk-switcher uk-margin company-content">
<li>
<div>
<h3>Slide Title 1</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam sed facere voluptates, repudiandae atque, rem quia recusandae nisi ducimus voluptatem quo explicabo omnis.</p>
</div>
</li>
<li>
<div>
<h3>Slide Title 2</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam sed facere voluptates, repudiandae atque, rem quia recusandae nisi ducimus voluptatem quo explicabo omnis.</p>
</div>
</li>
...
...
</ul>
</div>
这是悬停或单击时在滑块下方切换内容的jquery
var $switch = UIkit.switcher('.uk-subnav', { animation: 'uk-animation-fade', swiping: false });
$('.uk-slider-items li').bind('click mouseover',function(event){
var idVal = $(this).index();
$switch.show(idVal);
});
解决方案
推荐阅读
- c++ - 从 C++ DLL 调用 Delphi 方法
- javascript - 如何在nodejs中提交表单时获取textarea的值
- python - Python HTTPS POST 请求(到 API)响应,状态为 200,但 API 文档中未生成数据
- android - 如何不更改android中不同屏幕的文本大小
- php - Nginx 重写 wordpress url 以使用自定义目录
- sql - 有没有办法让总和窗口函数不通过分区逐步求和?
- c# - c#中继承同一个接口得到的类似代码有没有好的解耦方法?
- android - 使用 Install Referrer-Android 获取 (not%20set) UTM 参数
- python - 量化 TensorFlow 图以进行推理
- php - 请告诉这个mysql查询中的错误