How to quote bootstrap carousel image-Bootstrap Tutorial-php.cn

How to quote bootstrap carousel image

angryTom

Release： 2019-07-20 13:55:37

Original

4172 people have browsed it

How to quote bootstrap carousel image

Recommended tutorial: Bootstrap tutorial

Tips: These functions require plug-in support. Since it is bootstrap, of course, the introduction of its css and js files is indispensable. In addition, there is also JQuery.js, their versions are all above 3.0 That’s it! !

1. Directly reference the class in bootstrapcarousel slideMake a div container;

2.Add the class to the ul tagcarousel-indicatorsMake a corresponding number of image selectors, just those little dots!

3. Make another div container and add the class carousel-inner to wrap the image;

##4. Next, create each picture item and wrap it in the div class item. If you need to add other descriptions to the pictures, continue to add the div class carousel-caption Add text description;

5. The last step is to add left and right controls to the image. Add the label class left carousel-control and class right-carousel-control to the a tag to set the left and right respectively. Control keys;

Select the id to jump

#carousel-example-generic, data-slide="left"/"right";

Add the picture icon displayed by the left and right control keys. This can refer to the classes

glyphicon glyphicon-chevron-right and glyphicon glyphicon-chevron-left, yourself You can do it too, trust your own aesthetic -^ .^-

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 	
		<!-- Indicators --> <ul 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> 
		</ul> <!-- Wrapper for slides --> 
		<div class="carousel-inner" role="listbox"> 
			<div class="item active">
				<img  class="img-responsive" src="img/0e4eb42dd4acd3aff05b1fee14820af0.jpg"/ alt="How to quote bootstrap carousel image" >
				<div class="carousel-caption"> 
					<h1>轮播1的标题</h1> 
					<p>这里是轮播图1的说明</p> 
				</div> 
			</div> 
			<div class="item">
				<img  class="img-responsive" src="img/2fc4c4554273a93933af18f8a4239275.jpg"/ alt="How to quote bootstrap carousel image" >
			<div class="carousel-caption"> 
				<h1>轮播2的标题</h1> 
				<p>这里是轮播图2的说明</p>
			</div>
			</div> 
			<div class="item">
				<img  class="img-responsive" src="img/28058504efd74a112e721e048e38aeb9.jpg"/ alt="How to quote bootstrap carousel image" >
			<div class="carousel-caption">
				<h1>轮播3的标题</h1>
				<p>这里是轮播图3的说明</p>
			</div> 
			</div> 
		</div> <!-- Controls --> 
		<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
			<span class="glyphicon glyphicon-chevron-left"></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"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>

Copy after login

Rendering:

How to quote bootstrap carousel image

The above is the detailed content of How to quote bootstrap carousel image. For more information, please follow other related articles on the PHP Chinese website!