<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> </li> <li class="slide-4" data-target="#myCarousel" data-slide-to="1"> <img src="img/slider-04.png" class="img-responsive"> <div class="slide-txt"><img src="img/icon-4.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> </li> <li class="slide-3" data-target="#myCarousel" data-slide-to="2"> <img src="img/slider-03.png" class="img-responsive"> <div class="slide-txt"><img src="img/icon-3.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> </li> <li class="slide-2" data-target="#myCarousel" data-slide-to="3"> <img src="img/slider-02.png" class="img-responsive"> <div class="slide-txt"><img src="img/icon-2.png" class="slide2-icon"> <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> </li> <li class="slide-1" data-target="#myCarousel" data-slide-to="4"> <img src="img/slider-01.png" class="img-responsive"> <div class="slide-txt"><img src="img/icon-1.png" class="slide1-icon"> <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> </li> </ul> </div> </div> </div>

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;} .nav-justified>li.slide-5.active .aftereffect{display:none;}

$(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; }); });