image - 如何使用 Slick Slider 为移动设备加载不同的图像？

Question

我尝试创建光滑滑块的移动版本（它应该在移动设备上显示不同的图像）。

是否有任何简单的方法可以做到这一点，而无需添加第二次非常相似的代码来更改图像 src，或者我应该构建下一个 div 滑块并在移动版本上隐藏/显示。

Answer 1

一点点js

js

let imgs = [
  '<img class="mobile" src="./assets/joursHardtopImage.png"/>',
  '<img class="mobile" src="./assets/joursHardtopImage.png"/>',
]
let mobileImgs = [
  '<img class="mobile" src="./assets/joursMobileImage.png"/>',
  '<img class="mobile" src="./assets/joursMobileImage.png"/>',
]

if($( window ).width() < 600){
  for (let i = 0; i < mobileImgs.length; i++) {
    $('.carousel').append(esMobileImgs[i])
  }
}else{
   for (let j = 0; j < imgs.length; j++) {
    $('.carousel').append(Imgs[j])
  }


//carousel section

$('.carousel').slick({
  speed: 1000,
  slidesToShow: 1,
  slidesToScroll: 1,
  prevArrow: '<button class="slide-arrow prev-arrow"></button>',
  nextArrow: '<button class="slide-arrow next-arrow"></button>', 
 });

html

<div class="carousel">

</div>

Answer 2

您可以通过简单的媒体查询来管理它，例如为每张幻灯片添加两个图像并使用 CSS 媒体查询来显示正确的图像。

下面的示例代码。

HTML

<div class='my-slide'>
  <div class='item'>
    <img src='myImageMobile.jpg' alt='me' class='item-img-mobile'>
    <img src='myImage.jpg' alt='me' class='item-img-desktop'>
  </div>
  <div class='item'>
    <img src='myImageMobile2.jpg' alt='me' class='item-img-mobile'>
    <img src='myImage.jpg2' alt='me' class='item-img-desktop'>
  </div>
</div>

CSS

.item-img-desktop {
  display: none;
}

@media all and (min-width: 768px) {
  .item-img-desktop {
    display: block;
  }

  .item-img-mobile {
    display: none;
  }
}

当然，您可以使用<picture>标签代替包装器 div。

Answer 3

这段代码对我有用。它使用基于正确屏幕尺寸的图像规范的延迟加载和媒体查询。还使用了图片标签。加载似乎并不慢。

<script>
    $(document).ready(function () {
        var slider = $('#slider');
        var total = $('#slider img').length, // get the number of slides
            rand = Math.floor(Math.random() * total); // random number        
        slider.slick({
            lazyLoad: 'ondemand',
            dots: true,
            infinite: true,
            speed: 0,
            fade: true,
            cssEase: 'linear',
            autoplay: true,
            pauseOnDotsHover: true,
            autoplaySpeed: 7000
        });
        slider.slick('slickGoTo', rand);  // navigate to random slide;       
        slider.slick('slickSetOption', 'speed', 1000);  
    });
    
    $('#slider').on('lazyLoaded', function(evt) {
        $(evt.currentTarget).find('source').each(function(i, source) {
            var $source = $(source);
            $source.attr('srcset', $source.data('lazy-srcset'));
        });
    }); 
</script>

<div class="lazy slider_inner" id="slider" data-sizes="50vw"> 
    <div class="slide_holder">
        <div class="slide_inner">
            
            <picture>
                <source data-lazy-srcset="img/RotatingBannersSquare-Base.jpg" media="(max-width: 767px)">
                <img data-lazy="img/RotatingBanners-Base.png" alt="">
            </picture>

            <div class="slide_content">
                <h2 class="group-heading">
                    THE COMPLETE PACKAGE
                </h2>
                <p class="group-text">
                    From head-to-toe we have you covered!<br />
                    We have the gear to keep you playing longer,<br />
                    training harder and performing better.
                </p>
                <div style="padding-top:5px;"><a href="#" class="btn btn-primary btn-xs button-rounded">SHOP BASEBALL</a></div>
            </div>
        </div>
    </div>
    <!--slide_holder-->
    <div class="slide_holder">
        <div class="slide_inner">

            <picture>
                <source data-lazy-srcset="img/RotatingBannersSquare-CS.jpg" media="(max-width: 767px)">
                <img data-lazy="/img/RotatingBanners-CS.png" alt="">
            </picture>
            
            <div class="slide_content slide_content_left">
                <h2>COVID-19 Prevention</h2>
                <p>Protect yourself and others around. </p>
            </div>
        </div>
    </div>
</div>