How to Create Carousel Slider with Bootstrap ~ My Code

There are varied jQuery slideshow plugins ar accessible for athletics through components. however if the net application uses Bootstrap framework, an extra jQuery plugin isn't required to slideshow components sort of a carousel. Bootstrap JS Carousel (carousel.js) provides a simple thanks to implement a carousel slider on the net page.

In this tutorial, we’ll show you the way to form a carousel image slider with Bootstrap. Also, exploitation our example code, you'll be able to extend the Bootstrap carousel practicality and make the various styles of the slider.

Before you start with Bootstrap carousel, embody the Bootstrap and jQuery library initial.

<!-- Compiled and minified Bootstrap CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!-- Minified JS library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Compiled and minified Bootstrap JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

Carousel Slider with Bootstrap

The following example creates a basic carousel slider.


<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

    <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>


    <!-- Wrapper for slides -->

    <div class="carousel-inner">

        <div class="item active">

            <img src="images/image-1.jpg" alt="">

        </div>

        <div class="item">

            <img src="images/image-2.jpeg" alt="">

        </div>

        <div class="item">

            <img src="images/image-3.jpeg" alt="">

        </div>

    </div>


    <!-- Controls -->

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

        <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

        <span class="sr-only">Next</span>

    </a>

Bootstrap Carousel Slider with Captions

The following example creates a carousel slider and adds captions to slides.



<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

    <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>


    <!-- Wrapper for slides -->

    <div class="carousel-inner">

        <div class="item active">

            <img src="images/image-1.jpg" alt="">

            <div class="carousel-caption">

                <h3>First Slide</h3>

                <p>This is that the initial image slide</p>

            </div>

        </div>

 

        <div class="item">

            <img src="images/image-2.jpeg" alt="">

            <div class="carousel-caption">

                <h3>Second Slide</h3>

                <p>This is that the second image slide</p>

            </div>

        </div>

       

        <div class="item">

            <img src="images/image-3.jpeg" alt="">

            <div class="carousel-caption">

                <h3>Third Slide</h3>

                <p>This is that the third image slide</p>

            </div>

        </div>

    </div>


    <!-- Controls -->

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

        <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

        <span class="sr-only">Next</span>

    </a>

</div>

Bootstrap Carousel Slider with Custom Controls

The following example calls carousel manually and provides the custom controls to cycles previous and next item.



<div id="myCarouselCustom" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

    <ol class="carousel-indicators">

        <li data-target="#myCarouselCustom" data-slide-to="0" class="active"></li>

        <li data-target="#myCarouselCustom" data-slide-to="1"></li>

        <li data-target="#myCarouselCustom" data-slide-to="2"></li>

    </ol>


    <!-- Wrapper for slides -->

    <div class="carousel-inner">

        <div class="item active">

            <img src="images/image-1.jpg" alt="">

            <div class="carousel-caption">

                <h3>First Slide</h3>

                <p>This is that the initial image slide</p>

            </div>

        </div>

 

        <div class="item">

            <img src="images/image-2.jpeg" alt="">

            <div class="carousel-caption">

                <h3>Second Slide</h3>

                <p>This is that the second image slide</p>

            </div>

        </div>

       

        <div class="item">

            <img src="images/image-3.jpeg" alt="">

            <div class="carousel-caption">

                <h3>Third Slide</h3>

                <p>This is that the third image slide</p>

            </div>

        </div>

    </div>


    <!-- Controls -->

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

        <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

        <span class="sr-only">Next</span>

    </a>

</div>

<!-- Custom Controls -->

<a href="javascript:void(0);" id="prevBtn">Prev Slide</a>

<a href="javascript:void(0);" id="nextBtn">Next Slide</a>

JavaScript Code:


<script type="text/javascript">

// decision carousel manually

$('#myCarouselCustom').carousel();


// move to the previous item


$("#prevBtn").click(function()
</script>

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

My Code

How to Create Carousel Slider with Bootstrap

About Admin

Related Post