как я могу сделать слайд-шоу изображений

Question

как я могу сделать слайд-шоу изображений

у меня есть этот код, и я хочу спросить, как я могу использовать кнопки (влево, вправо), чтобы скользить небольшие изображения, которые я импортировал из базы данных, как слайд-шоу с использованием 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 -->

-5

jquery php slideshow

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

У меня есть этот код, который работает, который динамический слайдер берет динамические изображения и вставляет в слайдер.

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

Этот код выше указывает, что 1-е изображение должно быть активным.

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

0