Php Foreach：循环显示在滑块中的图像_Php_Codeigniter_Foreach

Php Foreach：循环显示在滑块中的图像

php codeigniter

Php Foreach：循环显示在滑块中的图像,php,codeigniter,foreach,Php,Codeigniter,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)

我使用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 foreach($slider_info as $key=>$slider)

为此：

<?php foreach($slider_info as $slider)

因为循环中不需要键值，所以需要获取数组及其值，请尝试以下代码：活动类必须附加在第一张幻灯片上，而不是全部

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

你尝试的HTML输出是什么？我认为不合适，这个类应该只存在于当前幻灯片中，对于其他每一张幻灯片，这个应该被删除。当你说事情没有按预期工作时，替换为，你是什么意思？没有显示图像？另外，请正确格式化代码，以便我们知道最后一个div的结束位置，或者是否缺少div@JimWright，它一个接一个地水平显示所有图像，但滑块力不起作用。。！滑块的问题可能是javascript问题，所以这是另一个问题。在循环的这一步之前，尝试将静态图像插入旋转木马并修复plugin的javascript调用，这个问题是关于php和循环的。请回答这个问题。如果这个问题很接近，请关闭它并接受一个答案，以帮助其他有同样问题的人@Keynesuse下一个旋转木马按钮更改幻灯片。我单击了next prev按钮，但它没有响应新的图像。上面的代码已水平显示了所有图像one@Keynes：plz在项目中的单独文件中运行上述代码。它应该有用。请回答这个问题