I have shared three Bootstrap picture carousel effects, and I believe there is always one you are satisfied with!
The first effect: Bootstrap simple carousel
<!DOCTYPE html><html><head> <title>Bootstrap instance- Simple Carousel plug-in</title> <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="/jquery/2.0.0/jquery.min.js"></script> <script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script><body><div id="myCarousel"> <!-- Carousel Metrics--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a></div> </body></html>
The second type: carousel with title (manual)
<!DOCTYPE html><html><head> <title>Bootstrap instance - Title of Carousel plugin</title> <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="/jquery/2.0.0/jquery.min.js"></script> <script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script><body><div id="myCarousel"> <!-- Carousel Metrics--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> <div>Title 1</div> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> <div>Title 2</div> </div> <div> <img src="/wp-content/uploads/2014/07/slide3.png"> <div>Title 3</div> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a></div> </body></html>
The third type: JS control automatic carousel
<!DOCTYPE html><html><head> <title>BootstrapJS control carousel</title> <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="/jquery/2.0.0/jquery.min.js"></script> <script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script><body><div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0" ></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a> <!-- Control Button--> <div style="text-align:center;"> <input type="button" value="Start"> <input type="button" value="Pause"> <input type="button" value="Previous Slide"> <input type="button" value="Next Slide"> <input type="button" value="Slide 1"> <input type="button" value="Slide 2"> <input type="button" value="Slide 3"> </div></div> <script> $(function(){ // Initialize carousel$(".start-slide").click(function(){ $("#myCarousel").carousel('cycle'); }); // Stop carousel$(".pause-slide").click(function(){ $("#myCarousel").carousel('pause'); }); // Loop carousel to the previous project $(".prev-slide").click(function(){ $("#myCarousel").carousel('prev'); }); // Loop carousel to the next project $(".next-slide").click(function(){ $("#myCarousel").carousel('next'); }); // Loop carousel to a specific frame $(".slide-one").click(function(){ $("#myCarousel").carousel(0); }); $(".slide-two").click(function(){ $("#myCarousel").carousel(1); }); $(".slide-three").click(function(){ $("#myCarousel").carousel(2); }); }); });</script></body></html>Specific parameters can be set in the carousel() method, such as:
When using it, you can pass the relevant parameters of the status when initializing the plug-in, such as:
$("#slidershow").carousel({ interval: 3000});The carousel plug-in in the Bootstrap framework also provides users with several special calling methods, as follows:
.carousel("cycle"): play from left to right;
.carousel("pause"): stop loop playback;
.carousel("number"): loops to the specified frame, the subscript starts from 0, similar to an array;
.carousel("prev"): Return to the previous frame;
.carousel("next"): Next frame
Use the data attribute to control the carousel:
<!DOCTYPE html><html><head> <title>Bootstrap instance - Carousel plug-in method</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head><body><div id="myCarousel" data-wrap="true" data-interval="1000"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0" > </li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel project --> <div> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel navigation --> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a> <!-- Control Button--> <div style="text-align:center;"> <input type="button" value="Start"> <input type="button" value="Pause"> <input type="button" value="Previous Slide"> <input type="button" value="Next Slide"> <input type="button" value="Slide 1"> <input type="button" value="Slide 2"> <input type="button" value="Slide 3"> </div></div> </body></html>
The declarative method is implemented by defining the data attribute, which can easily control the position of the carousel. It mainly includes the following types:
1. data-ride property: Take the value carousel and define it on carousel.
2. data-target property: Take the ID name or other style identifier defined by the value carousel. As shown in the previous example, take the value as "#slidershow" and define it on each li of the carousel counter.
3. data-slide attribute: The values include prev, next, prev means scrolling backward, and next means scrolling forward. This property value is also defined on the a link of the carousel controller, and the controller href value is set to the ID name or other style identifier of container 4. carousel.
5. data-slide-to attribute: used to pass the subscript of a certain frame, such as data-slide-to="2", which can be directly redirected to this specified frame (the subscript starts from 0), and is also defined on each li of the carousel counter.
Here you need to note that you can add slide style to the #slidershow layer, and use the image and image switching effect to be smooth.
<div id="slidershow" data-ride="carousel"> ...</div>
In addition to data-ride="carousel", data-slide, and data-slide-to, the carousel component also supports three other custom properties:
The following code implements "carousel does not loop continuously" and "carousel time interval is 1 second".
<div id="slidershow" data-ride="carousel" data-wrap="false" data-interval="1000"> ....</div>
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap Table usage tutorial
Bootstrap plug-in usage tutorial
Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
The above is a detailed introduction to javascript picture carousel. I hope this article will be helpful to everyone in learning javascript programming.