如何创建多个动态图像滑块? [使用PHP，MySQL和香草JS只！ ] [英] How to create multiple dynamic image slider ? [using PHP, MySQL & vanilla JS only ! ]

查看：97 发布时间：2020/7/3 20:54:48 javascript php mysql image posting

本文介绍了如何创建多个动态图像滑块? [使用PHP，MySQL和香草JS只！ ]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是PHP和JS编程的新手，我的网站项目需要帮助.
在另一个问题中，我遇到了图像发布系统的问题，该问题已解决:
https://codepen.io/bradtraversy/pen/boydaE
和旋转木马滑块: https://www.youtube.com/watch?v=KcdBOoK3Pfw
都是香草的但都是静态的(没有数据库).

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

I'm new to PHP and JS programming and need help with my website project.
In a other question, I had a problem with an image posting system, which is solved:
SOS! How to display image albums in posts? [using PHP and MYSQL only].

Now I want to modify this posting system with dynamic image sliders. (next Level ^^)
At the end, it must be possible to scroll down trough the posts and in each post with more then 1 image, it must be possible to slide left & right through the images of this album.

Image Slider
I inspired me by a full screen image slider: https://codepen.io/bradtraversy/pen/boydaE
and a carousel slider: https://www.youtube.com/watch?v=KcdBOoK3Pfw
which are both vanilla but static (without database).

Below you can see my php file, where everything comes together.

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

This code works perfectly, if there would be only 1 slider on this page. You see, I used include_once 'incl_image_slider.php'; . If I would use only include 'incl_image_slider.php'; , the page go crazy ... (only by the image slider). Even if everything has a class and no unique id.

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

问题是，我必须为每个帖子知道里面有多少张图片.因此，这不能与数据库一起动态使用，有人知道要更改什么?

The problem with this is, I have to know for each post, how many images inside. So this can't be used dynamically with a database, someone have an idea what to change?

部分来自: https://codepen.io/bradtraversy/pen/boydaE

Partly this is from: 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文件中，不可能为每个帖子多次使用此功能

我希望有人可以帮助我.
最好的问候:)

Actually this image slider don't slide, no idea why? But it shows the first image of a post. And it is not possible to bring this multiple times for each post, in my display.php

I hope there is someone who can help me.
Best Regards :)

推荐答案

我认为您想要这样的东西.我使用了Flickity Slider(纯JavaScript)而不是JavaScript，因为我无法正常工作(但是再说一次，我几乎无法在JavaScript :()中编写foreach循环，希望这可以给您一些开始. :)

I think you want something like this. I've used Flickity Slider (pure JavaScript) instead of your JavaScript because I couldn't get that working (but then again, I can barely code a foreach loop in JavaScript :( ), hopefully this will give you something to start with. :)

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文件包含滑块插件.

The CSS and JavaScript files in the header include the slider plugin.

然后，第一个SQL查询获取所有帖子，while循环遍历每个帖子.

Then, the first SQL query gets all of the posts, the while loops over each one.

对于每个帖子，第二个SQL查询获取当前帖子的图像.

For each post, the second SQL query gets the images for the current post.

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

If there's only one image, it is printed inside a <div class="image_container">.

如果图像不止一个，则将它们打印在<div class="main-carousel">内，该图像告诉JavaScript插件和data-flickity='{ "cellAlign": "left", "contain": true }'，需要在滑块中显示这些图像.

If there's more than one image, they're printed inside a <div class="main-carousel"> which tells the JavaScript plugin together with the data-flickity='{ "cellAlign": "left", "contain": true }' that it needs to show these in a slider.

滑块中的各个图像均打印在<div class="carousel-cell">内，插件也需要该图像.

The individual images in the slider are each printed inside a <div class="carousel-cell"> which is also required by the plugin.

对所有帖子的所有图片重复此操作，您无需使用包含文件.

This is repeated for all images of all posts, you don't need to use an include file.

在

Update with the slider by sinisake from this post

<!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="">  <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)

What I've changed here, I've stored the entire result of the second SQL query in an array ($rowsx), because then I can loop over it twice (with foreach instead of while).

我第一次遍历它是打印单个图像，当所有图像都打印完后，我再次遍历数组以打印导航的点"，因为需要有相同的数字点，因为滑块中有图像.

The first time I loop over it is to print the individual images, and when all images have been printed I loop over the array a second time to print the "dots" for the navigation, because there need to be the same number of dots as there are images in the slider.

这篇关于如何创建多个动态图像滑块? [使用PHP，MySQL和香草JS只！ ]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何创建多个动态图像滑块? [使用PHP，MySQL和香草JS只！ ] [英] How to create multiple dynamic image slider ? [using PHP, MySQL & vanilla JS only ! ]

问题描述

推荐答案

相关文章

PHP最新文章

热门教程

热门工具

登录关闭

如何创建多个动态图像滑块? [使用PHP，MySQL和香草JS只！ ] [英] How to create multiple dynamic image slider ? [using PHP, MySQL &amp; vanilla JS only ! ]

问题描述

推荐答案

相关文章

PHP最新文章

热门教程

热门工具

登录 关闭

如何创建多个动态图像滑块? [使用PHP，MySQL和香草JS只！ ] [英] How to create multiple dynamic image slider ? [using PHP, MySQL & vanilla JS only ! ]

登录关闭