画像のスライドショーを行う方法

-5

私はこのコードを持っていて、jqueryを使用してスライドショーのようなデータベースからインポートした小さな画像をスライドするのに、どのようにボタン（左、右）を使うことができるか質問します。 ??私は、動的スライダーはスライダーに動的な画像や挿入を取るある動作します。このコードを持ってhttp://www.voirfilms.co 画像のスライドショーを行う方法

$PARAM_hote='localhost'; 
$PARAM_nom_bd='venteformation'; 
$PARAM_utilisateur='root'; 
$PARAM_mot_passe=''; 

try{ 
    $connexion = new PDO('mysql:host='.$PARAM_hote.';dbname='.$PARAM_nom_bd, $PARAM_utilisateur, $PARAM_mot_passe); 
} 
catch(Exception $e) { 
    echo 'Erreur : '.$e->getMessage().'<br />'; echo 'N° : '.$e->getCode(); 
} 
if (mysqli_connect_errno()) { 
echo "Echec de la connexion" ; 
exit(); 
} 
else 
{ 
    $RequetLivre = $connexion->query("select * from livre"); 
?> 
<div id="wrapper" class="col-lg-12"> 
    <div id="page-wrapper" > 
     <div class="container-fluid"> 
     <?php /**Block ROW 1 *****/?> 
     <div class="row"> 

       <div class="col-lg-12"> 
        <form name="f_livre" method="POST" action="verification.php"> 
         <fieldset> 
          <table width="" border="0"> 
           <tr> 
           <?php 
           while ($LivreRow = $RequetLivre->fetch(PDO::FETCH_ASSOC)) 
           { 
            echo "<div class='slideshow'>"; 
            echo"<td>"; 
            echo '<button type="submit" name="idl" value="'.$LivreRow['IDL'].'"><img src="data:image/jpeg;base64,'.base64_encode($LivreRow['IL']).'" width="240" height="300" id="'.$LivreRow['IDL'].'" /></button>'; 
            echo"</td></div>"; 

           } 
           </tr> 

          </table> 
         </fieldset> 
        </form> 
       </div> 
      </div><!-- /#ROW 1 --> 

     </div> 
    </div><!-- /#page-wrapper -->

出典

2016-12-24 de bois Michiel

ページネーションを使用して検索してください。 –

ウェブ全体でコンテンツスライダのスクリプトやチュートリアルを見つけるのは難しくありません。これはa *の "方法" *チュートリアルサイトではありません – charlietfl

問題は私がjqueryで何も知らないことです、なぜ私はこのアニメーションの技術的な言葉を知らないのですか： –

：ウェブサイトのためのあなたの助け

例をありがとうございました。

<div class="item <?php if($i==1) echo "active"; ?>"> //specifies image active

このコードでは、最初のイメージをアクティブにする必要があることを指定しています。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Dynamic Slider</title> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://use.fontawesome.com/0f773d63b5.js"></script> 

    <style> 
    /*SLIDER CSS*/ 
    /* Main carousel style */ 
    .carousel { 
     width: 100%; 

    } 

    /* Indicators list style */ 
    .article-slide .carousel-indicators { 
     bottom: 0; 
     left: 0; 
     margin-left: 5px; 
     width: 100%; 
    } 
    /* Indicators list style */ 
    .article-slide .carousel-indicators li { 
     border: medium none; 
     border-radius: 0; 
     float: left; 
     height: 54px; 
     margin-bottom: 5px; 
     margin-left: 0; 
     margin-right: 5px !important; 
     margin-top: 0; 
     width: 100px; /*here will be the size of */ 
    } 
    /* Indicators images style */ 
    .article-slide .carousel-indicators img { 
     border: 2px solid #FFFFFF; 
     float: left; 
     height: 54px; 
     left: 0; 
     width: 100px; 
    } 
    /* Indicators active image style */ 
    .article-slide .carousel-indicators .active img { 
     border: 2px solid #428BCA; 
     opacity: 0.7; 
    } 
    </style> 


    <script type="text/javascript"> 
     // SLIDER JQUERY 
     $('.carousel').carousel({ 
      interval: false 
     }); 
    </script> 

</head> 
<body> 
    <!--SECTION ABOUT PLACE--> 
    <section class="container-fluid"> 
     <div class="carousel slide article-slide carousel_size " id="article-photo-carousel"> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner"> 
       <?php 
       //ESATBLISH CONNECTION 
       $host = "localhost"; 
       $username_db = "USERNAME"; 
       $password_db = "PASSWORD"; 
       $databaseName = "DATABASE"; 

       $link = new mysqli ($host, $username_db, $password_db, $databaseName); 

       //check connection 
       if($link->connect_error){ 
        die ("connection failed : ".$link->connect_error); 
       } 

       //DISPLAY IMAGESIN SIDE SLIDER 
       $id = $_GET['profileId']; 

       $img_sql = "SELECT * FROM gallery WHERE profileId='$id' LIMIT 5"; 
       $img_res =$link->query($img_sql); 

       if($img_res){ 
       $i=0; 
        while($row=$img_res->fetch_assoc()){ 
        $i++; 
        ?> 
         <div class="item <?php if($i==1) echo "active"; ?>"> 
         <img alt="" title="" src="admin/uploads/<?php echo $row['image'];?>"> 
         </div> 
        <?php 
        } 
       } 
       ?> 

      </div> 

      <!-- Left and right controls --> 
      <a class="left carousel-control" href="#article-photo-carousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#article-photo-carousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div> 
    </section>  

</body> 
</html>

出典

2016-12-25 02:17:57

画像のスライドショーを行う方法

答えて

関連する問題