Hero Slider Image & Contents

Bootstrap 3 carousel is being used for slider and it’s easy to change images,contents.

1. Basic Markup for slider

<!-- Carousel inner -->


<div class="carousel-inner">
    

<div class="item active">
        <img class="img-responsive" src="images/header-bg-1.jpg" alt="slider">
        

<div class="slider-content">
            

<div class="col-md-12 text-center">
                

<h1 class="animated3">
                    <span><strong>Fame</strong> for the highest</span>
                </h1>


                

At vero eos et accusamus et iusto odio dignissimos
 ducimus qui blanditiis praesentium voluptatum

	
                <a href="#feature" class="page-scroll btn btn-primary animated1">Read More</a>
            </div>


        </div>


    </div>


    <!--/ Carousel item end -->
    
    

<div class="item">
        ...
    </div>


    <!--/ Carousel item end -->
    
    

<div class="item">
        ...
    </div>


    <!--/ Carousel item end -->
</div>


<!-- Carousel inner end-->

Change image and slider contents from item.

Want to know more about bootstrap 3 carousel follow this link – https://getbootstrap.com/docs/3.3/javascript/#carousel

Was this article helpful to you? Yes No

How can we help?