add bootstrap post slider with tabs

There’s probably some better way of doing this, but thought i’d give it a go anyways 🙂 – also got some of the answer from here Adding active class to first item

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <?php
            $c = 0;
            $class="";
            $args = array( 'posts_per_page' => 4);
            $myposts = get_posts( $args );
            foreach ( $myposts as $post ) : setup_postdata( $post );
                $c++;
                $class = ($c == 1) ? 'active' : '';
                ?>
                <div class="item <?php echo $class; ?>">
                    <img src="http://placehold.it/1200x440/999999/cccccc">
                    <div class="carousel-caption">
                        <?php the_title(); ?>
                        <p><?php get_the_excerpt(); ?></p>
                    </div>
                </div><!-- End Item -->
            <?php
            endforeach;
            wp_reset_postdata();
            ?>
        </div><!-- End Carousel Inner -->
    </div>
        <ul class="nav nav-pills nav-justified">
            <?php
            $c = 0;
            $class="";
            $i = 0;
            $args = array( 'posts_per_page' => 4);
            $myposts = get_posts( $args );
            foreach ( $myposts as $post ) : setup_postdata( $post );
                $c++;
                $class = ($c == 1) ? 'active' : '';
                ?>
                <li data-target="#myCarousel" data-slide-to="<?php echo $i++ ?>" class="<?php echo $class; ?>"><a href="#"><?php the_title(); ?></a></li>
                <?php
            endforeach;
            wp_reset_postdata();
            ?>
        </ul>
    </div><!-- End Carousel -->

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

    </script>