Wie halte ich ein Bootstrap-Karussell davon ab, zum nächsten Schieberegler zu gehen, bis ein bestimmtes Ereignis auf dem vorherigen Schieberegler auftritt

Question

Dies ist mein HTML- und JavaScript-Code.

<div id = "myCarousel" class = "carousel slide" data-interval="false"> 

    <!-- Carousel indicators --> 
    <ol class = "carousel-indicators"> 
     <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li> 
     <li data-target = "#myCarousel" data-slide-to = "1"></li> 
     <li data-target = "#myCarousel" data-slide-to = "2"></li> 
     <li data-target = "#myCarousel" data-slide-to = "3"></li> 
     <li data-target = "#myCarousel" data-slide-to = "4"></li> 
     <li data-target = "#myCarousel" data-slide-to = "5"></li> 
     <li data-target = "#myCarousel" data-slide-to = "6"></li> 
     <li data-target = "#myCarousel" data-slide-to = "7"></li> 
     <li data-target = "#myCarousel" data-slide-to = "8"></li> 
     <li data-target = "#myCarousel" data-slide-to = "9"></li> 
     <li data-target = "#myCarousel" data-slide-to = "10"></li> 
     <li data-target = "#myCarousel" data-slide-to = "11"></li> 
     <li data-target = "#myCarousel" data-slide-to = "12"></li> 
     <li data-target = "#myCarousel" data-slide-to = "13"></li> 
     <li data-target = "#myCarousel" data-slide-to = "14"></li> 
     <li data-target = "#myCarousel" data-slide-to = "15"></li> 
     <li data-target = "#myCarousel" data-slide-to = "16"></li> 
     <li data-target = "#myCarousel" data-slide-to = "17"></li> 
     <li data-target = "#myCarousel" data-slide-to = "18"></li> 
     <li data-target = "#myCarousel" data-slide-to = "19"></li> 
     <li data-target = "#myCarousel" data-slide-to = "20"></li> 


    </ol> 


    <!-- Carousel items --> 
    <div class = "carousel-inner"> 
     <div class = "item active"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide1.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
      <img src = "includes/modules/sliders/Business_planning_for_success/Slide2.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
      <img src = "includes/modules/sliders/Business_planning_for_success/Slide3.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide4.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide5.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide6.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide7.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide8.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide9.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide10.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide11.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide12.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide13.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide14.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide15.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide16.JPG" alt = "slide"> 
     </div> 
     <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide17.JPG" alt = "slide"> 
     </div> 
    <!-- <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide18.JPG" alt = "slide"> 
     </div> --> 

     <!-- <div class = "item"> 
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide20.JPG" alt = "slide"> 
     </div> --> 
    the "questions" slider starts here 
     <div class = "item"> 

       <img src="../../images/top.jpg"> 
       <div class="col-sm-4" style="color:black;"> 
            <div class=""> 
             <div><img src="../../images/Slide18.png" width="300" height="150"></div> 
            </div> 
            <strong>Scenario</strong> 
            <div style="color: #990000;"> 
             <div><p>Siphelele's Sweets produces and sells fudge bars in Alexandra, Johannesburg.</p> 
             <ul> 
             <li>Each fudge bar is sold at R15</li> 
             <li>Her variable costs per fudge bar amount to R5</li> 
             <li>Siphelele's Sweets expects fixed costs of R30 000 for the year ending 31 Dec, 2016</li> 
             </ul> 
             </div> 
            </div> 

           </div> 

       <div class="col-sm-4"> 
       <table width="734" style="margin-left:10px color:black;"> 
       <form name="test1" action="" > 

       <tr><td height="30" width="578"><label>Questions</label></td></tr> 


       <div> 
       <tr><td height="30" width="578"><label>a.How many bars does Siphelele have to sell to break even? 

       </label> 
       <ul class="nostyle"> 
       <li><input name="q2" type="radio" value="2000" /> <label>2000</label></li> 
       <li><input name="q2" type="radio" value="3000" /> <label>3000</label></li> 
       <li><input name="q2" type="radio" value="1500" /> <label>1500</label></li> 
       <li><input name="q2" type="radio" value="250" /> <label>250</label></li> 
       </ul> 
       </td></tr> 
       </div> 
       <div> 
       <tr><td height="30" width="578"><label>b.What is the break even point in sales given your first answer? 


       </label> 
       <ul class="nostyle"> 
       <li><input name="q3" type="radio" value="30000" /> <label>30000</label></li> 
       <li><input name="q3" type="radio" value="3750" /> <label>3750</label></li> 
       <li><input name="q3" type="radio" value="45000" /> <label>45000</label></li> 
       <li><input name="q3" type="radio" value="22500" /> <label>22500</label></li> 
       </ul> 
       </td></tr> 
       </div> 
       <a class="btn" href="javascript:submitForm();">Check</a> 
       </form> 

       </table> 
       </div> 
       <img src="../../images/down.jpg"> 

     </div> 

der nächste Schieber sollte laden, bis nicht die Fragen richtig beantwortet werden

<script language="JavaScript"> 
    function submitForm() 
    { 
     if ((document.test1.q2[0].checked == false)&&(document.test1.q2.value == "")){ 
     alert ("Please answer question a"); 
     return; 
     } 

    if ((document.test1.q2.value != "3000")){ 
     alert ("Oops incorrect answer , please try question a again"); 
     return; 
     } 

    if ((document.test1.q3[0].checked == false)&&(document.test1.q3.value == "")){ 
     alert ("Please answer question b"); 
     return; 
     } 

    if ((document.test1.q3.value != "45000")){ 
     alert ("Oops incorrect answer , please try question b again"); 
     return; 
     } 

     else{  

      $("#myCarousel").carousel('next'); 


    } 

    } 
</script> 



    </div> 

    <!-- Carousel nav --> 
    <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a> 
    <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a> 

    <!-- Controls buttons --> 
    <div style = "text-align:center;"> 
     <input type = "button" class = "btn-sm prev-slide" onclick="slide()" value = "Previous Slide"> 
     <input type = "button" class = "btn-sm next-slide" onclick="slide()" value = "Next Slide"> 

     <script type="text/javascript"> 

     function correct_answer() { 
      // Cycles to the next item 
      $(".next-slide").click(function() { 
      $("#myCarousel").carousel('next'); 
      }); 
     } 

     function slide() { 

     // Cycles to the previous item 
     $(".prev-slide").click(function() { 
     $("#myCarousel").carousel('prev'); 
     }); 

     // Cycles to the next item 
     $(".next-slide").click(function() { 
     $("#myCarousel").carousel('next'); 
     }); 

    }; 
</script> 

gibt es eine Weise, die ich einen Schieber von lodading surpress kann, bis eine Person die Fragen richtig beantwortet?

Answer 1

Zuerst das Auto Radfahren des Karussells deaktivieren:

$("#myCarousel").carousel("pause"); 

und wenn der Benutzer auf dem i.Vj. klickt nächste Tasten, zuerst überprüfen, ob Formular richtig ausgefüllt ist oder nicht:

function isFormOk() { 
    // your logic 
} 

// Cycles to the next item 
$(".next-slide").click(function() { 
    if (isFormOk()) { 
     $("#myCarousel").carousel('next'); 
    } 
});