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>