Home > Article > Web Front-end > How to use LayUI to implement web page carousel images

How to use LayUI to implement web page carousel images

angryTomforward: 2020-03-21 15:18:546866browse

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

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>

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>

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>

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!

css layui https

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Example of using form in layuiNext article：Example of using form in layui

See more

How to use LayUI to implement web page carousel images

Related articles