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

Question

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

是否有任何简单的方法可以在不添加第二次非常相似的代码src的情况下进行此操作，否则我应该在移动版本上构建下一个div滑块并hide/show。

Answer 1

此代码对我有用。它使用基于正确的屏幕大小的图像规范使用懒惰加载和媒体查询。也使用图片标签。加载似乎不慢。

<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>

Answer 2

只是JS

的一点触摸

JS

let imgs = [
  '<img class="desktop" src="./assets/joursHardtopImage.png"/>',
  '<img class="desktop" 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(mobileImgs [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 3

您可以通过简单的媒体查询来管理它，喜欢在每个幻灯片中添加两个图像，并使用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>标签代替包装师