"Responsive Slider with Custom Indicator"
Bootstrap 3.3.0 Snippet by AminulDev

<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 ----------> <header> <div id="mogo-header"> <div id="mogo-header-inner"> <!--navbar menu--> <nav id="top-navbar" class="navbar navbar-default navbar-me"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed menu-collapsed-button" data-toggle="collapse" data-target="#navbar-primary-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand site-logo" href="index.html">MoGo</a> </div> <div class="collapse navbar-collapse navbar-right hidden-xs"> <ul class="nav navbar-nav main-nav"> <li class="active"><a href="#mogo-header">Home</a></li> <li><a href="#mogo-story">About</a></li> <li><a href="#mogo-services">Service</a></li> <li><a href="#mogo-team">Our Team</a></li> <li><a href="#mogo-portfolio">Work</a></li> <li><a href="blog-page.html">Blog</a></li> </ul> <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li> </ul> </div> <div class="collapse navbar-responsive-collapse hidden-lg hidden-md hidden-sm" id="navbar-primary-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#mogo-header" data-toggle="collapse" data-target=".navbar-responsive-collapse">Home</a></li> <li><a href="#mogo-story" data-toggle="collapse" data-target=".navbar-responsive-collapse">About</a></li> <li><a href="#mogo-services" data-toggle="collapse" data-target=".navbar-responsive-collapse">Service</a></li> <li><a href="#mogo-team" data-toggle="collapse" data-target=".navbar-responsive-collapse">Our Team</a></li> <li><a href="#mogo-portfolio" data-toggle="collapse" data-target=".navbar-responsive-collapse">Work</a></li> <li><a href="#mogo-blog" data-toggle="collapse" data-target=".navbar-responsive-collapse">Blog</a></li> </ul> </div><!-- /.navbar-collapse --> </div> </nav> <!--slider section--> <div id="mogo-slider" class="carousel slide container" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <h2 class="mogo-slider-title"> <span class="mogo-slider-sub">Creative Template</span> Welcome <br>to MoGo </h2> <a href="#" class="slider-btn">Learn more</a> </div> <div class="item"> <h2 class="mogo-slider-title"> <span class="mogo-slider-sub">Creative Template</span> We Are <br>Creative </h2> <a href="#" class="slider-btn">Learn more</a> </div> <div class="item"> <h2 class="mogo-slider-title"> <span class="mogo-slider-sub">Responsive Design</span> Responsive <br> Web Template </h2> <a href="#" class="slider-btn">Learn more</a> </div> <div class="item"> <h2 class="mogo-slider-title"> <span class="mogo-slider-sub">Strong Team</span> We Have<br>Strong Team </h2> <a href="#" class="slider-btn">Learn more</a> </div> </div> <!-- Indicators --> <ul class="carousel-indicators clearfix"> <li data-target="#mogo-slider" data-slide-to="0" class="active"> <div class="inner"> <span class="number">01</span> intro </div> </li> <li data-target="#mogo-slider" data-slide-to="1"> <div class="inner"> <span class="number">02</span> work </div> </li> <li data-target="#mogo-slider" data-slide-to="2"> <div class="inner"> <span class="number">03</span> about </div> </li> <li data-target="#mogo-slider" data-slide-to="3"> <div class="inner"> <span class="number">04</span> contacts </div> </li> </ul> </div><!--end slider section--> </div> </div> </header><!--/Header End-->
#mogo-header{ position: relative; font-family: 'Montserrat', sans-serif; background: url("https://images.alphacoders.com/511/511344.jpg")no-repeat center center / cover; } #mogo-header:after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(243,129,129,0.9); /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(top, rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)); background: -o-linear-gradient(top, rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)); background: linear-gradient(to bottom, rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #mogo-header-inner{ position: relative; z-index: 5; } /*=======================main navbar section===========================*/ #top-navbar{ background: none; border: none; border-radius: 0; } #top-navbar .navbar-brand { color: #fff; font-weight: 700; font-size: 20px; } #top-navbar .navbar-nav > li > a{ color: #fff; text-align: center; text-transform: uppercase; } #top-navbar .navbar-nav > li > a:hover, #top-navbar .navbar-nav > .active > a, #top-navbar .navbar-nav > .active > a:hover { color: #fce38a; border-color: #fce38a; background: none; } #top-navbar .main-nav > li > a { font-weight: 400; text-transform: uppercase; border-bottom: 2px solid transparent; padding: 15px 5px 5px; margin: 0 12px; color: #fff; text-align: center; } #top-navbar .navbar-collapse{ border-top-width: 0; padding-top: 10px; margin-top: 5px; } .fixed-me{ transition: all .5s ; } .fixed-me{ background-color:rgba(241, 114, 114, 0.96) !important; padding: 0 !important; margin-bottom: 5px; position: fixed; top:0; z-index:888; width: 100%; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .site-logo{ padding: 15px 16px; margin: 15px 0; } .navbar-me{ min-height: 70px; background-color: transparent; top: 0; border: 0; border-radius: 0; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: transparent; } .menu-collapsed-button{ margin: 20px 15px 10px 15px !important; } /*======================main slider section style===================*/ #mogo-slider { padding: 40px 0 0; } #mogo-slider .carousel-inner { height: auto; } #mogo-slider .carousel-inner > .item { text-align: center; color: #fff; } #mogo-slider .carousel-indicators { width: 100%; left: 0; position: static; margin: 0; margin-top: 80px; } #mogo-slider .carousel-indicators li, #mogo-slider .carousel-indicators li.active { float: left; width: 25%; height: auto; margin: 0; text-indent: initial; border-radius: 0; background: none; text-align: left; border: none; } #mogo-slider .carousel-indicators li .inner { border-top: 2px solid #f7eac4; position: relative; color: #faf3e0; text-transform: uppercase; margin: 0 12px; padding: 10px 0; } #mogo-slider .carousel-indicators li:hover .inner, #mogo-slider .carousel-indicators li.active .inner { border-color: #fff; color: #fff; } #mogo-slider .carousel-indicators li:hover .inner:after, #mogo-slider .carousel-indicators li.active .inner:after { content: ""; position: absolute; left: 0; top: -2px; width: 60px; height: 2px; background: #f38181; } #mogo-slider .carousel-indicators li .number { font-weight: 700; font-size: 18px; margin-right: 3px; } /*==============slider content===================*/ #mogo-slider .mogo-slider-title{ font-size: 110px; color: #fff; } #mogo-slider .mogo-slider-title .mogo-slider-sub { font-size: 55px; } .mogo-slider-title .mogo-slider-sub { display: block; text-transform: none; font-weight: 400; font-family: 'Kaushan Script', cursive; font-size: 20px; margin-bottom: 5px; } .mogo-slider-title{ font-weight: 700; font-size: 25px; line-height: 1; position: relative; padding-bottom: 20px; margin-bottom: 30px; text-align: center; color: #333; text-transform: uppercase; } .mogo-slider-sub { font-weight: 700; font-size: 25px; line-height: 1; position: relative; padding-bottom: 20px; margin-bottom: 30px; text-align: center; color: #333; } .mogo-slider-title .mogo-slider-sub:after{ background: #fff; } .mogo-slider-title:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 50px; height: 2px; background: #fff; transform: translateX(-50%); } .slider-btn{ display: inline-block; color: #fff; text-transform: uppercase; padding: 10px 20px; text-align: center; border: 2px solid #fff; font-size: 12px; line-height: 100%; }

Related: See More

Questions / Comments: