Bootstrap Snippet Responsive Slider with Custom Indicator using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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