SoFunction
Updated on 2025-04-08

Based on bootstrap, it realizes the effect of advertising carousel with pictures and text

The code looks like this:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>based onbootstrapCarousel ad page，With pictures and text</title>
<link rel="stylesheet" href=" ///bootstrap/3.1.1/css/">
<style>
.carousel {
height: 500px;
}
.carousel .item {
height: 500px;
}
.carousel .item img {
width: 100%;
}
</style>
</head>
<body>
<!-- Carousel ads -->
<div  class="carousel slide" data-ride="carousel">
<!-- Dot button -->
<ol class="carousel-indicators">
<li data-target="#LBbox" data-slide-to="0" class="active"></li>
<li data-target="#LBbox" data-slide-to="1"></li>
</ol>
<!-- Carousel content -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/" alt="1 slide">
<div class="carousel-caption">
<h1>Fourth Generation Intel Core processor</h1>
<p>Whatever the mission，Equipped Intel HD Graphics 5000 图形processor的Fourth Generation Intel Core processor都能应对自如。</p>
<p>
&lt;a href="#" class="btn btn-lg btn-primary" role="button">Click me to download</a>&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="item"&gt;
&lt;img src="/" alt="2 slide"&gt;
&lt;div class="carousel-caption"&gt;
&lt;h1&gt;MacBook Air&lt;/h1&gt;
&lt;p&gt;With a new generation 802.11ac technology，MacBook Air make Wi-Fi Speed ​​exceeds the limit。&lt;/p&gt;
&lt;p&gt;
&lt;a href="#" class="btn btn-lg btn-primary" role="button">Click me to download</a>&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Left button --&gt;
&lt;a href="#LBbox" class="left carousel-control" role="button" data-slide="prev"&gt;
&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
&lt;span class="sr-only"&gt;Previous page&lt;/span&gt;
&lt;/a&gt;
&lt;!-- Right button --&gt;
&lt;a href="#LBbox" class="right carousel-control" role="button" data-slide="next"&gt;
&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
&lt;span class="sr-only"&gt;Next page&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;script src="/jquery/1.11.1/"&gt;&lt;/script&gt;
&lt;script src="/bootstrap/3.2.0/js/"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

The above is what the editor introduces to you to realize the effect of advertising carousels with pictures and text based on bootstrap. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!