foreachループを使用して各スライダをhttps://newyork.craigslist.org/search/fuaのようにスライドさせるにはどうすればいいですか

-2

foreachループを使用して、データベースから自分のイメージをクエリしているので、。どうすればこれを達成できますか？ケーススタディ以下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"> 
 
\t <div class="row"> 
 
    \t <!-- BEGIN PRODUCTS --> 
 
    \t \t <div class="col-md-3 col-sm-6"> 
 
    \t \t <span class="thumbnail"> 
 
     \t \t <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> 
 
     \t \t \t <h4>Product Tittle</h4> 
 
     \t \t \t <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> 
 
     \t \t \t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
 
     \t \t \t <hr class="line"> 
 
     \t \t \t <div class="row"> 
 
     \t \t \t \t <div class="col-md-6 col-sm-6"> 
 
     \t \t \t \t \t <p class="price">$29,90</p> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t <div class="col-md-6 col-sm-6"> 
 
     \t \t \t \t \t <button class="btn btn-success right" > BUY ITEM</button> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t 
 
     \t \t \t </div> 
 
    \t \t </span> 
 
    \t \t </div> 
 
    \t \t \t <div class="col-md-3 col-sm-6"> 
 
    \t \t <span class="thumbnail"> 
 
     \t \t <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> 
 
     \t \t \t <h4>Product Tittle</h4> 
 
     \t \t \t <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> 
 
     \t \t \t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
 
     \t \t \t <hr class="line"> 
 
     \t \t \t <div class="row"> 
 
     \t \t \t \t <div class="col-md-6 col-sm-6"> 
 
     \t \t \t \t \t <p class="price">$29,90</p> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t <div class="col-md-6 col-sm-6"> 
 
     \t \t \t \t \t <button class="btn btn-success right" > BUY ITEM</button> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t 
 
     \t \t \t </div> 
 
    \t \t </span> 
 
    \t \t </div> 
 
    \t \t \t \t <div class="col-md-3 col-sm-6"> 
 
    \t \t <span class="thumbnail"> 
 
     \t \t <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> 
 
     \t \t \t <h4>Product Tittle</h4> 
 
     \t \t \t <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> 
 
     \t \t \t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
 
     \t \t \t <hr class="line"> 
 
     \t \t \t <div class="row"> 
 
     \t \t \t \t <div class="col-md-6 col-sm-6"> 
 
     \t \t \t \t \t <p class="price">$29,90</p> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t <div class="col-md-6 col-sm-6"> 
 
     \t \t \t \t \t <button class="btn btn-success right" > BUY ITEM</button> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t 
 
     \t \t \t </div> 
 
    \t \t </span> 
 
    \t \t </div> 
 
    \t \t \t \t \t <div class="col-md-3 col-sm-6"> 
 
    \t \t <span class="thumbnail"> 
 
     \t \t <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> 
 
     \t \t \t <h4>Product Tittle</h4> 
 
     \t \t \t <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> 
 
     \t \t \t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
 
     \t \t \t <hr class="line"> 
 
     \t \t \t <div class="row"> 
 
     \t \t \t \t <div class="col-md-6 col-sm-6"> 
 
     \t \t \t \t \t <p class="price">$29,90</p> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t <div class="col-md-6 col-sm-6"> 
 
     \t \t \t \t \t <button class="btn btn-success right" > BUY ITEM</button> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t 
 
     \t \t \t </div> 
 
    \t \t </span> 
 
    \t \t </div> 
 
    \t \t <!-- END PRODUCTS --> 
 
\t </div> 
 
</div> 
 

 

 
    </body> 
 
</html>

としてhttps://newyork.craigslist.org/search/fua @探して使用しようとしていますforeachループですが、それは私に同じ結果を与えていません。ナビゲーションボタンがクリックされると、最初のフレームだけがスライドします。

<!-- BEGIN PRODUCTS --> 
 
    \t \t 
 
     \t \t \t <?php 
 
     // foreach image.... display image 
 
     foreach($images as $image){ 
 
      
 
      
 
     ?> 
 
     <div class="col-md-3 col-sm-6"> 
 
    \t \t <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;'>"; 
 
     
 
     
 
     ?> 
 
     \t \t \t <h4><?php echo $image["company"]; ?></h4> 
 
     \t \t \t <p><?php echo $image["description"]; ?> </p> 
 
     \t \t \t <p><b>EMAIL:</b> <a href="#"><?php echo $image["email"]; ?></a></p> 
 
     \t \t \t <hr class="line"> 
 
     \t \t \t <div class="row"> 
 
     \t \t \t \t <div class="col-md-6 col-sm-6"> 
 
     \t \t \t \t \t <p class="price">$29,90</p> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t <div class="col-md-6 col-sm-6"> 
 
     \t \t \t \t \t <button class="btn btn-success right" > BUY ITEM</button> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t 
 
     \t \t \t </div> 
 
     \t \t \t 
 
    \t \t </span> 
 
    \t \t </div> 
 
    
 
    \t \t <?php 
 
     } 
 
    ?> 
 
    
 
<!-- END PRODUCTS -->

出典

2017-03-02 Onyeama Eric Clifford

あなたが試したものを投稿してください。 – bxN5

@ bxN5が正しいです。質問自体は非常に一般的です... PHPからHTML DOMに画像を直接レンダリングするか、画像URLのjavascript配列を作成し、javascriptを使用してHTML DOMに動的にレンダリングした後、スライダを初期化することができます。 –

まず、画像を介してデータベース、ループから画像を取得するために、選択クエリを作成する助けてください。

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

希望します。

出典

2017-03-02 13:08:02

foreachループを使用して各スライダをhttps://newyork.craigslist.org/search/fuaのようにスライドさせるにはどうすればいいですか

答えて

関連する問題