<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="col-md-6"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img class="img img-responsive" src="http://www.duplexcleaning.com.au/images/stories/slideshow/Duplex-340/images/1.jpg"> </div> <div class="item"> <img class="img img-responsive" src="http://www.duplexcleaning.com.au/images/stories/slideshow/Duplex-340/images/2.jpg"> </div> <div class="item"> <img class="img img-responsive" src="http://www.duplexcleaning.com.au/images/stories/slideshow/Duplex-340/images/3.jpg"> </div> <div class="item"> <img class="img img-responsive" src="http://www.duplexcleaning.com.au/images/stories/slideshow/Duplex-340/images/5.jpg"> </div> <div class="item"> <img class="img img-responsive" src="http://www.duplexcleaning.com.au/images/stories/slideshow/Duplex-340/images/6.jpg"> </div> <div class="item"> <img class="img img-responsive" src="http://www.duplexcleaning.com.au/images/stories/slideshow/Duplex-340/images/7.jpg"> </div> </div> <div id="naslovi"> <ul class="nav nav-pills nav-stacked"> <li id="mojribon" data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">Healthcare cleaning</a></li> <li id="mojribon" data-target="#myCarousel" data-slide-to="1"><a href="#">Cleans office carpet</a></li> <li id="mojribon" data-target="#myCarousel" data-slide-to="2"><a href="#">Ideal for long laps</a></li> <li id="mojribon" data-target="#myCarousel" data-slide-to="3"><a href="#">Perfect for hospitals</a></li> <li id="mojribon" data-target="#myCarousel" data-slide-to="4"><a href="#">Cleans transport surfaces</a></li> <li id="mojribon" data-target="#myCarousel" data-slide-to="5"><a href="#">School cleaning</a></li> <li id="mojribon" data-target="#myCarousel" data-slide-to="3"><a href="#">Services</a></li> </ul> </div> </div> </div>

body { padding-top: 20px; } #myCarousel .nav a small { display:block; } #myCarousel .nav { background:none; } #myCarousel .nav a { padding-right: 4px; text-align: right; } #naslovi{ right:0; top:0; position: absolute; padding-right:0px; } #myCarousel .item>img{ float: right; } #mojribon { -webkit-clip-path: polygon(25% 0%, 100% 0, 100% 100%, 25% 100%, 0% 50%); clip-path: polygon(25% 0%, 100% 0, 100% 100%, 25% 100%, 0% 50%); font-size: 12px; }

$(document).ready( function() { $('#myCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#naslovi').on('click', '.nav a', function() { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.nav').children().length -1; var current = $('.nav li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.nav li').first().addClass('active'); } } clickEvent = false; }); });