It has always been the goal of making a small front-end to make different and beautiful effects. We all hope to make different pages and cool pages, but sometimes the technology can’t keep up, and we can only imitate and see how others do it. Yes, in fact, the process of imitation is also a process of learning. Being able to understand other people's code is also an improvement. Today, I will briefly describe the effect of using the bootStrapUI framework to make a picture carousel.
practicality
There are many big websites, such as Taobao, Jingdong, csdn, etc...
Effect preview
Click to view (image carousel in my website)
If you have read it, we will simply do that effect today. I read the official document, sorry for the bad writing.
Step 1: Draw the container
<div id="slidershow" class="carousel slide" data-ride="carousel" style="width: 50%;height: 50%; margin-left:auto; margin-right:auto;"></div>
Step 2: Make picture subscripts (including the playback order of pictures)
Fill in the following code in the previous div:
<!-- Set the order of image rotation--> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0" ></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> </ol>
ps: There are a few pictures, write a few li
Step 3: Set the carousel image
Fill in the following code below the rotation order (the image path is set by yourself):
<!--Set carousel pictures--> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="../images/cat1.jpg" alt="cat1"></a> </div> <div class="item"> <a href="##"><img src="../images/cat2.jpg" alt="cat2"></a> </div> <div class="item"> <a href="##"><img src="../images/cat3.jpg" alt="cat3"></a> </div> </div>
ps: There are a few pictures, write a few item divs
Step 4: Set the properties of the left and right click changes
Fill in the following code below the settings image:
<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev" > <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
Finally, introduce several properties of bootStrap
data-interval = 2000 //Set the time for automatic change (milliseconds)
data-pause = "hover" //Mouse up will stop the rotation. The default is hover
data-wrap="true" //Set whether to rotate the Boolean type, true or false
data-slide-to="1" //Set whether the dots below can be directly clicked to switch
data-slide="next" //Set whether the area is clicked to perform forward or backward operation prev next
Complete code (copy and use directly)
It looks messy, here is the complete code (it's ok to replace the picture):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="slidershow" class="carousel slide" data-ride="carousel" data-interval = 2000 data-pause = "hover" data-wrap="true" style="margin-top: 5rem; width: 50%;height: 50%; margin-left:auto; margin-right:auto;"> <!-- Set the order of image rotation--> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0" ></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> </ol> <!--Set carousel pictures--> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="../images/cat1.jpg" alt="cat1"></a> </div> <div class="item"> <a href="##"><img src="../images/cat2.jpg" alt="cat2"></a> </div> <div class="item"> <a href="##"><img src="../images/cat3.jpg" alt="cat3"></a> </div> </div> <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev" > <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </body> </html>
Some people say that I have been using my own js and css, so you still have to find them. This time I use CDN, and you can use it directly, provided that your computer is connected to the Internet.
Some people say they don't want to do this, and want to use js to control the line, yes, the code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="slidershow" class="carousel slide" data-ride="carousel" data-pause = "hover" data-wrap="true" style="margin-top: 5rem; width: 50%;height: 50%; margin-left:auto; margin-right:auto;"> <!-- Set the order of image rotation--> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> </ol> <!-- Set carousel image--> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="../images/cat1.jpg" alt=""></a> </div> <div class="item"> <a href="##"><img src="../images/cat2.jpg" alt=""></a> </div> <div class="item"> <a href="##"><img src="../images/cat3.jpg" alt=""></a> </div> </div> <a class="left carousel-control" href="#slidershow" role="button"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </body> </html>
<script type="text/javascript">
$(function(){
$("#slidershow").carousel({
interval:1000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
});
</script>
The effect is the same, if you like it, you can pay attention.
