एक बार और स्लाइड एक

Question

एक और सवाल तक कम से बूटस्ट्रैप 4 Carousel एकाधिक फ्रेम बूटस्ट्रैप 3 के लिए एक ही जरूरत (that question) पर कहा गया था लेकिन प्रस्तावित समाधान बूटस्ट्रैप 4. साथ काम नहीं करते

इस पोस्ट की छवि बताते हैं बहुत अच्छा मैं क्या चाहता हूँ।

और भी अधिक this bootply।

मैं इसे बूटस्ट्रैप 4 के साथ कैसे प्राप्त कर सकता हूं?

Answer 1

$('#carousel-example-generic').on('slid.bs.carousel', function() { 
 
     $(".carousel-item.active:nth-child(" + ($(".carousel-inner .carousel-item").length -1) + ") + .carousel-item").insertBefore($(".carousel-item:first-child")); 
 
     $(".carousel-item.active:last-child").insertBefore($(".carousel-item:first-child")); 
 
    });

 .carousel-item.active, 
 
     .carousel-item.active + .carousel-item, 
 
     .carousel-item.active + .carousel-item + .carousel-item { 
 
      width: 33.3%; 
 
      display: block; 
 
      float:left; 
 
     }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <h1>Hello, world!</h1> 
 
<div class="container"> 
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="carousel-item active"> 
 
     <img data-src="holder.js/300x200?text=1"> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img data-src="holder.js/300x200?text=2"> 
 
    </div>  
 
    <div class="carousel-item"> 
 
     <img data-src="holder.js/300x200?text=3"> 
 
    </div>  
 
    <div class="carousel-item"> 
 
     <img data-src="holder.js/300x200?text=4"> 
 
    </div>  
 
    <div class="carousel-item"> 
 
     <img data-src="holder.js/300x200?text=5"> 
 
    </div>  
 
    <div class="carousel-item"> 
 
     <img data-src="holder.js/300x200?text=6"> 
 
    </div>  
 
    <div class="carousel-item"> 
 
     <img data-src="holder.js/300x200?text=7"> 
 
    </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="icon-prev" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="icon-next" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 
    
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>

Answer 2

अद्यतन 2017

4 बूटस्ट्रैप के लिए Bootstrap 4 docs पर एक नज़र मार्कअप ले लो, और बदलने के लिए:

http://bootply.com/SObwIezDyx

बूटस्ट्रैप 4 बीटा विकल्प: https://stackoverflow.com/a/20008623/171456