如何创建多个动态图像滑块？ [仅使用 PHP、MySQL & vanilla JS！ ]

Question

我是 PHP 和 JS 编程的新手，我的网站项目需要帮助。
在另一个问题中，我遇到了图像posting系统的问题，已解决：
.

现在我想用动态图像滑块修改这个 posting 系统。（下一级^^）
最后，必须可以 向下滚动 posts 并且在每个 post 有超过 1 张图像的情况下，必须可以 左右滑动浏览这张专辑的图片。

图片滑块
全屏图像滑块启发了我：https://codepen.io/bradtraversy/pen/boydaE
和一个旋转木马滑块：https://www.youtube.com/watch?v=KcdBOoK3Pfw
它们都是普通的但静态的（没有数据库）。

您可以在下面看到我的 php 文件，所有内容都放在一起。

display.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'; ，页面就会变得疯狂......（仅通过图像滑块）。即使所有东西都有 class 并且没有唯一的 id。

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>

这个问题是，我必须知道每个 post，里面有多少张图片。所以这不能动态地与数据库一起使用，有人知道要更改什么吗？

incl_image_slider_app.js

部分来自：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();

实际上这个图像滑块不会滑动，不知道为什么？但是它显示的是post的第一个图像。 而且在我的 display.php 中不可能为每个 post 带来多次

我希望有人能帮助我。
最好的问候:)

Answer 1

我想你想要这样的东西。我使用了 Flickity Slider（纯 JavaScript）而不是你的 JavaScript，因为我无法让它工作（但话又说回来，我几乎无法在 JavaScript 中编写 foreach 循环 :( )，希望这会给你一些开始。:)

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>

header 中的 CSS 和 JavaScript 文件包含滑块插件。

然后，第一个 SQL 查询获取所有 post，while 循环遍历每个。

对于每个 post，第二个 SQL 查询获取当前 post 的图像。

如果只有一张图片，则打印在 <div class="image_container">.

内

如果有不止一张图片，它们会打印在 <div class="main-carousel"> 中，它告诉 JavaScript 插件和 data-flickity='{ "cellAlign": "left", "contain": true }' 它需要在滑块中显示这些。

滑块中的各个图像均打印在 <div class="carousel-cell"> 中，这也是插件所必需的。

对所有 post 的所有图像重复此操作，您不需要使用包含文件。

通过 sinisake 从 this post

使用滑块更新

<!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" >&#10094;</a>
                  <a class="next">&#10095;</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).

我第一次遍历它是为了打印单个图像，当所有图像都打印完后，我第二次遍历数组以打印 "dots" 用于导航，因为需要点数与滑块中的图像数相同。

如何创建多个动态图像滑块？ [仅使用 PHP、MySQL & vanilla JS！ ]

How to create multiple dynamic image slider ? [using PHP, MySQL & vanilla JS only ! ]

javascript

php

mysql

image

posting

display.php

incl_image_slider.php

incl_image_slider_app.js