The Bootstrap Carousel plug-in is a flexible, responsive way to add sliders to a site. In addition, the content is flexible enough to be an image, inline frame, video, or whatever type of content you want to place.
Use Bootstrap's Carousel plug-in to add sliders to the site, which can be images, inline frames, videos, or anything else, using a carousel plug-in to introduce Bootstrap.min.js.
First to show you the effect of the picture, if you feel good, please refer to the implementation code.
The effect diagram looks like this:
The key code is as follows:
<div id= "Carousel-example-generic" class= "Carousel Slide" data-ride= "Carousel" > <!-Carousel navigation--> <ol " 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> <!-Carousel Project--> <div class=" Carousel-inner "role=" ListBox > <div class= "Item Active" > < Div class= "carousel-caption" > Ffffffff </div> </div> <div class= "Item" > <div class=" carousel-caption "> Xxxxxxxxxxxxxxxx </div> </div> <div class=" Item " > <div class= "carousel-caption" > Mmmmmmmmmmmm </div> </ div> </div> <!-Carousel navigation--> <a class= "left Carousel-control" href= "#carousEl-example-generic "role=" button "data-slide=" prev "> <span class=" Glyphicon glyphicon-chevron-left "></ span> <span class= "sr-only" >Previous</span> </a> <a class= "right Carousel-control" href= "# Carousel-example-generic "role=" button "data-slide=" Next "> <span class=" Glyphicon glyphicon-chevron-right " ></span> <span class= "sr-only" >Next</span> </a> </div>
The above is a small part of the introduction of the tenth article bootstrap round the use of the full description of the plug-in, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!