javascript - 如何在移动设备上删除光滑的滑块

Question

我在我的网站上使用 slick.js 在我的主页上显示推荐。

当用户在移动设备上时，我想完全删除推荐部分。这要求 slick 中的图像不应该已经加载！

这是我构建光滑的代码：

<div class="quote-carousel">
    <div class="quote-wrapper">
        <?php if(isset($data['carousel_title'])){ ?>
            <h3 class="text-center m-b-2"><?php echo $data['carousel_title'];?></h3>
        <?php } ?>
        <div class="slick-wrapper">
            <div id="slick-single" data-slick='{"autoplaySpeed": 6000}' >
                <?php foreach ($testimonial_items as $item) { ?>
                    <div class="quote-item">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-4 person text-center">
                                    <?php if(isset($item->user_id)){ ?>
                                    <img
                                        alt="Testimonial <?=$item->name?>"
                                        src="<?=base_url()?>design/img/testimonials/<?=$item->image?>"
                                    />
                                    <p class="name"><?=$item->name?></p>
                                    <p class="function"><?=$item->function?><?php if(isset($item->name_partner)){?> &commat; <span class="entity"><?=$item->name_partner?></span><?php } ?></p>
                                </div>
                                <div class="col-md-8 align-self-center">
                                    <blockquote class="font-medium-3"><span><?=$item->message?></span></blockquote>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>

和 javascript 看起来像这样：

var slickSingle = $('#slick-single');
                slickSingle.slick({
                    dots: true,
                    lazyLoad: 'ondemand',
                    infinite: true,
                    speed: 300,
                    autoplay: true,
                    responsive: [
                        {
                            breakpoint: 768,
                            settings: {
                                arrows: true,
                                slidesToShow: 1
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                arrows: false,
                                slidesToShow: 1
                            }
                        }
                    ]
                });

1）我尝试将img标签更改为div并通过CSS将图像设置为背景图像，并结合将样式添加到img标签的样式，作为div的内联样式元素。然而这并没有奏效，因为 Slick 在整个地方添加了太多东西。（加：这也不是 SEO 友好的）。

2）我一直在玩的另一个选择是将元素更改为如下元素：

<picture>
    <source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 768px)">
    <img
        alt="Testimonial <?=$item->name?>"
        src="<?=base_url()?>design/img/testimonials/<?=$item->image?>"
    />
</picture>

但是，它仍然不理想，因为它仍会将 1x1 下载到浏览器。（但至少我认为它更好？）

3）我看到的第三个选项是使用 AJAX 并在 javascript 中创建完整的滑块。但是我认为这很复杂，我不确定桌面用户是否会更糟（性能方面）？

标签： javascriptjqueryhtmlcss