Sql server, .net and c# video tutorial: Bootstrap image carousel

Suggested Video Tutorials
Part 48 - Bootstrap scrollspy not working
Part 49 - Bootstrap scrollspy vertical menu
Part 50 - Bootstrap affix plugin

In this video we will discuss creating an image carousel using the Bootstrap Carousel plugin

bootstrap image carousel

Bootstrap carousel classes

Class	Description
carousel	Creates a carousel
slide	Adds sliding animation effect when transitioning from one item to the other
carousel-inner	This class is applied on the element that contains all the slides of the carousel
item	Specifies the conent of each slide. Content can be text and images
carousel-caption	Specifies a caption for the carousel
carousel-indicators	Adds the dot indicators at the bottom of each slide which indicates the current slide the user is viewing and the the total number of slides
carousel-control	Adds the left or right bottons on the carousel to go back or forward one slide. To add left button, use left class along with carousel-control class and to add right button use right class along with carousel-control

Bootstrap carousel attributes

Attribute	Description
data-interval	Specifies the time delay in milli-seconds for transitioning from one slide to another. Set this attribute to false if you do not want automatic sliding
data-pause	The default value is hover. Pauses from transitioning to the next slide on hover. Set this attribute to false to stop the ability to pause on hover
data-wrap	The default value is true which means the carousel transitions thru all the slides without stopping at the last slide. To stop at the last slides set this attribute to false
data-ride="carousel"	activates the carousel. The carousel can also be manually activated by using JavaScript $("#carousel_Id").carousel();
data-slide-to	Specifies which slide to go to when clicked. Slide index is ZERO based
data-slide	This attribute is added to the carousel controls (LEFT and Right buttons). For the left button the value is "prev" and for the right button the value is "next"

Here is the example used in the demo

<!doctype html>

<html>

<head>

<title>Bootstrap tutorial for begineers</title>

</head>

<body>

<div id="imageCarousel" class="carousel slide" data-interval="2000"

data-ride="carousel" data-pause="hover" data-wrap="true">

</ol>

<h3>Desert</h3>

<p>Desert Image Description</p>

</div>

<h3>Jellyfish</h3>

<p>Jellyfish Image Description</p>

</div>

<h3>Lighthouse</h3>

<p>Lighthouse Image Description</p>

</div>

<h3>Penguins</h3>

<p>Penguins Image Description</p>

</div>

</a>

</a>

</div>

</script>

</body>

</html>