Php 如何从一个目录中创建多个可滑动的图像库？（光滑滑块）

我为我的一个朋友制作了一个相对简单的html/css/php网站。但现在他想要一个页面，我可以在其中展示画廊中的活动照片（每个活动大约100张照片）

我已经在网上搜索了一些代码，我现在的代码显示了该目录中的所有图片，但是如果每个活动有100张图片，页面就会变大

所以现在我想知道这些照片是否可以放在一个滑块或类似的东西

           <?php 

                $dirs = glob('images/*', GLOB_ONLYDIR);
                foreach($dirs as $val) {
                    echo '<div class="gallery">';
                    echo "<a><h3><span>&raquo;</span> ".basename($val). "</h3></a>"; 
                    echo '<ul class="gallery-list">';
                $files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
                foreach($files as $file) {
                    echo "<li><a href='".$file."' ><img src='" . $file . "'></a></li> \r\n";
                 }
                    echo "</ul>";
                    echo "</div>";
                } 

            ?>

[--编辑--]

我设法将我已有的代码与slickslider结合起来

        <?php 
                $dirs = glob('images/*', GLOB_ONLYDIR);
                foreach($dirs as $val) {
                    echo "<div class='gallery-wrapper'";
                    echo "<a><h3>".basename($val). "</h3></a>"; 
                    echo '<div class="slider-photos">';         
                    $files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);                        
                foreach($files as $file) {
                    echo "<div class='slide'><a href='".$file."' ><img src='" . $file . "'></a></div> \r\n";    
                       }
                    echo "</div>";
                    echo "</div>";
                   } 
       ?>

---

您只需稍微修改代码，并使用每个滑块的内容围绕div执行循环。如果您使用的是slick slider（），那么它应该非常简单

第一步是确保您拥有所有必需的库：

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

}))

第三步是使用此模板正确构造html：

<div class="gallery-list">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
</div>


你的内容
你的内容
你的内容

在你的情况下，我认为这就是你需要的：

<?php 

            $dirs = glob('images/*', GLOB_ONLYDIR);
            foreach($dirs as $val) {
                echo '<div class="gallery">';
                echo "<a><h3><span>&raquo;</span> ".basename($val). "</h3></a>"; 
                echo '<div class="gallery-list">';
            $files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
            foreach($files as $file) {
                echo "<div><a href='".$file."' ><img src='" . $file . "'></a></div> \r\n";
             }
                echo "</div>";
                echo "</div>";
            } 

        ?>


当然可以。你的问题是什么？只是可能性？然后在1000个jquery滑块中寻找一个。我喜欢BXSLiderTanks的回复，我知道这是有可能的。我已经在网站上使用了一个光滑的滑块，但我不知道如何从我的目录中获取图像。你也有这个部分。首先，像代码一样，在侧面打印所有图像。然后应用Javascript滑块。滑块将隐藏所有图像，仅显示当前选定的图像。请看下面的示例：“将隐藏所有图像并仅显示当前选定图像”是什么意思？
<?php 

            $dirs = glob('images/*', GLOB_ONLYDIR);
            foreach($dirs as $val) {
                echo '<div class="gallery">';
                echo "<a><h3><span>&raquo;</span> ".basename($val). "</h3></a>"; 
                echo '<div class="gallery-list">';
            $files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
            foreach($files as $file) {
                echo "<div><a href='".$file."' ><img src='" . $file . "'></a></div> \r\n";
             }
                echo "</div>";
                echo "</div>";
            } 

        ?>