<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="product"> <div class="container-content"> <br> <br> <br> <div class="row"> <div class="container"> <div id="myCarousel3" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-md-4 product-item" > <div style="text-align: center"> <img class="img-circle " src="img/kg.png" alt="image" align="middle" class="img-responsive"> </div> </div><!-- /.col-md-6 --> <div class="col-md-6"> <h2>Экспресс доставка почты по Кыргызстану </h2> <a class="btn btn-primary" href="#productModal1" data-toggle="modal">Узнать подробней</a> </div> <!-- /.col-md-6 --> </div> <!-- row --> </div><!-- End Item --> <div class="item"> <div class="row"> <div class="col-md-4 product-item" > <div style="text-align: center"> <img class="img-circle " src="img/ru.png" alt="image" align="middle" class="img-responsive"> </div> </div><!-- /.col-md-6 --> <div class="col-md-6"> <h2>Экспресс доставка почты по Российской Федерации</h2> <a class="btn btn-primary" href="#productModal2" data-toggle="modal">Узнать подробней</a> </div><!-- /.col-md-4 --> </div> </div><!-- End Item --> <div class="item"> <div class="row"> <div class="col-md-4 product-item" > <div style="text-align: center"> <img class="img-circle " src="img/kz.png" alt="image" align="middle" class="img-responsive"> </div> </div><!-- /.col-md-6 --> <div class="col-md-6"> <h2>Экспресс доставка почты по Казахстану</h2> <a class="btn btn-primary" href="#productModal3" data-toggle="modal">Узнать подробней</a> </div><!-- /.col-md-4 --> </div> </div><!-- End Item --> <div class="item"> <div class="row"> <div class="col-md-4 product-item" > <div style="text-align: center"> <img class="img-circle " src="img/boxru.png" alt="image" align="middle" class="img-responsive"> </div> </div><!-- /.col-md-6 --> <div class="col-md-6"> <h2>Экспресс доставка посылок по России </h2> <a class="btn btn-primary" href="#productModal4" data-toggle="modal">Узнать подробней</a> </div><!-- /.col-md-4 --> </div> </div><!-- End Item --> <div class="item"> <div class="row"> <div class="col-md-4 product-item" > <div style="text-align: center"> <img class="img-circle " src="img/world.png" alt="image" align="middle" class="img-responsive"> </div> </div><!-- /.col-md-6 --> <div class="col-md-6"> <h2>Экспресс доставка почты по Зарубежным странам </h2> <a class="btn btn-primary" href="#productModal5" data-toggle="modal">Узнать подробней</a> </div><!-- /.col-md-4 --> </div> </div><!-- End Item --> <div class="item"> <div class="row"> <div class="col-md-4 product-item" > <div style="text-align: center"> <img class="img-circle " src="img/hands.png" alt="image" align="middle" class="img-responsive"> </div> </div><!-- /.col-md-6 --> <div class="col-md-6"> <h2>Услуги таможенного<br> брокера </h2> <a class="btn btn-primary" href="#productModal6" data-toggle="modal">Узнать подробней</a> </div><!-- /.col-md-4 --> </div> </div><!-- End Item --> <div class="item"> <div class="row"> <div class="col-md-4 product-item" > <div style="text-align: center"> <img class="img-circle " src="img/van.png" alt="image" align="middle" class="img-responsive-center"> </div> </div><!-- /.col-md-6 --> <div class="col-md-6"> <h2>Грузовые перевозки по Кыргызстану и СНГ </h2> <a class="btn btn-primary" href="#productModal6" data-toggle="modal">Узнать подробней</a> </div><!-- /.col-md-4 --> </div> </div><!-- End Item --> </div><!-- End Carousel Inner --> <br> <div class="row"> <div class="col-lg-12"> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel3" data-slide-to="0" class="active"><a href="#"><small>Экспресс доставка почты по КР </small></a></li> <li data-target="#myCarousel3" data-slide-to="1"><a href="#"><small>Доставка почты по РФ </small></a></li> <li data-target="#myCarousel3" data-slide-to="2"><a href="#"><small>Доставка документов по Казахстану </small></a></li> <li data-target="#myCarousel3" data-slide-to="3"><a href="#"><small>Доставка посылок по РФ</small></a></li> <li data-target="#myCarousel3" data-slide-to="4"><a href="#"><small>Доставка почты по зарубежным странам </small></a></li> <li data-target="#myCarousel3" data-slide-to="5"><a href="#"><small>Услуги таможенного брокера </small></a></li> <li data-target="#myCarousel3" data-slide-to="6"><a href="#"><small>Грузовые перевозки по КР и СНГ</small></a></li> </ul> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> </div><!-- End Carousel --> </div> <!-- /.container --> </div> <!-- /.row --> <br> <!-- Call to Action Well --> <div class="row"> <div class="col-lg-12"> <div class="well text-center"> По всем вопросам обращаться: +996312662107, +996312939339, +996543162447.<br> Звоните в любое удобное время! </div> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> </div><!-- /.container --> </section>

body { padding-top: 20px; } #myCarousel3 .nav a small { display:block; } #myCarousel3 .nav { background:#eee; } #myCarousel3 .nav a { border-radius:0px; }

$(document).ready( function() { $('#myCarousel3').carousel({ interval: 4000 }); var clickEvent = false; $('#myCarousel3').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; }); });