Bootstrap Snippet Slider with white overlay using HTML CSS Javascript

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 ---------->
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
  <!-- Overlay -->
  <div class="overlay"></div>
  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#bs-carousel" data-slide-to="1"></li>
    <li data-target="#bs-carousel" data-slide-to="2"></li>
    <li data-target="#bs-carousel" data-slide-to="3"></li>
  </ul>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item slides active">
      <div class="slide-1"></div>
      <div class="hero">        
        <hgroup>
            </hgroup>
            <img class="img-reponsive heading animated zoomIn" src="https://bufiles.blob.core.windows.net/co3620/slide/villa_logo.png" style="height: 300px; width: 50%; height: auto; top: 10%;" alt="" />
            
            <p class="animated slideInUp" style="color: #fff; font-weight: 100; text-shadow: none;  font-size: 20pt; text-transform: none;">Ռեստորնային համալիր</p>
              
      </div>
    </div>
    <div class="item slides slider">
      <div class="slide-2"></div>
      <div class="hero">        
        <hgroup>
            </hgroup>
            <img class="img-reponsive heading animated slideInRight" src="https://bufiles.blob.core.windows.net/co3620/icons/yerevan_restaurant.png" style="width: 50%; height: auto; max-width: 20%;" alt="" />
            <p class="animated slideInLeft" style="color: #fff; text-shadow: none; font-weight: 100;  font-size: 20pt; text-transform: none;">Երևանյան լեգենդ</p>
            <p class="animated slideInRight" style="color: #fff; text-shadow: none; font-weight: 100;  font-size: 16pt; text-transform: none;">ռեստորանների ոլորտում</p>
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
ul.nav.navbar-nav.navbar-right .animate {
    font-size: 11pt;
    color: black !important;
}
ul.nav.navbar-nav.navbar-right .animate {
    font-size: 11pt;
    color: black !important;
    text-align: center;
}
span.fa.fa-angle-left {
    position: absolute;
    top: 45%;
    font-size: 3em;
    left: 3%;
}
span.fa.fa-angle-right {
    position: absolute;
    top: 45%;
    font-size: 3em;
    left: 85%;
}
ul.carousel-indicators {
    bottom: 3%;
}
p.animated.slideInDown {
    
    
}
p.animated.slideInUp {
    
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
(function(){
    'use strict';
    /*-----------------------------------------
    BACKGROUND PARALLAX INIT
    ------------------------------------------*/
    if( $('.parallax').length ){
        $('body').imagesLoaded(function(){
            $(window).stellar({horizontalOffset:0,horizontalScrolling:!1});
        });
    };
    /*-----------------------------------------
    MAIN NAV INIT
    ------------------------------------------*/
    function navTrigger(){
        var navTrigger = $('.main-nav-trigger').not('.mobile-nav-trigger'),
            mainNavContainer = $('.main-nav-container'),
            wrapper = $('.wrapper');
        navTrigger.on('click', function(event) {
            event.preventDefault();
            mainNavContainer.toggleClass('slide-in');
            $(this).toggleClass('slide-out');
        });
        wrapper.on('click', function(event) {
            mainNavContainer.removeClass('slide-in');
            navTrigger.removeClass('slide-out');
        });
    };
    navTrigger();
    /*-----------------------------------------
    MOBILE NAV INIT
    ------------------------------------------*/
    function mobileNav(){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Slider with white overlay"
Bootstrap 3.3.0 Snippet by Harut

Related: See More

Questions / Comments:

"Slider with white overlay" Bootstrap 3.3.0 Snippet by Harut

Related: See More

Questions / Comments:

"Slider with white overlay"
Bootstrap 3.3.0 Snippet by Harut