如何制作div-s的图像比较滑块？

Question

如何使图像比较滑块或前/后滑块不是针对图像，而是针对具有div-s的滑块。如在站点delta.ru上。我的意思是，互联网上有很多例子只有2张图片，我想用块来做，因为我的图片以背景为背景。

        <script>
        $(document).ready(function(){
        $(".mob_link_menu").click(function(){
        $(".accmob").slideToggle("slow");
        return false;
        });
        });
        </script>

            <div class="slider" data-flickity='{ "cellAlign": "left", "wrapAround": true, "prevNextButtons": false }'>
                    <div class="slider-item" style="background-image: url(/img/apartment-art-bright-1027516.jpg)">
                        <div class="container mx-auto">
                            <div class="heading">
                                <h4>Охрана квартир</h4>
                                <button class="btn btn-red call-modal-show">Обезопасить</button>
                            </div>
                            <img src="/img/00-00011705__0.png" alt="Охрана квартир">
                            <div class="notifier">
                                <div>
                                    <a href="ailments1" class="no-underline text-black">
                                        <div class="wrap">
                                            <h4 class="font-semibold text-xl py-2">Внимание, Акция!</h4>
                                            <div class="text-sm font-sans">Закажи охранное оборудование и получи установку БЕСПЛАТНО!</div>
                                        </div>
                                    </a>
                                    <div class="close font-semilight">&times;</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-item" style="background-image: url(/img/apartment-art-bright-1027516.jpg)">
                        <div class="container mx-auto">
                            <div class="heading">
                                <h4>Охрана бизнеса</h4>
                                <button class="btn btn-red call-modal-show">Обезопасить</button>
                            </div>
                            <img src="/img/00-00011705__0.png" alt="Охрана квартир">
                            <div class="notifier">
                                <div>
                                    <a href="ailments1" class="no-underline text-black">
                                        <div class="wrap">
                                            <h4 class="font-semibold text-xl py-2">Внимание, Акция!</h4>
                                            <div class="text-sm font-sans">Закажи охранное оборудование и получи установку БЕСПЛАТНО!</div>
                                        </div>
                                    </a>
                                    <div class="close font-semilight">&times;</div>
                                </div>
                            </div>
                        </div>
                    </div>
                            </div>