shshanker
10/16/2015 - 7:07 AM

Bootstrap one by one slider

Bootstrap one by one slider


<script type="text/javascript">
	jQuery(document).ready(function ($) {
    /*$('#myCarousel').carousel({
        interval: 10000
    })*/

	$( "#myCarousel .item" ).first().addClass( "active" );
    $('.fdi-Carousel .item').each(function () {
        var next = $(this).next();

        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });
});
</script>

<style type="text/css">
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }

#myCarousel .carousel-control.left, #myCarousel .carousel-control.right{
    display: block;
}
</style>





<?php get_footer('receive-offers'); ?>

<!-- carousel section  -->
<?php
$testimonials =  get_field( 'testimonial', 2784 );
//print_pre($the_field);
?>
    <div class="container">
        <div class="row">
            <div class="span12">
                <div class="well">
                    <div id="myCarousel" class="carousel fdi-Carousel slide">
                     <!-- Carousel items -->
                        <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
                            <div class="carousel-inner onebyone-carosel">
                              <?php foreach( $testimonials as $key => $value ) { ?> 
                                <div class="item">
                                    <div class="col-sm-4 offers-testimonial">
							 		<div class="testimonial-logo"><img src="<?php echo $value['logo']; ?>" alt="Vidnesbyrd" title="Vidnesbyrd"></div> <!-- end of testimonial-logo -->
							 		<div class="testimonial-main-content">
							 			<h4 class="testimonial-name"><?php echo $value['name']; ?></h4>
							 			<strong class="testimonial-name"><?php echo $value['address']; ?></strong>
							 			<span>"</span>
							 			<p class="testimonial-paragraph"><?php echo $value['content']; ?></p>
							 		</div> <!-- end of testimonial-main-content -->
							 	</div> <!-- end of offers-testimonial -->
                                </div>
                               <?php } ?>                                
                            </div>
                            <a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a>
                            <a class="right carousel-control" href="#eventCarousel" data-slide="next"></a>
                        </div>
                        <!--/carousel-inner-->
                    </div><!--/myCarousel-->
                </div><!--/well-->
            </div>
        </div>
    </div>