Issue with testimonials slider
Hi,
I have a testimonials carousel at the bottom of my home page that slides in and out of the page - two slides at a time. What I would like to fix with it is when the first two slides are sliding out they disappear too soon, I would like them to not disappear like that and instead just slide out without incident. I've been unable to figure out what the issue is.
My site: http://10meijin.com/
I have a testimonials carousel at the bottom of my home page that slides in and out of the page - two slides at a time. What I would like to fix with it is when the first two slides are sliding out they disappear too soon, I would like them to not disappear like that and instead just slide out without incident. I've been unable to figure out what the issue is.
My site: http://10meijin.com/
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner" style="right:50px">
<div class="item active" style="width:1000px;">
<div class="item-content col-xs-12" style="width:500px"><a href="#1">
<div class="box box_circle_photo" style="background-image:"none">
<div class="ribbon"><span></span><img src="{{url('/upload/10main.jpg')}}" width="103" height="103" alt=""></div>
<div class="box_content">
<p>“ Finding my English name was enjoyable...I am very satisfied with the name choices I was given and with the assistance of my family & friends I now have the best name I could have found for myself. I highly recommend using this site”
</p>
<p> <span class="author">− Li Lei</span>
</div>
</p></div>
</a></div>
</div>
<div class="item" style="width:1000px;">
<div class="item-content col-xs-6" style="width:500px"><a href="#1">
<div class="box box_circle_photo" style="background-image: none">
<div class="ribbon"><span></span><img src="{{url('/upload/11main.jpg')}}" width="103" height="103" alt=""></div>
<div class="box_content">
<p>“Finding a name for my son was so easy. We have chosen the name Nathan, we think it's the perfect English name for our child!”
</p>
<p> <span class="author">− Zhang Yu</span>
</div>
</p></div>
</a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" style="background-image: none;right:170px" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" style="background-image: none;right:170px" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
// interval: false
});
$('.multi-item-carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.find('.item-content:first-child').clone().appendTo($(this));
});
});
</script>
</div>
</div>- /*-----------------------------------*/
/* Testimonials */
/*-----------------------------------*/
/* testimonials list */
.testimonials .author-description {
height: auto;
min-height:195px;
margin:0 5px 30px 5px;
padding:0 20px}
.testimonials .author-description .author-image {
position:relative;
float:left;
top:0;
left:0;
margin:0 25px}
.testimonials .photo_right .author-image {
float:right;}
.testimonials .author-description .author-text {
background:url(images/testimonial_bg.png) -826px bottom no-repeat;
padding:10px 40px 30px 0px;}
.testimonials .author-description .author-text p {
height:auto}
.testimonials .photo_right .author-text {
text-align:right;
background-position:0 bottom}