Owl carousel cloned issue with php - php

Question

My issue is owl carousel clone the item
i started with getting Reviews
<?php
if($total_num_of_rev > 0) { ?>
<div class="row">
<?php
$numOfCols = 6;
$rowCount = 0;
foreach($review_list_data as $key => $review_data) { ?>
and i put them in html code as following:
<div class="row">
<?php
if($total_num_of_rev > 0) { ?>
<div class="row">
<?php
$numOfCols = 6;
$rowCount = 0;
foreach($review_list_data as $key => $review_data) { ?>
<div class="col-md-12">
<div class="owl-carousel-3col" data-dots="false">
<div class="item">
<div class="testimonial style1">
<div class="comment bg-theme-colored">
<p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
</div>
<div class="thumb content mt-10 mb-10">
<?php
if($review_data['photo']) { ?>
<img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
<?php
} else { ?>
<img src="images/placeholder_avatar.jpg">
<?php
} ?>
</div>
<h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
<h6 class="title text-white mt-0 mb-15">Designer</h6>
</div>
</div>
</div>
<div class="row"></div>
</div>
<?php
$rowCount++;
} ?>
<?php
} ?>
</div>
A screenshot of the issue
<section class="divide" data-bg-img="images/bg/bg8.jpg" style="background: 50% 97px rgb(17, 17, 17);">
<div class="container pt-60 pb-60">
<div class="section-title text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-uppercase text-white line-bottom-center mt-0">What Claint's <span class="text-theme-colored2">Say</span></h2>
<div class="title-flaticon">
<i class="flaticon-charity-alms"></i>
</div>
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!</p>
</div>
</div>
</div>
<div class="row">
<?php
if($total_num_of_rev > 0) { ?>
<div class="row">
<?php
$numOfCols = 6;
$rowCount = 0;
foreach($review_list_data as $key => $review_data) { ?>
<div class="col-md-12">
<div class="owl-carousel-3col" data-dots="false">
<div class="item">
<div class="testimonial style1">
<div class="comment bg-theme-colored">
<p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
</div>
<div class="thumb content mt-10 mb-10">
<?php
if($review_data['photo']) { ?>
<img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
<?php
} else { ?>
<img src="images/placeholder_avatar.jpg">
<?php
} ?>
</div>
<h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
<h6 class="title text-white mt-0 mb-15">Designer</h6>
</div>
</div>
</div>
<div class="row"></div>
</div>
</div>
<h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
<h6 class="title text-white mt-0 mb-15">Designer</h6>
</div>
</div>
</div>
<div class="row"></div>
</div>
<?php
$rowCount++;
} ?>
<?php
} ?>
</div>
</section>
I think i have mistake in javascript but not sure :
var $owl_carousel_3col = $('.owl-carousel-3col');
if ( $owl_carousel_3col.length > 0 ) {
if(!$owl_carousel_3col.hasClass("owl-carousel")){
$owl_carousel_3col.addClass("owl-carousel owl-theme");
}
$owl_carousel_3col.each(function() {
var data_dots = ( $(this).data("dots") === undefined ) ? false: $(this).data("dots");
var data_nav = ( $(this).data("nav")=== undefined ) ? false: $(this).data("nav");
var data_duration = ( $(this).data("duration") === undefined ) ? 4000: $(this).data("duration");
$(this).owlCarousel({
rtl: THEMEMASCOT.isRTL.check(),
autoplay: true,
autoplayTimeout: data_duration,
loop: false,
rewind: true,
items: 6,
margin: 15,
dots: data_dots,
nav: data_nav,
navText: [
'<i class="fa fa-chevron-left"></i>',
'<i class="fa fa-chevron-right"></i>'
],
responsive: {
0: {
items: 1,
center: false
},
480: {
items: 1,
center: false
},
600: {
items: 1,
center: false
},
750: {
items: 2,
center: false
},
960: {
items: 2
},
1170: {
items: 3
},
1300: {
items: 3
}
}
});
});
}

Answer 1

Your problem seems to be the position of your foreach loop. You want to loop the item, not the whole column.
Basically you are creating an carousel for each of your reviews and owl fills the whole width of your container with clones of the item.
Put your foreach loop around
<div class="item">
and try again.

Answer 2

i put foreach before item
one the following code :
<div class="row">
<div class="col-md-12">
<div class="owl-carousel-5col" data-dots="false">
<?php
if($total_num_of_rev > 0) { ?>
<div class="row">
<?php
$numOfCols = 6;
$rowCount = 0;
foreach($review_list_data as $key => $review_data) { ?>
<div class="item">
<div class="testimonial style1">
<div class="comment bg-theme-colored">
<p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
</div>
<div class="thumb content mt-10 mb-10">
<?php
if($review_data['photo']) { ?>
<img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
<?php
} else { ?>
<img src="images/placeholder_avatar.jpg">
<?php
} ?>
</div>
<h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
<h6 class="title text-white mt-0 mb-15">Designer</h6>
</div>
</div>
</div>
<?php
$rowCount++;
} ?>
<?php
} ?>
</div>
</div>
</div>
but still an issue there
screenshot

Answer 3

i manage to fix the issue
To fix it i needed to put a div inside the loop
but it seems there is an empty item between every loop finish
<section class="divide" data-bg-img="images/bg/bg8.jpg" style="background: 50% 97px rgb(17, 17, 17);">
<div class="container pt-60 pb-60">
<div class="section-title text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-uppercase text-white line-bottom-center mt-0">What Claint's <span class="text-theme-colored2">Say</span></h2>
<div class="title-flaticon">
<i class="flaticon-charity-alms"></i>
</div>
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="owl-carousel-3col" data-dots="">
<?php
if($total_num_of_rev > 0) { ?>
<div class="">
<?php
$numOfCols = 3;
$rowCount = 0;
foreach($review_list_data as $key => $review_data) { ?>
<div class="item">
<div class="testimonial style1">
<div class="comment bg-theme-colored">
<p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
</div>
<div class="thumb content mt-10 mb-10">
<?php
if($review_data['photo']) { ?>
<img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
<?php
} else { ?>
<img src="images/placeholder_avatar.jpg">
<?php
} ?>
</div>
<h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
<h6 class="title text-white mt-0 mb-15">Designer</h6>
</div>
</div>
</div>
<div class="">
<?php
$rowCount++;
} ?>
<?php
} ?>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
this is how it look
Screenshot 1
screenshot 2
any help?