I m trying to get the output of owl carousel dynamically using bootstrap but didnot get the desired output in codeigniter framework 3.0.1 version - codeigniter

Question

This is what i want to display as slider when it slides both the rows move left or right correspondingly
a b c
a b c
<>
but what i have got is given below
a b c
<>
While getting images from database can't get the logic to display it by two rows.How is it possible??
<?php if($sliderimages):?>
<div class="owl-carousel client-slider owl-theme">
<?php foreach($sliderimages as $sliderimage):?>
<div class="item">
<div class="product-box">
<div class="product-img">
<img src="<?php echo base_url('assets/sliders/'.$sliderimage->file_name)?>" class="img-full" alt="" />
</div>
</div>
</div>
<?php else: ?>
<h5 class="text-alter"> sliders are not available</h5>
<?php endif;?>
</div>
In static condition the html code be like
<div class="owl-carousel client-slider owl-theme">
<div class="item">
<div class="product-box">
<div class="product-img"><img src="images/logos/Acer.jpg" class="img-full" alt=""/> </div>
<div class="product-img"><img src="images/logos/Alfa.jpg" class="img-full" alt=""/> </div>
</div>
</div>
I have to display images in carousel in two rows dynamically from database as static condition i have given above.The images fetch from db are to be placed in two rows. How can i get the result as static condition .Can anyone help me to solve this

Answer 1

I have updated my answer. With a simple CSS and HTML hack you don't need to alter the Javascript code, but you need to set some margins in your CSS and at initiation of your owl-carousel. Start by creating a flat array with file names in the sort order you want. This could be done in a Codeigniter Controller method or in the View:
// CREATE A FLAT ARRAY WITH JUST THE FILE NAMES FROM YOUR ORIGINAL ARRAY OF PHP OBJECTS
foreach($sliderimages as $sliderimage){
$result[] = $sliderimage->file_name;
}
// YOU NOW HAVE A FLAT ARRAY WITH FILE NAMES IN THE SORT ORDER YOU WANT TO DISPLAY THEM
// FOR EXAMPLE: array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg');
// NOW WE NEED TO ALTERNATE THE SORT ORDER IN THE ARRAY.
// 1: SPLIT THE ARRAY IN THE MIDDLE AND CREATE TWO NEW...
list($array1, $array2) = array_chunk($result, ceil(count($result) / 2));
// 2: EMPTY THE RESULT ARRAY TO MAKE ROOM FOR THE NEW RESULT
$result = array();
// COMBINE THE TWO NEW ARRAYS INTO ONE ARRAY WITH AN ALTERNATE SORT ORDER
array_map(function($item1, $item2) use (&$result)
{
$result[] = $item1;
$result[] = $item2;
}, $array1, $array2);
// WE USE FILTER TO REMOVE ARRAY ITEMS WITH EMPTY STRINGS
$result = array_filter($result);
Now we got an array with alternate sort order that is needed to be able to display the images in the sort order that you want with this suggested solution.
Loop through your result array and print the HTML. Here you need to control the odd and even rows to get it right:
// CREATE A COUNTER TO CHECK ODD/EVEN ROWS
$counter = 1;
// NUMBER OF IMAGES TOTAL
$number_of_images = count($result);
// IF WE HAVE IMAGES...
if($number_of_images > 0){
//START OWL CAROUSEL DIV
echo '<div class="owl-carousel owl-theme">';
foreach($result as $img) {
if ($counter % 2 == 0){ // EVEN ROW
echo ' <div class="product-box"><div class="product-img"><img src="'.base_url('assets/sliders/'.$img).'" class="img-full" alt=""/></div></div>';
// CLOSE ITEM DIV ON ODD ROWS
echo '</div>';
} else { // ODD
//OPEN A NEW DIV ITEM ON ODD ROWS
echo '<div class="item">';
// ECHO THE DIV WITH THE IMAGE
echo ' <div class="product-box"><div class="product-img"><img src="'.base_url('assets/sliders/'.$img).'" class="img-full" alt=""/></div></div>';
// CHECK TO SEE IF THIS IS THE LAST ROW
if($counter==$number_of_images){
// CLOSE ITEM DIV ON LAST ROW
echo '</div>';
}
} // END ODD/EVEN CHECK
$counter++;
} // END FOREACH
//END OWL CAROUSEL DIV
echo '</div>';
// NO SLIDER IMAGES AVAILABLE
} else {
echo '<h5 class="text-alter"> sliders are not available</h5>';
}
Now you should have printed HTML looking something like this:
<div class="owl-carousel owl-theme">
<div class="item">
<div class="product-box"><div class="product-img"><img src="images/logos/1.jpg" class="img-full" alt=""/></div></div>
<div class="product-box"><div class="product-img"><img src="images/logos/4.jpg" class="img-full" alt=""/></div></div>
</div>
<div class="item">
<div class="product-box"><div class="product-img"><img src="images/logos/2.jpg" class="img-full" alt=""/></div></div>
<div class="product-box"><div class="product-img"><img src="images/logos/5.jpg" class="img-full" alt=""/></div></div>
</div>
<div class="item">
<div class="product-box"><div class="product-img"><img src="images/logos/3.jpg" class="img-full" alt=""/></div></div>
<div class="product-box"><div class="product-img"><img src="images/logos/6.jpg" class="img-full" alt=""/></div></div>
</div>
</div>
The only thing you then have left to do is to set the margins for the images in CSS:
.product-box { margin-bottom: 10px; }
And set the margin and the number of images to show per row upon initiation of you owl-carousel (change the item property to items:4 if you want to show four images/row):
$('.owl-carousel').owlCarousel({
margin:10,
items:3
});
And the results should become:
Codepen example
https://codepen.io/MicKri/pen/vYpjqPy
More reading and examples
Owl carousel multiple rows
https://w3codemasters.in/multiple-rows-carousel-by-owl-carousel/