Quickly use Bootstrap to build a conveyor belt_javascript skills

Bootstrap introduction

Bootstrap is a framework that is widely used in front-end development. It was first used as an internal tool at Twitter. After being open sourced, it quickly gained recognition from all parties. This book is written based on the latest Bootstrap 3. After a brief introduction to installation and configuration, it goes straight to the topic and discusses the most representative personal work sites, WordPress themes, corporate websites, e-commerce websites, and single-page marketing websites. application cases, combined with these cases, the usage methods and techniques of Bootstrap and LESS are analyzed in detail.

Having said so much, it is all off topic. Let’s take a look at the code of bootstrap to build the conveyor belt.

Progress indicator

<div id="homepage-feature" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
<li data-target="#homepage-feature" data-slide-to="1" ></li>
<li data-target="#homepage-feature" data-slide-to="2" ></li>
<li data-target="#homepage-feature" data-slide-to="3" ></li>
</ol>

The data-target attribute of the progress indicator must use the ID homepage-featureJS plug-in of the conveyor belt to add the active class to the conveyor belt.

<div class="carousel-inner">
<div class="item active">
<img >
</div>
<div class="item ">
<img >
</div>
...
</div>

Then there is a button to display the previous and next

<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
<span class="glyphicon glyphicon-chevron-left"></span>
</a></div>

That’s it. The above content is the knowledge about building conveyor belts with Bootstrap introduced by the editor. I hope it will be helpful to you. I would also like to thank you all for your support of the Script House website!