如何去特定的幻灯片在左边雪佛龙点击引导旋转木马,而不是直接去上一张幻灯片

how to go to specific slide on leftChevron click in bootstrap carousel instead of going to immediate previous slide?

本文关键字:幻灯片 一张 旋转木马 左边 何去特 龙点击      更新时间:2023-09-26

我正在使用旋转木马控件。现在我还维护一个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');