Как создать несколько динамических слайдер изображения? [используя PHP, MySQL & amp; только ванильный JS! ]
Я новичок в программировании на PHP и JS и мне нужна помощь с проектом моего сайта.
В другом вопросе у меня была проблема с системой публикации изображений, которая решается:
SOS! Как отображать альбомы изображений в сообщениях? [используя только PHP и MYSQL].
Теперь я хочу изменить эту систему публикации с динамическими ползунками изображения. (следующий уровень ^^)
В конце должно быть возможно прокрутите вниз сообщения и в каждом посте с более чем 1 изображением должна быть возможность скользить влево & прямо через изображения этого альбома.
Слайдер изображений
Я вдохновил меня полноэкранным слайдером изображений: https://codepen.io/bradtraversy/pen/boydaE
и слайдер карусели: https://www.youtube.com/watch?v=KcdBOoK3Pfw
которые оба ванильные, но статические (без базы данных).
Ниже вы можете увидеть мой php файл, где все собрано вместе.
<!DOCTYPE html>
<html>
<body>
<?php
$db = mysqli_connect("localhost", "root", "", "post_images");
$result = mysqli_query($db, "SELECT * FROM posts");
while ($row = mysqli_fetch_array($result)) {
echo "<div class=\"post_container\">";
echo $row['post_title'];
echo "<div class=\"image_container\">";
SELECT img_file, img_title FROM images WHERE post_id = " .$rowx['id_post']);
if(mysqli_num_rows($resultx) > 0) {
if(mysqli_num_rows($resultx) == 1) {
echo "<div class=\"post_image_displayer\">";
while ($rowx = mysqli_fetch_array($resultx)) {
echo "<img src='../folder_image_uploads/".$rowx['img_file']."' >";
echo $rowx['img_title'];
}
echo "</div>";
}
elseif(mysqli_num_rows($resultx) > 1) {
echo "<div class=\"post_image_slider\">";
include_once 'incl_image_slider.php';
echo "</div>";
}
}
echo "</div>";
echo "</div>";
}
?>
</body>
</html>
Этот код работает отлично, если бы был только 1 слайдер на этой странице. Вы видите, я использовал include_once ‘incl_image_slider.php’; . Если бы я использовал только include ‘incl_image_slider.php’; , страница сходит с ума … (только слайдером изображений). Даже если у всего есть учебный класс и не уникальный Я бы.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="includes/incl_carousel_slider_style.css">
</head>
<div class="carousel-container">
<div class="carousel-slide">
<?php
$db = mysqli_connect("localhost", "root", "", "post_images");
$result = mysqli_query($db, "SELECT * FROM posts");
$row = mysqli_fetch_array($result);
$resultx = mysqli_query($db, "SELECT img_file, img_title FROM images WHERE post_id =".$row['id_post']);
$rowz = mysqli_fetch_all($resultx, MYSQLI_ASSOC);
echo "<img src='folder_img_uploads/".$rowz[0]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[1]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[2]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[3]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[4]['img_file']."' >";
?>
</div>
</div>
<button class="prevBtn">Prev</button>
<button class="nextBtn">Next</button>
<script src="incl_image_slider_app.js"></script>
Проблема в том, что я должен знать для каждого поста, сколько изображений внутри. Так что это не может быть использовано динамически с базой данных, у кого-то есть идея, что изменить?
Отчасти это из: https://codepen.io/bradtraversy/pen/boydaE
let sliderImages = document.querySelectorAll(".carousel-slide"),
arrowLeft = document.querySelector(".prevBtn"),
arrowRight = document.querySelector(".nextBtn"),
current = 0;
// Clear all images
function reset()
{
for (let i = 0; i < sliderImages.length; i++)
{
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide()
{
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft()
{
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Show next
function slideRight()
{
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function()
{
if (current === 0)
{
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function()
{
if (current === sliderImages.length - 1)
{
current = -1;
}
slideRight();
});
startSlide();
На самом деле этот слайдер изображений не скользит, не знаю почему? Но это показывает первое изображение поста. И это не возможно принести это несколько раз для каждого поста, в моем display.php
Я надеюсь, что есть кто-то, кто может мне помочь.
С уважением 🙂
Решение
Я думаю, вы хотите что-то подобное. Я использовал Flickity Slider (чистый JavaScript) вместо вашего JavaScript, потому что я не мог заставить это работать (но опять же, я едва могу кодировать цикл foreach в JavaScript :(), надеюсь, это даст вам кое-что для начала. 🙂
https://flickity.metafizzy.co/
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
</head>
<body>
<?php
$db = mysqli_connect("localhost", "root", "", "post_images");
$result = mysqli_query($db, "SELECT * FROM posts");
?>
<?php while ($row = mysqli_fetch_array($result)) : ?>
<div class="post_container">$row['post_title'];
<?php $resultx = mysqli_query($db, "SELECT img_file, img_title FROM images WHERE post_id = " .$row['id_post']); ?>
<?php if (mysqli_num_rows($resultx) == 1) : ?>
<div class="image_container">
<div class="post_image_displayer">
<?php while ($rowx = mysqli_fetch_array($resultx)) : ?>
<img src='../folder_image_uploads/<?php echo $rowx['img_file']; ?>'><?php echo $rowx['img_title']; ?>
<?php endwhile; ?>
</div>
</div>
<?php elseif(mysqli_num_rows($resultx) > 1) : ?>
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
<?php while ($rowx = mysqli_fetch_array($resultx)) : ?>
<div class="carousel-cell"><img src='../folder_image_uploads/<?php echo $rowx['img_file']; ?>' ></div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
</body>
</html>
Файлы CSS и JavaScript в заголовке включают плагин слайдера.
Затем первый SQL-запрос получает все сообщения, а цикл — над каждым.
Для каждого сообщения второй запрос SQL получает изображения для текущего сообщения.
Если есть только одно изображение, оно печатается внутри <div class="image_container">,
Если имеется более одного изображения, они печатаются внутри <div class="main-carousel"> который говорит плагин JavaScript вместе с data-flickity='{ "cellAlign": "left", "contain": true }' что он должен показать это в слайдере.
Отдельные изображения на слайдере печатаются внутри <div class="carousel-cell"> что также требуется плагином.
Это повторяется для всех изображений всех сообщений, вам не нужно использовать включаемый файл.
Обновление с ползунком по sinisake от эта почта
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="">
<!-- JavaScript -->
<script src=""></script>
</head>
<body>
<?php
$db = mysqli_connect("localhost", "root", "", "post_images");
$result = mysqli_query($db, "SELECT * FROM posts");
?>
<?php while ($row = mysqli_fetch_array($result)) : ?>
<div class="post_container">$row['post_title'];
<?php $resultx = mysqli_query($db, "SELECT img_file, img_title FROM images WHERE post_id = " .$row['id_post']); ?>
<?php if (mysqli_num_rows($resultx) == 1) : ?>
<div class="image_container">
<div class="post_image_displayer">
<?php while ($rowx = mysqli_fetch_array($resultx)) : ?>
<img src='../folder_image_uploads/<?php echo $rowx['img_file']; ?>'><?php echo $rowx['img_title']; ?>
<?php endwhile; ?>
</div>
</div>
<?php elseif(mysqli_num_rows($resultx) > 1) : ?>
<div class="slideshow-container">
<?php $rowsx = mysqli_fetch_all($resultx, MYSQLI_ASSOC); ?>
<?php foreach ($rowsx as $key => $rowx) : ?>
<div class="mySlides fade">
<div class="numbertext"><?php echo $key + 1; ?> / <?php echo count($rowsx); ?></div>
<img src='../folder_image_uploads/<?php echo $rowx['img_file']; ?>' style="width:100%">
<div class="text">Caption Text</div>
</div>
<?php endforeach; ?>
<a class="prev" >❮</a>
<a class="next">❯</a>
<div style="text-align:center">
<?php foreach ($rowsx as $rowx) : ?>
<span class="dot"></span>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
</body>
</html>
То, что я изменил здесь, я сохранил весь результат второго запроса SQL в массиве ($rowsx), потому что тогда я могу повторить это дважды (с foreach вместо while).
Первый раз, когда я зацикливаюсь, это распечатать отдельные изображения, и когда все изображения будут напечатаны, я зацикливаюсь на массиве второй раз, чтобы напечатать «точки» для навигации, потому что должно быть столько же точек, сколько в слайдере есть изображения
Другие решения
Других решений пока нет …