0

基于这个 swiper ( https://github.com/nolimits4web/swiper )，我创建了一个具有淡入淡出效果的全屏图像滑块，懒惰的 laod 并向它添加了图像标题。我只有 html 的基本技能，所以请和我一起裸露:) 下面你可以看到我的代码：

<style>
    .swiper-container {
        min-width: 100%;
        min-height: 100%;
        }
    .swiper-slide {
        width: 100vw;
        height: 100vh;
        position: relative;
        background-size: auto;
        object-fit: cover;
        }

       .swiper-slide img {
        width: 100vw;
        height: 100vh;
        display: flex; 
        position: relative;
        background-size: auto;
        object-fit: cover;
        }

  .image_caption {
         position: absolute;
         left: 40px;
         bottom: 25px;
         z-index: 5;
        }

</style>

<div class="swiper-container">
    <picture alt="" class="swiper-slide">
        
        <source media="(max-width: 600px)"
        data-srcset="images/Lorem.jpg"
        />
        
        <source media="(max-width: 1024px)"
        data-srcset="images/Lorem_mobile.jpg"
        />
        
        <img class="swiper-lazy"
        data-src="images/Lorem_low-res.jpg"
        />
        
        <div class="image_caption">Lorem Ipsum</div> 
        
    </picture>
</div>  

<script src="js/swiper.js"></script>

<script>
        var swiper = new Swiper('.swiper-container', {
            preloadImages: false,
            lazy: true,
            loop: true,
            effect: 'fade',
            autoplay: {
            delay: 3000,
            disableOnInteraction: true,
        },
             keyboard: {
             enabled: true,
             onlyInViewport: false,
             },
             navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
              },
        });
</script>

我的目标是创建一个带有图像标题的全屏滑块，只要出现新图像，它就会发生变化。此外，通过实现延迟加载，我希望首先加载低分辨率图像，并在实际图像准备就绪时被替换。另外，在移动设备上显示不同的图像。

现在我有两个问题：

1：首先加载低分辨率图像，但不替换为全分辨率图像。不知道是不是图片大小的原因？移动图像效果很好。但是，我在这里想知道如何将移动低分辨率图像也放在那里，因为图像与桌面版本不同。或者我在这里错过了什么？

  1. 图片标题随着幻灯片移动，但不幸的是，由于淡入淡出，它总是有点重叠。例如，当我将动画切换到 crossFade 时，它​​可以正常工作。我认为问题在于淡入效果。但是我找不到如何解决它的解决方案。我添加了图像标题重叠的屏幕截图。

Screenshot_image-caption

如果你们中的某个人可以帮助解决它，我将非常感激。如果有什么不清楚的，请随时询问。正如我所提到的，我对这一切都很陌生:) 非常感谢。

4

0 回答 0