The main content of this article is to make a carousel picture below the navigation bar to automatically play the latest important news for your reference. The specific content is as follows
1. Responsive carousel diagram
//Responsive carousel diagram
<div id="myCarousel"> <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> <div> <div style="background:#223240;"> <a href="#"><img src="img/slide1.png"></a> </div> <div style="background:#F5E4DC;"> <a href="#"><img src="img/slide2.png"></a> </div> <div style="background:#DE2A2D;"> <a href="#"><img src="img/slide3.png"></a> </div> </div> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a></div>
//The required jQuery control
$('#myCarousel').carousel({ //Set automatic playback/2 seconds interval: 3000,});//Adjust the carousel arrow position
$('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(2).height(); $('.carousel-inner img').eq(2).height(); $('.carousel-inner img').eq(2).height(); $('.carousel-control').css('line-height', $height + 'px');});// Required CSS
a:focus { outline: none;}.navbar-brand { padding: 0;}#myCarousel { margin: 50px 0 0 0;}.carousel-inner .item img { margin: 0 auto;}.carousel-control { font-size: 100px;}If you still want to learn in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial Bootstrap practical tutorial
Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.