如何将WordPress Gallery缩略图更改为Sliding？

Question

在我的网站中，用户可以将照片上传到某个页面，但如果有大量照片，缩略图会一直显示下来。

缩略图的布局不断下降并占用大量空间：

有没有办法将缩略图更改为滑动？

这是代码

<?php if ( apply_filters( 'horizon_submission_listing_metabox_allowed', true, 'gallery', get_the_author_meta('ID') ) ): ?>
    <?php $gallery = get_post_meta( get_the_ID(), HORIZON_LISTING_PREFIX . 'gallery', true ); ?>
    <?php if ( ! empty( $gallery ) && is_array( $gallery ) ) : ?>
        <div class="listing-detail-section" id="listing-detail-section-gallery">
            <h2 class="page-header"><?php echo $section_title; ?></h2>

            <div class="listing-detail-gallery-wrapper" >
                <div class="listing-detail-gallery" >
                    <?php $index = 0; ?>
                    <?php foreach ( $gallery as $id => $src ) : ?>
                        <?php $img = wp_get_attachment_image_src( $id, 'large' ); ?>
                        <?php $src = $img[0]; ?>
                        <a href="<?php echo esc_url( $src ); ?>" rel="listing-gallery" data-item-id="<?php echo esc_attr( $index++ ); ?>">
                            <span class="item-image" data-background-image="<?php echo esc_url( $src ); ?>"></span><!-- /.item-image -->
                        </a>
                    <?php endforeach; ?>
                </div>


                <!-- /.listing-detail-gallery -->

                <div class="listing-detail-gallery-preview" data-count="<?php echo count( $gallery ) ?>">
                    <div class="listing-detail-gallery-preview-inner">
                        <?php $index = 0; ?>
                        <?php foreach ( $gallery as $id => $src ) : ?>
                            <div data-item-id="<?php echo esc_attr( $index++ ); ?>">
                                <?php $img = wp_get_attachment_image_src( $id, 'thumbnail' ); ?>
                                <?php $img_src = $img[0]; ?>
                                <img src="<?php echo $img_src; ?>" alt="">
                            </div>
                        <?php endforeach; ?>
                    </div><!-- /.listing-detail-gallery-preview-inner -->
                </div><!-- /.listing-detail-gallery-preview -->
            </div><!-- /.listing-detail-gallery-wrapper -->
        </div><!-- /.listing-detail-section -->
    <?php endif; ?>
<?php endif; ?>

Answer 1

如果您想自己编写代码，那么您需要在CSS中应用一些更改并添加javascript代码以创建滑块导航。 最简单的方法是使用例如jQuery，隐藏所有图像并仅显示当前正在查看的图像。 您可以使用所有导航按钮来协调显示/隐藏照片。

提供额外功能的更高级解决方案是使用滑块插件，例如：https://wordpress.org/plugins/ultimate-responsive-image-slider/