The image carousel effect can be seen in the web, and many people also call it slideshow. The main effect of display is to play multiple pictures in a cycle, playing from right to left. Playing it will pause when the mouse hovers over the picture. If the mouse hovers over or clicks the dot in the lower right corner, the corresponding picture will be displayed.
This image carousel effect is implemented in the Bootstrap framework through the Carousel plug-in
Screenshot of the demo effect:
Code:
<!DOCTYPE html><html><head><meta charset="utf-8"><!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">--><link rel="stylesheet" href="css/bootstrap.min.css" /><style>body {padding: 10px;margin: 10px;}</style></head><body><div id="myCarousel"><!--Step 1: Design containers for carousel pictures. --><!-- #slidershow layer adds slide style, and use pictures and pictures to switch effects to make it smooth --><ol><!--Step 2: Design a carousel picture counter. --><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><div><!--Step 3: Design the carousel picture playback area and use the carousel-inner style to control--><div><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"><div><h4>Title 1</h4><p>Image 1</p></div><div><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"><div><h4>Title 2/h4><p>Image 2</p></div><div><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"><div><h4>Title 2/h4><p>Image 2</p></div><div><img src="http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"><div><h4>Title Three</h4><p>Introduction to the content of the picture three</p></div></div><!--Step 4: Design a carousel picture controller. Play the left carousel-control forward and the controller that plays backward --><a href="#myCarousel" data-slide="prev">‹<!--<a href="#slidershow" role="button" data-slide="prev">--><span></span></a><a href="#myCarousel" data-slide="next">›<span></span><!--<a href="#carousel-example-generic" data-slide="prev"><span></span></a><a href="#carousel-example-generic" data-slide="next"><span></span></a>--></div><script>$('.carousel').carousel()</script><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>--><!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>--></body></html> /*bootstrap.css file line 5835 to line 5863*/.carousel-indicators {position: absolute; /*Absolute positioning of the entire counting area*/bottom: 10px; /*10px from the bottom of the container carousel*/z-index: 15; /*Set its level on the Z axis*//*Center the entire counting area at the level*/left: 50%;width: 60%;padding-left: 0;margin-left: -30%;text-align: center;list-style: none;}.carousel-indicators li {display: inline-block;width: 10px;height: 10px;margin: 1px;text-indent: -999px;cursor: pointer;background-color: #000 /9;background-color: rgba(0, 0, 0, 0);border: 1px solid #fff;border-radius: 10px;}/*Set the current state style*/.carousel-indicators .active {width: 12px;height: 12px;margin: 0;background-color: #ffff;}Picture carousel--playing of declarative touch carousel
There are two ways to trigger the carousel diagram, one is declarative, and the other is JavaScript. First, let’s look at the declarative method.
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:
•data-ride property: Take the value carousel and define it on carousel.
•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 "#slidershow" and define it on each li of the carousel counter.
•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 the container carousel.
•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.
In addition to data-ride="carousel", data-slide, and data-slide-to, the carousel component also supports three other custom properties:
| Attribute name | type | default value | describe |
| data-interval | number | 5000 | Waiting time (milliseconds) for slide rotation. If false, the carousel will not start the loop automatically |
| data-pause | string | hover | The default mouse is suspended in the slide area and playback will start when leaving. |
| data-wrap | Boolean value | true | Is the carousel continuous loop |
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>
The above three attributes can be defined on container elements or on identifiers (or left and right control links), but the latter definition has a higher priority.
Image carousel--JavaScript trigger method
The three statements data-ride="carousel" and data-slide="prev" and data-slide="next" have been removed. Let's use JS code to implement the functions of "automatic picture carousel" and "forward and backward buttons".
Use JS to implement the functions of "automatic picture carousel" and "forward and backward buttons"
By default, if the data-ride="carousel" attribute is defined on the carousel container, the carousel image switching effect will be automatically loaded after the page is loaded. If the data-ride attribute is not defined, the carousel image switching can be triggered through the JavaScript method. The specific usage method is as follows:
The code copy is as follows:
$(".carousel").carousel();
You can also specify it by the container ID:
The code copy is as follows:
$("#slidershow").carousel();
Specific parameters can be set in the carousel() method, such as:
| Attribute name | type | default value | describe |
| interval | number | 5000 | Waiting time (milliseconds) for slide rotation. If false, the carousel will not start the loop automatically |
| pause | string | hover | The default mouse is suspended in the slide area and playback will start when leaving. |
| wrap | Boolean value | true | Is the carousel continuous loop |
When using it, you can pass the relevant parameters of the status when initializing the plug-in, such as:
$("#slidershow").carousel({interval: 3000});In fact, when we configure parameters for the carousel() method, the carousel effect can be automatically switched. However, the carousel plug-in in the Bootstrap framework also provides users with several special calling methods, as follows:
•.carousel("cycle"): plays from left to right;
•.carousel("pause"): stop loop playback;
•.carousel("number"): Loop to the specified frame, the subscript starts from 0, similar to an array;
•.carousel("prev"): Return to the previous frame;
•.carousel("next"): Next frame
For example, the previous call method, the forward and back buttons cannot work properly. In fact, they can be used to work normally through the .carousel("prev") and .carousel("next") methods. The code is as follows:
$(function(){$("#slidershow").carousel({interval:2000});$("#slidershow a.left").click(function(){$(".carousel").carousel("prev");});$("#slidershow a.right").click(function(){$(".carousel").carousel("next");});}); <!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><style>body {padding: 10px;margin: 10px;}</style></head><body><div id="carousel-example" data-ride="carousel"><!-- Indicators --><ol><li data-target="#carousel-example" data-slide-to="0"></li><li data-target="#carousel-example" data-slide-to="1"></li><li data-target="#carousel-example" data-slide-to="1"></li><li data-target="#carousel-example" data-slide-to="1"></li><li data-target="#carousel-example" data-slide-to="2"></li></ol><!-- Wrapper for slides --><div><div><img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" /><div>...</div></div><div><img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" /><div>...</div></div><div><img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" /><div>...</div></div><!-- Controls --><a href="#carousel-example" data-slide="prev"><span></span></a><a href="#carousel-example" data-slide="next"><span></span></a></div><!--<script>$(function() {$('.carousel').carousel();});</script>--><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>--><!--<script src="http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>--></body></html>Wulin.com recommends bootstrap related topics:
BootStrap component operation skills
Summary of BootStrap related knowledge
The above is the detailed explanation of the use examples of Bootstrap carousel rotation diagram introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!