foreach:循环图像出现在滑块中

我正在使用foreach循环显示在滑块中出现的图像。结果集如下：

array (size=4)
  0 => 
    array (size=1)
      'file_name' => string 'SHG_Petty_shop2.jpg' (length=19)
  1 => 
    array (size=1)
      'file_name' => string 'Manavanur_Statue_innaug3.jpg' (length=28)
  2 => 
    array (size=1)
        'file_name' => string 'SHG_Group_meeting6.jpg' (length=22)
  3 => 
    array (size=1)
       'file_name' => string 'Low_cost_toilet4.jpg' (length=20)

以下是我为使滑块的代码。

<?php foreach($slider_info as $key=>$slider) 
                        { ?> 
                         <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img style="height: 300px;width:100%;" src="<?php //echo base_url();?>upload/sliderimages/<?php echo $slider['file_name']; ?>" height="100" alt="Image of every carousel"/>
   </div>
                    </div>  
            <?php } ?>

，但是事情无法正常工作。.我希望结果集中出现在图像旋转木马中的所有图像。我正在尝试在CodeIgniter中使用foreach循环。我在滑块中获得了所有图像，但是它水平显示，滑块无法正常工作。

尝试以下代码：必须将"主动"类附加在第一个幻灯片上，而不是全部。

<?php
    $slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
    $slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
    $slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
    $slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
    $slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
      <h2>Carousel Example</h2>  
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
         <?php foreach($slider_info as $key=>$slider) { ?> 
            <div class="item <?php echo ($key == 0) ? "active" : ""; ?> ">
                <img style="height: 300px;width:100%;" src="<?php  echo $slider['file_name']; ?>" height="100" alt="Image of every carousel"/>
           </div>
        <?php } ?>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    </body>
    </html>

尝试更改以下内容：

<?php foreach($slider_info as $key=>$slider)

：

<?php foreach($slider_info as $slider)

因为您不需要循环内的键值，所以您需要将数组带有其值

相关内容

最新更新

热门标签：