如何使用 foreach 循环让每个滑块像 https://newyork.craigslist.org/search/fua 一样滑动

【问题标题】：How can I use foreach loop to get each slider to slid like https://newyork.craigslist.org/search/fua如何使用 foreach 循环让每个滑块像 https://newyork.craigslist.org/search/fua 一样滑动
【发布时间】：2017-03-02 12:59:27
【问题描述】：

我想使用 foreach 循环使我的滑块像下面的示例一样工作，因为我正在从数据库中查询我的图像。请问我怎样才能做到这一点？将@https://newyork.craigslist.org/search/fua 视为案例研究

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  
  
  <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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <title></title>
  </head>
  <body>

<div class="container">
	<div class="row">
    	<!-- BEGIN PRODUCTS -->
  		<div class="col-md-3 col-sm-6">
    		<span class="thumbnail">
      		<div id="carousel-example-gener" class="carousel slide" data-ride="carousel" data-interval="false" >
      

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placehold.it/500x400&text=1"  alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=2" alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=3" alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=4"  alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=5" alt="...">
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-gener" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-gener" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
      			<h4>Product Tittle</h4>
      			<div class="ratings">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star-empty"></span>
                </div>
      			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      			<hr class="line">
      			<div class="row">
      				<div class="col-md-6 col-sm-6">
      					<p class="price">$29,90</p>
      				</div>
      				<div class="col-md-6 col-sm-6">
      					<button class="btn btn-success right" > BUY ITEM</button>
      				</div>
      				
      			</div>
    		</span>
  		</div>
  	  		<div class="col-md-3 col-sm-6">
    		<span class="thumbnail">
      		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false" >
      

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placehold.it/500x400&text=1"  alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=2" alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=3" alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=4"  alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=5" alt="...">
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
      			<h4>Product Tittle</h4>
      			<div class="ratings">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star-empty"></span>
                </div>
      			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      			<hr class="line">
      			<div class="row">
      				<div class="col-md-6 col-sm-6">
      					<p class="price">$29,90</p>
      				</div>
      				<div class="col-md-6 col-sm-6">
      					<button class="btn btn-success right" > BUY ITEM</button>
      				</div>
      				
      			</div>
    		</span>
  		</div>
  	  	  		<div class="col-md-3 col-sm-6">
    		<span class="thumbnail">
      		<div id="carousel-example-generic3" class="carousel slide"  data-interval="false" >
      

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placehold.it/500x400&text=1"  alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=2" alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=3" alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=4"  alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=5" alt="...">
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic3" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic3" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
      			<h4>Product Tittle</h4>
      			<div class="ratings">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star-empty"></span>
                </div>
      			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      			<hr class="line">
      			<div class="row">
      				<div class="col-md-6 col-sm-6">
      					<p class="price">$29,90</p>
      				</div>
      				<div class="col-md-6 col-sm-6">
      					<button class="btn btn-success right" > BUY ITEM</button>
      				</div>
      				
      			</div>
    		</span>
  		</div>
  		  	  		<div class="col-md-3 col-sm-6">
    		<span class="thumbnail">
      		<div id="carousel-example-generic4" class="carousel slide" data-ride="carousel" data-interval="false" >
      

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
       <div class="item active">
          <img src="http://placehold.it/500x400&text=1"  alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=2" alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=3" alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=4"  alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/500x400&text=5" alt="...">
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic4" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic4" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
      			<h4>Product Tittle</h4>
      			<div class="ratings">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star-empty"></span>
                </div>
      			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      			<hr class="line">
      			<div class="row">
      				<div class="col-md-6 col-sm-6">
      					<p class="price">$29,90</p>
      				</div>
      				<div class="col-md-6 col-sm-6">
      					<button class="btn btn-success right" > BUY ITEM</button>
      				</div>
      				
      			</div>
    		</span>
  		</div>
  		<!-- END PRODUCTS -->
	</div>
</div>


  </body>
</html>

下面是我尝试使用的 foreach 循环，但它没有给我相同的结果。单击导航按钮时，只有第一帧在滑动。请帮忙

<!-- BEGIN PRODUCTS -->
  		
      			 <?php 
        // foreach image.... display image
        foreach($images as $image){
         
           
      ?>
      <div class="col-md-3 col-sm-6">
    		<span class="thumbnail">
      <?php 
     echo "<img class='img display_images img-thumbnail'  src='../uploads/{$image['image1']}' alt='{$image['company']}' style='width:400px; height:250px;'>"; 
     
     echo "<img class='img display_images img-thumbnail'  src='../uploads/{$image['image2']}' alt='{$image['company']}' style='width:400px; height:250px;'>";
     
     echo "<img class='img display_images img-thumbnail'  src='../uploads/{$image['image3']}' alt='{$image['company']}' style='width:400px; height:250px;'>";
     
      echo "<img class='img display_images img-thumbnail'  src='../uploads/{$image['image4']}' alt='{$image['company']}' style='width:400px; height:250px;'>";
      
       echo "<img class='img display_images img-thumbnail'  src='../uploads/{$image['image5']}' alt='{$image['company']}' style='width:400px; height:250px;'>";
      
      
      ?>
      			<h4><?php echo $image["company"]; ?></h4>
      			<p><?php echo $image["description"]; ?> </p>
      			<p><b>EMAIL:</b> <a href="#"><?php echo $image["email"]; ?></a></p>
      			<hr class="line">
      			<div class="row">
      				<div class="col-md-6 col-sm-6">
      					<p class="price">$29,90</p>
      				</div>
      				<div class="col-md-6 col-sm-6">
      					<button class="btn btn-success right" > BUY ITEM</button>
      				</div>
      				
      			</div>
      			
    		</span>
  		</div>
 
  		<?php
        }
    ?>
  
<!-- END PRODUCTS -->

【问题讨论】：

  • 你应该发布你尝试过的东西
  • @bxN5 是对的。问题本身非常通用...您可以将图像直接从 PHP 渲染到 HTML DOM，或者您可以创建图像 URL 的 javascript 数组，然后使用 javascript 将其动态渲染到 HTML DOM，然后初始化滑块。跨度>

标签： php html css twitter-bootstrap


【解决方案1】：

首先编写选择查询以从数据库中获取图像，然后循环遍历图像。

foreach($images as $slider_image)
{
    <div class="item">
      <img src="<?php echo $slider_image; ?>" width="500" height="400" alt="...">
    </div>
}

希望这会有所帮助。

【讨论】：

    猜你喜欢
    • 2021-08-07
    • 2013-05-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-20
    • 2013-05-07
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode