어떻게 이미지 슬라이드 쇼를 할 수 있습니까

-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

페이지 매김을 사용하여 조사하십시오. –

웹상의 콘텐츠 슬라이더 스크립트 또는 자습서를 찾기가 어렵지 않습니다. 이것은 * "방법"* 튜토리얼 사이트가 아닙니다 – 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

어떻게 이미지 슬라이드 쇼를 할 수 있습니까

답변

관련 문제