我尝试使用bootstrap动态获取owl carousel的输出，但在codeigniter框架3.0.1版本中没有获得所需的输出

Question

这就是我想在滑动时显示为滑块的内容，两行相应地向左或向右移动

a b c

a b c

<>

但是我得到的在下面给出

a  b  c
  <>

从数据库获取图片却无法得到两行显示的逻辑，怎么可能呢？

<?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>

在静态条件下，html 代码如下

<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> 

我必须从数据库动态地在轮播中显示图像，作为我上面给出的静态条件。从数据库获取的图像将放置在两行中。我怎样才能得到静态条件的结果。任何人都可以帮我解决这个问题吗

Answer 1

我已经更新了我的答案。通过简单的 CSS 和 HTML hack，您不需要更改 Javascript 代码，但需要在 CSS 中以及在 owl-carousel 启动时设置一些边距。首先创建一个平面数组，其中文件名按照您想要的排序顺序排列。这可以在 Codeigniter 控制器方法或视图中完成：

// 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);

现在我们得到了一个具有备用排序顺序的数组，需要能够使用此建议的解决方案以您想要的排序顺序显示图像。

循环结果数组并打印 HTML。这里需要控制奇数行和偶数行才能正确：

// 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>';    
}

现在您应该打印出如下所示的 HTML：

<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>

您唯一要做的就是在 CSS 中设置图像的边距：

.product-box { margin-bottom: 10px; }

并设置边距和在启动 owl-carousel 时每行显示的图像数量（如果您想每行显示四个图像，请将项目属性更改为

items:4

）：

$('.owl-carousel').owlCarousel({
                     margin:10,
                     items:3
                     });

结果应该变成：

Codepen 示例

https://codepen.io/MicKri/pen/vYpjqPy

更多阅读和示例

猫头鹰旋转木马多行

https://w3codemasters.in/multiple-rows-carousel-by-owl-carousel/