Bootstrap carousel slider for desktop and mobile it's responsive mobile friendly slider for all devices


Project structure

Bootstrap_slider/
┣ css/
┣ images/
┃ ┣ benjamin-child-17946.jpg
┃ ┣ left_arrow.png
┃ ┣ right_arrow.png
┃ ┣ ronald-yang-21762.jpg
┃ ┗ sticker-mule-199224.jpg
┣ js/
┗ index.php

Bootstrap carousel slider Example

Create index HTML file input the following code


#index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
        <style>
            .carousel-inner > .item > img,
            .carousel-inner > .item > a > img {
                width: 100%;
                margin: auto;
            }

            .carousel-caption {
                right: 0;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(100, 100, 100, 0.5);
            }

            .carousel-control.left, .carousel-control.right {
                background-image: none
            }

            .carousel-control {
                position: absolute;
                top: 50%; 
                z-index: 0;
                display: inline-block;
            }

            .carousel-control > span > img{
                width: 30px;
                height: 30px;
                background: #ccc;
                padding: 3px;
                color: #000;
                border:2px solid #fff;
                border-radius: 100%;
                box-shadow:0.1px 0.1px 15px rgba(0, 0, 0, 0.1);

            }

            .carousel-control > span > img:hover{
                background: #666666;
                transition: background 0.2s linear 0s;
                border:2px solid #fff;
            }

            .carousel-caption h3,p{
                position: relative;
                top: 45%;
                left: 0;
                right: 0;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                text-shadow: none;
                font-family: 'Roboto', sans-serif;
            }

            .carousel-caption h3{
                font-size: 5em;

            }

            .carousel-caption p{
                font-size: 2em;
            }
            
      
   @media screen and (max-width: 880px) {
    
    .carousel-caption h3,p{
        top: 40%;
    }
    
           .carousel-caption h3{
                font-size: 3.5em;

            }

            .carousel-caption p{
                font-size: 2em;
                width: 450px;
                margin: 0px auto;
                text-align: center;
            }
            
}         
            
            
@media screen and (max-width: 580px) {
    
    .carousel-caption h3,p{
        top: 25%;
    }
    
           .carousel-caption h3{
                font-size: 1.5em;

            }

            .carousel-caption p{
                font-size: 0.9em;
                width: 250px;
                margin: 0px auto;
                text-align: center;
            }
            
}
        </style>
    </head>
    <body>
        <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" role="listbox">
                <div class="item active">
                    <img src="images/benjamin-child-17946.jpg" alt="Chania">
                    <div class="carousel-caption">
                        <h3>Best office management</h3>
                        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
                    </div>
                </div>

                <div class="item">
                    <img src="images/ronald-yang-21762.jpg" alt="Chania">
                    <div class="carousel-caption">
                        <h3>Drive with me</h3>
                        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
                    </div>
                </div>



                <div class="item">
                    <img src="images/sticker-mule-199224.jpg" alt="Flower">
                    <div class="carousel-caption">
                        <h3>don't play with nature</h3>
                        <p>Beatiful flowers in Kolymbari, Crete.</p>
                    </div>
                </div>
            </div>

            <!-- Left and right controls -->
            <a href="#myCarousel" class="left carousel-control" data-slide="prev">
                <span>
                    <img src="images/left_arrow.png" />
                </span>
            </a>
            <a href="#myCarousel" class="right carousel-control" data-slide="next">
                <span>
                    <img src="images/right_arrow.png" />
                </span>
            </a>
        </div>
    </body>
</html>

Run the above code and see the output of bootstrap carousel slider