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

Question

我为我的朋友制作了一个相对简单的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>";
                   } 
       ?>

（当然有滑块的附加CSS和javascript，但这对我来说并不重要）

但我还有一个问题......他们自动按字母排序，但我希望他们按照我制作存储图像的文件夹的日期排序。 有谁知道怎么做？

也许它的问题很多，但是如果有可能我还可以在每个文件夹中显示该文件夹中有多少图像？

Answer 1

您只需稍微修改一下代码，然后使用每个滑块的内容围绕div执行循环。如果您使用光滑的滑块（http://kenwheeler.github.io/slick/），那么它应该非常简单。

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

_latin1'ä'

第二步是确保您初始化滑块：

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

$(document).ready(function(){
    $('.gallery-list').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4
});

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

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