Как удалить скользящий слайдер, когда на мобильном телефоне

Question

Я использую slick.js на своем веб-сайте, чтобы показывать отзывы на моей домашней странице.

Когда пользователь находится на мобильном устройстве, я хочу полностью удалить часть отзыва. Для этого требуется, чтобы изображения в слике не загружались уже!

Это мой код для создания слика:

<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, в качестве встроенного элемента стиля длядив. Однако это не сработало, так как Слик добавляет слишком много вещей повсюду. (плюс: это тоже не оптимизировано для 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. Однако я думаю, что это довольно сложно, и я не уверен, будет ли это хуже для пользователей настольных компьютеров (с точки зрения производительности)?