Bootstrap Snippet Creative bootstrap carousal slider using HTML CSS jQuery

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="container">
    <div class="row">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
      <div class="carousel-inner">
        <div class="item active">
          <img src="img/Web_Layout-01.jpg">
        </div><!-- End Item -->
 
         <div class="item">
          <img src="img/Web_Layout-02.jpg">
        </div><!-- End Item -->
        
        <div class="item">
          <img src="img/Web_Layout-03.jpg">
        </div><!-- End Item -->
        
        <div class="item">
          <img src="img/Web_Layout-04.jpg">
        </div>
        
        <div class="item">
          <img src="img/Web_Layout-05.jpg">
        </div><!-- End Item -->
                
      </div>
    <ul class="nav nav-pills nav-justified">
        <li class="slide-5" data-target="#myCarousel" data-slide-to="0" class="active">
          <img src="img/slider-05.png" class="img-responsive">
          <div class="slide-txt"><img src="img/icon-5.png">
                  <div class="aftereffect"><h3>Website Development</h3><small>Come to us for great website development 
        hat give better reach and more sales. > </small></div></div>
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
body {padding: 20px; }
#myCarousel{   position: relative;  overflow: hidden;}
#myCarousel .carousel-inner>.item>img{width:100%;}
.container {max-width:1920px;width:100%;}
.nav-justified{position:relative;width:auto;right:-430px;top: -927px;}
.nav-pills>li+li{margin-left:0;}
.nav-justified>li{display:inline-block;position:absolute;height:auto;width:auto;transition:all 1s ease-in-out;right:0;}
.nav-justified>li.active{right:430px;}
.nav-justified>li.active .aftereffect{display:block;opacity:1;}
.nav-justified>li.slideout{right:430px;}
.aftereffect{opacity:0;display:none; position:relative;text-align:center;width:230px;color:#fff;}
.aftereffect h3{text-transform:uppercase;border-bottom: 1px solid #fff;padding-bottom: 10px;}
.aftereffect small{color:#9ce5ff;}
#myCarousel .nav a small{display:block;}
#myCarousel .nav div.slide-txt {    
    border-radius: 0px;
    position: absolute;
    bottom: 18px;
    text-align: center;
    vertical-align: bottom;
    left: 45px;
    transition:all 1s ease-in-out;  
}
#myCarousel .nav>li.active div.slide-txt{left:205px; !important}
#myCarousel .nav .slide-2{top: 32px;}
#myCarousel .nav .slide-1{top: 118px;}
#myCarousel .nav .slide-2 img.slide2-icon {
    left: 15px;
    position: relative;
}
.nav-justified a img{transition:all 1s ease-in-out;position:absolute;bottom:0;left:30px;top:570px;}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{background-color:transparent;}
.nav>li>a:hover, .nav>li>a:focus{text-decoration: none;background-color:transparent}
#myCarousel .nav>li.slide-5.active div.slide-txt{left: 0;}
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
$(document).ready( function() {
   $('#myCarousel').carousel({
        interval: 4000
    });
    
    var clickEvent = true;
    $('#myCarousel').on('click', '.nav div.slide-txt', function() {
            clickEvent = true;
            //$('.nav li').removeClass('active');
            $(this).parent().addClass('active');
            $(this).parent().prevAll().addClass('active');  
            //$('li.active').addClass('slideout');
            //$(this).addClass('active');   
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.nav').children().length -1;
            var current = $('.nav li.active');
            current.removeClass('active').prevAll().addClass('active').addBack('slide-*');
            var id = parseInt(current.data('slide-to'));
            if(count == 4) {
                //alert('count:+'value'+');
                $('.nav li').removeClass('active'); 
            }
        }
        clickEvent = true;
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Creative bootstrap carousal slider"
Bootstrap 3.3.0 Snippet by Salehin

Related: See More

Questions / Comments:

"Creative bootstrap carousal slider" Bootstrap 3.3.0 Snippet by Salehin

Related: See More

Questions / Comments:

"Creative bootstrap carousal slider"
Bootstrap 3.3.0 Snippet by Salehin