如何去特定的幻灯片在左边雪佛龙点击引导旋转木马,而不是直接去上一张幻灯片
how to go to specific slide on leftChevron click in bootstrap carousel instead of going to immediate previous slide?
我正在使用旋转木马控件。现在我还维护一个java脚本集合和数组如下:下面是旋转木马在UI中的呈现方式:
<div class="carousel slide " id="divFormCarousel" data-interval="false" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" onclick="SetSaveAndNext()" data-target="#divFormCarousel" data-slide-to="0"></li>
<li onclick="SetSaveAndNext()" data-target="#divFormCarousel" data-slide-to="1"></li>
<li onclick="SetFinish()" data-target="#divFormCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="101">
<form id="frmConsentForm+101" method="post" data-url="/Forms/Save">
</form>
</div>
<div class="item" id="102">
<form id="frmConsentForm+102" method="post" data-url="/Forms/Save">
</form>
</div>
<div class="item" id="404">
<form id="frmConsentForm+404" method="post" data-url="/Forms/Save"></form>
</div>
</div>
<a class="left carousel-control hidden-xs hidden-sm hidden-md hidden-lg" id="leftChevron" style="margin-left: -90px; filter: none;" href="#divPatientFormCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="right carousel-control hidden-xs hidden-sm hidden-md hidden-lg" id="rightChevron" style="margin-right: -90px; filter: none;" href="#divPatientFormCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
现在我们知道:
$('#leftChevron').trigger('click'); //This actually helps us to slide to the previous slide, which s working fine!
但是我想在这里实现的是基于下面定义的数组和集合,假设我在幻灯片id 404,当我点击上一个按钮(内部调用leftChevron点击),我想重定向到该幻灯片(符合一些标准,下面定义),而不是确切的上一个幻灯片。标准是:当我单击btnPrevious时,根据集合和数组重定向到forms[id]=0而不是1的表单。
forms ={};//存储formid及其对应状态的集合。就像forms[101]="0" forms[102]="1" forms[404]="0"Formsarray =[];//存储formid,如Formsarray[0]=101。formsarray [1] = 102, formsarray [2] = 404
基本上,使用JQuery,我认为这应该是一个简单的修复,所以任何帮助将高度赞赏。
Bootstrap Carousel有一个API。如果您知道需要滚动到哪个页面,只需调用:
$div.carousel(pageNumber);
(用jQuery选择器替换$div)
顺便说一下,除了点击#leftChevron
或#rightChevron
,您还可以使用正确的API方法:
$div.carousel('prev');
和
$div.carousel('next');
相关文章:
- jm按下停止步骤进入滚动的下一张幻灯片
- 当 Flickity 到达下一张或上一张幻灯片时的事件
- 为什么bxSlider会打断我在最后一张幻灯片和第一张幻灯片之间的转换
- 引导程序3转盘-随机选择下一张幻灯片
- 如何在最后一张幻灯片上停止动画
- 完整的背景图片幻灯片jquery,想让幻灯片的最后一张图片可以点击
- Basic jQuery Slider中上一张/下一张幻灯片的自定义链接触发器
- 指向html5库最后一张幻灯片后的html页面
- jQuery 循环 如果只有一张幻灯片,则隐藏上一个/下一个导航
- 如何停止幻灯片放映隐藏文本和图像跳到顶部,而下一张幻灯片进来
- jQuery幻灯片,转到上一张图片
- iOS 滑块默认为最后一张幻灯片
- 光滑的滑块删除最后一张幻灯片,如果 winWidth < 500
- Javascript幻灯片在节目开始时快速出现最后一张图像
- BX滑块滑块滑块最后一张幻灯片总是隐藏某些部分
- 滑入下一张柔性滑块幻灯片后,css 动画不起作用
- 如何在显示前在幻灯片放映中预加载下一张幻灯片
- 滑块中显示下一张幻灯片的链接.为什么
- 如何获取最后一张和第一张幻灯片以相应地激活或禁用下一个和上一个按钮
- 幻灯片放映-将幻灯片链接到URL,仅适用于最后一张幻灯片