单击图库中的缩略图时显示 Swiper 滑块

如何解决单击图库中的缩略图时显示 Swiper 滑块?

开发过程中遇到单击图库中的缩略图时显示 Swiper 滑块的问题如何解决?下面主要结合日常开发的经验,给出你关于单击图库中的缩略图时显示 Swiper 滑块的解决方法建议,希望对你解决单击图库中的缩略图时显示 Swiper 滑块有所启发或帮助;

问题描述

我正在使用 Swiper 构建一个带有滑块功能缩略图库。认情况下,滑块是隐藏的,当用户单击其中一张图像时,滑块必须显示显示单击的图像。滑块打开后,用户可以单击关闭按钮将其隐藏并返回缩略图库。

这是我正在使用代码

Js

var swiper;

swiper = new Swiper( '.gallery-slIDer .swiper-container',{
    loop: true,autoplay: {
        delay: 3000,disableOnInteraction: false,},navigation: {
        nextEl: '.swiper-next',prevEl: '.swiper-prev',});

$( '.gallery-thumbnails a[data-slIDe]' ).on( 'click',function( e ) {
    e.preventDefault();
    $( '.gallery-thumbnails' ).hIDe();
    $( '.gallery-slIDer' ).show();
    var slIDeno = $( this ).data( 'slIDe' );
    swiper.slIDeto( slIDeno + 1,false,false );
});

$( '.gallery-slIDer .close' ).on( 'click',function( e ) {
    e.preventDefault();
    $( '.gallery-slIDer' ).hIDe();
    $( '.gallery-thumbnails' ).show();
});

CSS

.gallery-slIDer {
    display: none;
}

HTML

<div class="gallery-thumbnails">
    <div class="gallery-image"><a href="" data-slIDe="0"><img src="thumb0.jpg" /></a></div>
    <div class="gallery-image"><a href="" data-slIDe="1"><img src="thumb1.jpg" /></a></div>
    <div class="gallery-image"><a href="" data-slIDe="2"><img src="thumb2.jpg" /></a></div>
    <div class="gallery-image"><a href="" data-slIDe="3"><img src="thumb3.jpg" /></a></div>
    ....
</div>

<div class="gallery-slIDer">
    <div class="swiper-container">
        <div class="swiper-prev">prevIoUs</div>
        <div class="swiper-next">next</div>
        <div class="close">close</div>
        <div class="swiper-wrapper">
            <div class="swiper-slIDe"><img src="slIDe0.jpg" /></div>
            <div class="swiper-slIDe"><img src="slIDe1.jpg" /></div>
            <div class="swiper-slIDe"><img src="slIDe2.jpg" /></div>
            <div class="swiper-slIDe"><img src="slIDe3.jpg" /></div>
            ....
        </div>
    </div>
</div>

使用代码,当用户单击缩略图时会显示滑块,但滑块本身不起作用。 next 和 prev 按钮不执行任何操作。隐藏时滑块未初始化?

我做错了什么?任何帮助将不胜感激。

谢谢

解决方法

显然,您需要在初始化 Swiper 时添加 observerobserveParents 参数,以便每次更改滑块样式(如隐藏/显示)或修改其子元素时都会更新(重新初始化)滑块(如添加/删除幻灯片)或其父元素。

var swiper;

swiper = new Swiper( '.gallery-slider .swiper-container',{
    loop: true,observer: true,observeParents: true,autoplay: {
        delay: 3000,disableOnInteraction: false,},navigation: {
        nextEl: '.swiper-next',prevEl: '.swiper-prev',});

编程问答问答

如何将逗号分隔的字符串转换为 Python 中的列表?
对静态 constexpr char[] 的未定义引用
如何获取切片的最后一个元素?
使用正则表达式解析 HTML:为什么不呢?
Composer:如何在不更新旧依赖项的情况下安装另一个依赖项?
pip:强制安装忽略依赖项
我如何 Docker COPY 作为非 root 用户?
存储更改,同时将更改保留在 Git 的工作目录中
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注