How to use LayUI to implement web page carousel images-Layui Tutorial-php.cn

How to use LayUI to implement web page carousel images

angryTom

Release： 2020-03-21 15:18:54

forward

6884 people have browsed it

This article introduces the method of using LayUI to implement web page carousel graphics. It has certain reference value. I hope it will be helpful to friends who are learning Layui! If you want to use layui to write a carousel image, you need to download the layui document first. Just download it to your computer and save it anywhere.

How to use LayUI to implement web page carousel images

How to use LayUI to implement web page carousel images

If you want to use layui to write carousel images, you need to download layui first. Just download the document to your computer and save it anywhere.

Here is the download address: https://www.layui.com

Use layui to write carousel images The advantage is that there is less code

There is basically no need to write css styles, which is very happy

After all, we are all lazy

Before writing code, you must first download the layui package you just downloaded Import it:

<head>
        <meta charset="utf-8">
        <title>轮播图</title>
        <link rel="stylesheet" href="layui/css/modules/layer/default/layer.css" />
        <link rel="stylesheet" href="layui/css/layui.css" />
        <script type="text/javascript"></script>
    </head>

Copy after login

Then it’s easy, just put the picture directly:

<div class="layui-carousel" id="test1">
            <div carousel-item>
                <!--里面可以加图片，文字等-->
                <div><img  src="img/1.jpg" / alt="How to use LayUI to implement web page carousel images" ></div>
                <div><img  src="img/2.jpg" / alt="How to use LayUI to implement web page carousel images" ></div>
                <div><img  src="img/3.jpg" / alt="How to use LayUI to implement web page carousel images" ></div>
                <div><img  src="img/4.jpg" / alt="How to use LayUI to implement web page carousel images" ></div>
                <div><img  src="img/5.jpg" / alt="How to use LayUI to implement web page carousel images" ></div>
            </div>
        </div>

Copy after login

After putting the picture, it’s time to write the layui code:

<script type="text/javascript" src="layui/layui.js"></script>
        <script>
            //第一个轮播图
            layui.use(&#39;carousel&#39;, function() {
                var carousel = layui.carousel;
                //建造实例化
                carousel.render({
                    elem: &#39;#test1&#39;,
                    width: &#39;100%&#39;, //设置背景容器的宽度
                    arrow: &#39;always&#39;, //始终显示箭头,不会消失
                    //anim: &#39;updown&#39; //切换动画方式:anim
                     //indicator:&#39;outside&#39;,
                        indicator: &#39;outside&#39;    //这个属性：小圆点在外面   
                });
            });
            </script>

Copy after login

I will give it below Throw out a few big pictures:

How to use LayUI to implement web page carousel images

Okay, let’s play with it

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of How to use LayUI to implement web page carousel images. For more information, please follow other related articles on the PHP Chinese website!