As we all know, there are many ways to realize the rotation. For example, writing in pure js is time-consuming and laborious, and it is not suitable for all kinds of terminal devices, but bootstrap is different. You only need to write a set of code, which can be used normally, whether on the mobile phone, ipad or PC.
How to create a rotation
Steps:
-
Prepare two or more pictures required for rotation.
-
Prepare css and js of bootstrap and jquery1 10 + js files can be downloaded from the official website.
-
Put the downloaded css file into the css directory of the project, the js file into the js directory, and the picture into the IMG (special picture) folder.
-
Write code in html as follows:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicator -->
<ul 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>
</ul>
<!-- Rotate pictures -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
</div>
</div>
<!-- Left and right switch button -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
Add a description to the rotation picture
Add class = "carousel caption" in each class = "carousel item" to set the description text of the rotation picture:
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
<div class="carousel-caption">
<h3>First picture description title</h3>
<p>Description text!</p>
</div>
</div>
Description of the class used in the above example
.carousel
Create a rotation
. carousel indicators add an indicator for the rotation, that is, the dots at the bottom of the rotation chart. The rotation process can show which chart is currently.
. carousel inner add picture to switch
. carousel item specifies the content of each picture
. carousel control prev add the button on the left, and click it to return to the previous one.
Click the next-control-next button to switch to the next one.
. carousel control prev icon and Used together with carousel control prev, set the button on the left
. carousel control next Icon and Used together with carousel control next, set the button on the right
. slide switches the transition and animation effects of pictures. If you don't need such effects, you can delete this class.
Carousel can be called manually through JavaScript, as follows:
Initialize rotation
$('.carousel').carousel({
interval: 5000,
pause: null,
wrap:true
})
Default value of interval number: 5000 data interval automatically cycles the amount of time delayed between each item. If yes
false, the rotation will not cycle automatically.
pause string default value: "hover" data pause pause the rotation cycle when the mouse enters, and resume the rotation cycle when the mouse leaves.
wrap boolean default value: true. Whether the data wrap rotation circulates continuously.
Useful methods in Carousel plug-in:
<script>
$(function(){
// Initialize rotation
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// Stop the rotation
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
// Cycle to previous project
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// Rotate to the next project
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
// Cycle 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>
Events to be used in the Carousel plug-in. These events can be used as hooks in functions
//Monitor rotation
$('#myCarousel').on('slide.bs.carousel', function (event) {
var $hoder = $('#myCarousel').find('.item'),
$items = $(event.relatedTarget);
//getIndex the index of the current location
var getIndex= $hoder.index($items);
alert("When called slide This event is triggered immediately when the method is instantiated.");
//Do what you want to do
})