Layui framework carousel diagram realizes adaptive viewport zooming of carousel pictures

I don’t know anything about JS. Using Layui’s ready-made framework carousel components, we simply realize the layui framework carousel image adaptive viewport zoom effect.

Here is the code:

<section>
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div><img src="img/1.jpg" alt=""></div>
                <div><img src="img/2.jpg" alt=""></div>
                <div><img src="img/3.jpg" alt=""></div>
                <div><img src="img/4.jpg" alt=""></div>
                <div><img src="img/5.jpg" alt=""></div>
            </div>
        </div>
        <!-- 条目中可以是任意内容，如：<img src=""> -->
        <script src="layui/layui.js"></script>
        <script>
            var b = 1200/360;//我的图片比例
            //获取浏览器宽度
            var W = $(window).width();
            var H = $(window).height();
            layui.use('carousel', function(){
                var carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#test1'
                    ,width: '100%' //设置容器宽度
                    ,height: (W/b).toString()+"px"  //按比例和浏览器可视页面宽度来获取高度
                    // ,arrow: 'always' //始终显示箭头
                    //,anim: 'updown' //切换动画方式
                });
            });
        </script>
    </section>

Because my section container does not have a fixed width, I found the picture and the viewport zoomed together when adaptively zooming the page, but it was hidden as the viewport zoomed, resulting in the picture in the carousel not being displayed completely .

The JS part is from the search. According to the search method, although the picture will not be hidden with the viewport zoom, the picture will be deformed with the viewport zoom, and it does not look so beautiful.

After groping for a long time, by setting the minimum height of the img under .layui-carousel and .layui-carousel in the CSS style, the adaptive viewport zoom effect of the layui frame carousel image was achieved.

The following is the Css style code:

/*轮播图样式开始*/
.layui-carousel{
    min-height: 14rem;
}
.layui-carousel img{
    width: 100%;
    height: auto;
    display: block;
    min-height: 14rem;
}

Although the adaptive viewport zoom effect of the broadcast image is achieved, the image may be slightly deformed when zoomed below 360px, but the carousel adaptive effect can still be achieved on most mobile devices.