"Awesome Bootstrap Carousel Slider"
Bootstrap 3.3.0 Snippet by vivekbisht109

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Slider start --> <div class="slider"> <div class="slider-wrap"> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="mogo-slider" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner text-center" role="listbox"> <div class="item active"> <div class="slider-content"> <p class="slider-caption"> Creative Template </p> <h3 class="slider-titile text-uppercase"> Welcome <br> to mogo </h3> <span class="verticle-bar"></span> <div class="btn-action"> <a href="#" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="item"> <div class="slider-content"> <p class="slider-caption"> Creative Template </p> <h3 class="slider-titile text-uppercase"> Welcome <br> to mogo </h3> <span class="verticle-bar"></span> <div class="btn-action"> <a href="#" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="item"> <div class="slider-content"> <p class="slider-caption"> Creative Template </p> <h3 class="slider-titile text-uppercase"> Welcome <br> to mogo </h3> <span class="verticle-bar"></span> <div class="btn-action"> <a href="#" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="item"> <div class="slider-content"> <p class="slider-caption"> Creative Template </p> <h3 class="slider-titile text-uppercase"> Welcome <br> to mogo </h3> <span class="verticle-bar"></span> <div class="btn-action"> <a href="#" class="btn btn-primary">Learn More</a> </div> </div> </div> </div> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#mogo-slider" data-slide-to="0" class="active"> <div class="indicator-inner"> <span class="number">01</span> <span class="text text-uppercase">Intro</span> </div> </li> <li data-target="#mogo-slider" data-slide-to="1"> <div class="indicator-inner"> <span class="number">02</span> <span class="text text-uppercase">Work</span> </div> </li> <li data-target="#mogo-slider" data-slide-to="2"> <div class="indicator-inner"> <span class="number">03</span> <span class="text text-uppercase">About</span> </div> </li> <li data-target="#mogo-slider" data-slide-to="3"> <div class="indicator-inner"> <span class="number">04</span> <span class="text text-uppercase">Contracts</span> </div> </li> </ol> </div> </div> </div> </div> </div> </div> <!-- End of slider -->
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:400,700'); /* Mogo slider */ .slider { background: url("https://raw.githubusercontent.com/raazon/raazon.github.io/master/HTML/mogo/img/slider-bg.jpg") no-repeat center / cover; position: relative; } .slider:after { content: ""; opacity: 1; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: -moz-linear-gradient(top, #e68282 0%, #f0d68a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #e68282 0%, #f0d68a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #e68282 0%, #f0d68a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e68282', endColorstr='#f0d68a', GradientType=0); /* IE6-9 */ } /* Carousel */ .slider .carousel { z-index: 1; padding: 100px 0 50px 0; } .slider .carousel-inner { } .slider .slider-content p { color: #fff; font-size: 72px; line-height: 140px; font-family: 'Kaushan Script', cursive; } .slider .slider-content h3 { color: #fff; font-size: 150px; font-weight: 700; font-family: 'Montserrat', sans-serif; } .slider .slider-content .btn { color: #fff; font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; padding: 8px 30px; margin-bottom: 120px; text-transform: uppercase; background: transparent; border-radius: 0; border: 2px solid #ffffff; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .slider .slider-content .btn:hover { background: #f38181; border: 2px solid #f38181; } /* Carousel indicator */ .slider .carousel-indicators { width: 100%; margin: 0; padding: 0; left: 0; } .slider .carousel-indicators li { text-indent: initial; width: 22%; height: 5px; margin: 0 2% 0 0; border-radius: 0; background: #ffffff; border: none; opacity: 0.6; } .slider .carousel-indicators li:last-child { margin: 0; } .slider .carousel-indicators li.active { opacity: 1; position: relative; } .slider .carousel-indicators li.active:after { content: ""; width: 30%; height: 5px; top: 0; left: 0; position: absolute; background: #f38181; } .slider .carousel-indicators li:hover{ opacity: 1; } .slider .indicator-inner { padding-top: 25px; text-align: left; } .slider .indicator-inner span { font-family: 'Montserrat', sans-serif; color: #fff; font-size: 17px; font-weight: 400; } .slider .indicator-inner span.number { font-size: 23px; font-weight: 500; margin-right: 10px; } /* Media query for 959px */ @media only screen and (max-width: 959px) { /* Main slider section */ .slider .carousel { padding: 70px 0 50px 0; } .slider .slider-content .btn { margin-bottom: 60px; padding: 6px 18px; font-size: 12px; } } /* Media query for 768px */ @media only screen and (max-width: 768px) { /* Main slider section */ .slider .slider-content p { font-size: 35px; line-height: 70px; } .slider .indicator-inner { padding-top: 10px; } .slider .slider-content h3 { font-size: 35px; } .slider .indicator-inner span { font-size: 10px; } .slider .indicator-inner span.number { font-size: 10px; margin-right: 0; } } /* Media query for 420px */ @media only screen and (max-width: 420px) { /* Main slider section */ .slider .carousel { padding: 50px 0 50px 0; } .slider .slider-content p { font-size: 35px; line-height: 70px; } .slider .indicator-inner { padding-top: 10px; } .slider .slider-content h3 { font-size: 35px; } .slider .indicator-inner span { font-size: 7px; } .slider .indicator-inner span.number { font-size: 7px; margin-right: 0; } }
jQuery('#mogo-slider').carousel({ interval: 5000 })

Related: See More


Questions / Comments:

Awesome! Thanks for sharing.

SercanGEZER () - 6 years ago - Reply 0