将下一个和上一个按钮添加到我的画廊

Question

我需要一些具有 jquery 技能的人的帮助。 我的问题是我有一个小的 6 倍缩略图，如下图所示。 我添加了 6x 空白图片。当我添加 7 张或更多图片并使用 next-prev 按钮跳转到下一张图片时，我想限制 6x 图片。

画廊图片是 ; http://hizliresim.com/ZDLrp3

html代码是;

<div class="content">
                    <h3>Photo Gallery</h1>
                     <hr/>
                      <ul id='da-thumbs' class='da-thumbs'>
                            <li><a class="swipebox" data-title="Image Title" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" /></a></li> 
                            <li>
                                <a class="swipebox" data-title="Image Title 2" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" />
                                </a>
                            </li>
                            <li>
                                <a class="swipebox" data-title="Image Title 3" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" />
                                </a>
                            </li>
                            <li>
                                <a class="swipebox" data-title="Image Title 4" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" />
                                </a>
                            </li>
                            <li>
                                <a class="swipebox" data-title="Image Title 5" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" />
                                </a>
                            </li>
                            <li>
                                <a class="swipebox" data-title="Image Title 6" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" />
                                </a>
                            </li>
                        </ul>                            
                        <div class="previous">
                            <a href="#" class="next-prev">&#8249; Geri</a>
                        </div>
                        <div class="next">
                            <a href="#" class="next-prev">İleri &#8250;</a>
                        </div>
                    <div class="clear"></div>

当然，当我单击小缩略图时，它会打开大的。图库触发代码是 ;

  // PHOTO GALLERY IMAGES
    jQuery(document).ready(function () {
        jQuery('#photos').click(function (e) {
            e.preventDefault();
            jQuery(this).lightGallery({
                dynamic: true,
                caption: true,
                thumbnail: true,
                desc: true,
                speed: 500,
                dynamicEl: [
                    {
                        "src": "images/photo.jpg",
                        "thumb": "images/thumb.jpg",
                        "caption": "Michael Stark",
                        "desc": "Quem legam expetendis"
            },
                    {
                        "src": "images/photo.jpg",
                        "thumb": "images/thumb.jpg",
                        "caption": "Michael Stark",
                        "desc": "Duis de mentitum"
            },
                    {
                        "src": "images/photo.jpg",
                        "thumb": "images/thumb.jpg",
                        "caption": "Michael Stark",
                        "desc": "Duis de mentitum"
            }
        ]
            });
        });
    });

感谢您的帮助！

Answer 1

您的 html 似乎是静态的，所以我会这样做：

对于 ul 图像 1 -6，添加 .active-da-thumbs 类

<ul id='da-thumbs' class='da-thumbs active-da-thumbs'>
....
</ul>

为图像 7 - 12 克隆你的 ul

<ul id='da-thumbs' class="da-thumbs'>....</ul>

同时为你的 a 分配类，以便我们可以在 js 中调用它：

<a href="#" class="next-prev thumbs-next">&#8249; Geri</a>
<a href="#" class="next-prev thumbs-prev">İleri &#8250;</a>

CSS，隐藏除活动的所有内容：

.da-thumbs { display: none }
.active-da-thumbs { display: block }

然后用jQuery隐藏和显示：

$('.thumbs-next').click(function() {
var currentSlide = $('.active-da-thumbs');
var nextSlide = currentSlide.next();

if(nextSlide.length === 0) {
  nextSlide = $('.da-thumbs').first();
}

currentSlide.fadeOut(600).removeClass('active-da-thumbs');
nextSlide.fadeIn(600).addClass('active-da-thumbs');

});


$('.thumbs-prev').click(function() {
var currentSlide = $('.active-da-thumbs');
var prevSlide = currentSlide.prev();

if(prevSlide.length === 0) {
  prevSlide = $('.da-thumbs').last();
}

currentSlide.fadeOut(600).removeClass('active-da-thumbs');
prevSlide.fadeIn(600).addClass('active-da-thumbs');

});

您可能需要将 ul 包装在 div 中，不确定 uls 将如何对 jQuery 做出反应。忘了提，但如果您想使用插件，请尝试查看 owl carousel。