Question

我正在使用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循环。我得到了滑块中的所有图像，但它水平显示，滑块无法工作。请帮助..

Answer 1

尝试改变这个：

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

到此：

<?php foreach($slider_info as $slider)

因为您不需要循环中的键值，所以需要使用其值来获取数组

Answer 2

试试这段代码：一个＆＃34;活跃＆＃34; class必须附加在第一张幻灯片上，而不是全部。

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

Foreach：循环图像出现在滑块中

2 个答案: