<div class="wrap container" role="document">
  <div class="content row">
    <main class="main <?php echo roots_main_class(); ?>" role="main">
      <div class="row">
        <div class="col-lg-7">
          <hr>
          <hr>
          <hr>
          <!--------------------------------------------------------------------------------------------------------------------->

          <!-- Slider -->
          <div class="row">
            <div class="col-lg-12" id="carousel-bounding-box">
          <?php
$items = new WP_Query(array(
        'post__in' => get_option('sticky_posts'),
        'ignore_sticky_posts' => 1,
'posts_per_page' => 6,
'meta_key' => '_thumbnail_id'
));
$count = $items->found_posts;
?>
              <div class="carousel slide" id="myCarousel">
                <!-- Carousel items -->
                <div class="carousel-inner">
              <?php
        $ctr = 0;
        while ( $items->have_posts() ) :
          $items->the_post();
          $class = $ctr == 0 ? ' active' : '';
        ?>
                  <div class="item<?php echo $class; ?>" data-slide-number="<? the_ID(); ?>">
                   <?php the_post_thumbnail( 'full', array (
                'class' => 'img-responsive'
                )); ?>
                <div class="carousel-caption">
                  <h3><a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?>
                    </a></h3>
                </div>
                  </div>
              <?php $ctr++;
        endwhile;  ?>
                </div>
                <!-- Carousel nav -->
              </div>
            </div>
          </div>
          <!--/Slider-->

          <div class="row hidden-phone" id="slider-thumbs">
            <div class="row">
              <div class="col-lg-12">
                <!-- Bottom switcher of slider -->

                <div class="thumbnails">
                <?php $counter2 = 0; ?>
                <?php while ( $items->have_posts() ) : $items->the_post(); ?>
                <?php $counter2++; ?>
                  <div class="col-lg-2 item <?php echo $counter2 == 1 ? 'active' : ''; ?>">
                  <a class="thumbnail" id="carousel-selector-<? the_ID(); ?>">
                                    <?php
            the_post_thumbnail('thumbnail', array(
                'class' => 'img-responsive'
            ));
            ?>
                  </a>

                  </div>
                 <?php endwhile; ?>


                </div>
              </div>
            </div>
          </div>

          <!--------------------------------------------------------------------------------------------------------------------->



    </main>
    <!-- /.main -->
    <?php if (roots_display_sidebar()) : ?>
    <aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
      <?php include roots_sidebar_path(); ?>
    </aside>
    <!-- /.sidebar -->
    <?php endif; ?>
  </div>
  <!-- /.content -->
</div>
<!-- /.wrap -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>

  jQuery(document).ready(function($) {

        $('#myCarousel').carousel({
                interval: 5000
        });

        $('#carousel-text').html($('#slide-content-0').html());

        //Handles the carousel thumbnails
        $('[id^=carousel-selector-]').click( function(){
                var id_selector = $(this).attr("id");
                var id = id_selector.substr(id_selector.length -1);
                var id = parseInt(id);
                $('#myCarousel').carousel(id);
        });



$('#myCarousel').on('slid.bs.carousel', function(){
   var index = $('.carousel-inner .item.active').index();
   $('.thumbs .item[data-slide-to="'+index+'"]').addClass('active');
});
});
</script>
</body>
</html>