Bootstrap Snippet Full Screen Slider Responsive 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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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>
          <li data-target="#mycarousel" data-slide-to="3"></li>
          <li data-target="#mycarousel" data-slide-to="4"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item">
              <img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
              <div class="carousel-caption">
                  <h3>First Image</h3>
              </div>
          </div>
          <div class="item">
              <img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
              <div class="carousel-caption">
                  <h3>Second Image</h3>
              </div>
          </div>
          <div class="item">
              <img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
              <div class="carousel-caption">
                  <h3>Third Image</h3>
              </div>
          </div>
          <div class="item">
              <img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body{
    background-color: black;
}
h3 {
    display: inline-block;
    padding: 10px;
    background: #B9121B;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  
  .full-screen {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
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
          var $item = $('.carousel .item'); 
      var $wHeight = $(window).height();
      $item.eq(0).addClass('active');
      $item.height($wHeight); 
      $item.addClass('full-screen');
      
      $('.carousel img').each(function() {
        var $src = $(this).attr('src');
        var $color = $(this).attr('data-color');
        $(this).parent().css({
          'background-image' : 'url(' + $src + ')',
          'background-color' : $color
        });
        $(this).remove();
      });
      
      $(window).on('resize', function (){
        $wHeight = $(window).height();
        $item.height($wHeight);
      });
      
      $('.carousel').carousel({
        interval: 6000,
        pause: "false"
      });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Full Screen Slider Responsive"
Bootstrap 3.3.0 Snippet by developindiaonline

Related: See More

Questions / Comments:

"Full Screen Slider Responsive" Bootstrap 3.3.0 Snippet by developindiaonline

Related: See More

Questions / Comments:

"Full Screen Slider Responsive"
Bootstrap 3.3.0 Snippet by developindiaonline