Examples of bootstrap image carousel effect

If we need to add the effect of slide and picture rotation to the website in the past, in the early years, we used the flash focus map when he was working on the enterprise website. Later, he used jQuery slide. Although he usually accumulated several commonly used effects on hand, after all, there are many such instance codes on the Internet. However, if we use the bootstrap framework, it will be easier, because the built-in carousel in the script framework can be implemented quickly.

Of course, it can’t be said that the effect of jQuery slides is not good. If we need to use rich and complex slides, we still need custom functions, and the default bootstrap comes with a simple slide image carousel effect. If we need to implement the entry-level simple functions, we can directly refer to the built-in default effects. Here are two simple effects of carousel.

First, it comes with official documents

<div id=”carousel-example-generic” class=”carousel slide” data-ride=”carousel”>
<!– Indicators –>
<ol class=”carousel-indicators”>
<li data-target=”#carousel-example-generic” data-slide-to=”0″ class=”active”></li>
<li data-target=”#carousel-example-generic” data-slide-to=”1″></li>
<li data-target=”#carousel-example-generic” data-slide-to=”2″></li>
</ol>

<!– Wrapper for slides –>
<div class=”carousel-inner” role=”listbox”>
<div class=”item active”>
<img src=”…” alt=”…”>
<div class=”carousel-caption”>

</div>
</div>
<div class=”item”>
<img src=”…” alt=”…”>
<div class=”carousel-caption”>

</div>
</div>

</div>

<!– Controls –>
<a class=”left carousel-control” href=”#carousel-example-generic” role=”button” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
<span class=”sr-only”>Previous</span>
</a>
<a class=”right carousel-control” href=”#carousel-example-generic” role=”button” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>

Second, runoob has no text description

<div id=”myCarousel” class=”carousel slide”>
≪! — carousel index — >< br > in the future<ol 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>
</ol>
≪! — carousel project<div class=”carousel-inner”>
<div class=”item active”>
<img src=”slide1.png” alt=”First slide”>
</div>
<div class=”item”>
<img src=”slide2.png” alt=”Second slide”>
</div>
<div class=”item”>
<img src=”slide3.png” alt=”Third slide”>
</div>
</div>
≪! — carousel navigation<a class=”carousel-control left” href=”#myCarousel”
data-slide=”prev”>&lsaquo;
</a>
<a class=”carousel-control right” href=”#myCarousel”
data-slide=”next”>&rsaquo;
</a>
</div>

Images need to be defined by themselves, and CSS styles can be defined by themselves.

Third, there is a text description version

<div id=”myCarousel” class=”carousel slide”>
≪! — carousel index — >< br > in the future<ol 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>
</ol>
≪! — carousel project<div class=”carousel-inner”>
<div class=”item active”>
<img src=”slide1.png” alt=”First slide”>
≪ div class = “carousel caption” >Title 1 <& div >< br > 1</div>
<div class=”item”>
<img src=”slide2.png” alt=”Second slide”>
&< br > Title 2</div>
<div class=”item”>
<img src=”slide3.png” alt=”Third slide”>
&< br > title 3</div>
</div>
≪! — carousel navigation<a class=”carousel-control left” href=”#myCarousel”
data-slide=”prev”>&lsaquo;
</a>
<a class=”carousel-control right” href=”#myCarousel”
data-slide=”next”>&rsaquo;
</a>
</div>

The title of the text can be selected, and you can modify what you need.

Content reference:

http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

https://v3.bootcss.com/javascript/#carousel

Related Article
Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

What technology is PHP composer?

If you are a programmer, you are likely to find that the wheel of technology update is too fast for Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image