kdarty
9/23/2016 - 6:24 PM

This sample code came from Bootsnipp. It provides a sample for how to provide an overlay for Bootstrap Carousel slide images: Bootstrap Car

This sample code came from Bootsnipp. It provides a sample for how to provide an overlay for Bootstrap Carousel slide images:

Bootstrap Carousel with Overlay (Text) http://bootsnipp.com/snippets/6n3Wr

carousel-with-overlay.html
content_copyfile_download
<div class="container">
    <!-- Indicators -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://synicsys.com/wp-content/uploads/2014/08/seo-banner-bgd.jpg" alt="Chania">
                <div class="carousel-caption">
                    <h3>Header of Slide 1</h3>
                    <p>Details of Slide 1. Lorem Ipsum Blah Blah Blah....</p>
                </div>
            </div>
            <div class="item">
                <img src="http://allpoints.ph/wp-content/uploads/2013/10/banner.jpg" alt="Chania">
                <div class="carousel-caption">
                    <h3>Header of Slide 2</h3>
                    <p>Details of Slide 2. Lorem Ipsum Blah Blah Blah....</p>
                </div>
            </div>
            <div class="item">
                <img src="http://www.nimble-solution.com/images/slider/banner4.png" alt="Flower">
                <div class="carousel-caption">
                    <h3>Header of Slide3</h3>
                    <p>Details of Slide 3. Lorem Ipsum Blah Blah Blah....</p>
                </div>
            </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="fa fa-angle-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="fa fa-angle-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        <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>
    </div>
</div>
carousel-with-overlay.css
content_copyfile_download

    		.carousel-control.left
			{
				background: none;
			}
			.carousel-control.right
			{
				background: none;
			}

			.carousel-control
			{
				position: absolute;
				top: 45%;
				bottom: 0;
				left: 0;
				width: 15%;
				font-size: auto;
				color: #fff;
				text-align: center;
				opacity: 1;
				text-shadow: none;
			}
			.carousel-control:hover
			{
				color: #000;
			}
			.carousel-indicators
			{
				bottom: -50px;
			}
			.carousel-indicators li
			{
				display: inline-block;
				width: 10px;
				height: 10px;
				margin: 1px;
				text-indent: -999px;
				cursor: pointer;
				background-color: #000\9;
				background-color: rgba(0,0,0,0);
				border: 1px solid #16a085;
				border-radius: 50%;
			}
			.carousel-indicators .active
			{
				width: 12px;
				height: 12px;
				margin: 0;
				background-color: #16a085;
			}
			.carousel-caption
			{
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 10;
				padding-top: 20px;
				padding-bottom: 20px;
				color: #fff;
				text-align: center;
				background: rgba(0,0,0,0.4);
			}