Layui? ?? ?? ??? ???? ??? ????? ??? ??? ??????

Layui? ?? ?? ??? ???? ??? ????? ???? ??? ?? ? ? ????.

1. Layui ?? ?? : ?? HTML? Layui? CSS ? JavaScript ??? ???? ??? ??????. ?? ? ????? Layui? ?????? ????? ???? ? ????.

    <code class="html"><link rel="stylesheet" href="path/to/layui/css/layui.css"> <script src="path/to/layui/layui.js"></script></code>

2. ?? ?? ??? : Layui? JavaScript? ???? ?? ??? ???????. ?? ?? ????? ??? carousel ? div ??? ??? ? ?? ???? ???????.

    <code class="html"><div class="carousel" id="test-carousel"> <div carousel-item> <div><img src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1"></div> <div><img src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2"></div> <div><img src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt="Image 3"></div> </div> </div></code>

3. ?? ?? ?? : Layui? JavaScript? ???? ?? ??? ??????. ??, ?? ? ????? ???? ?? ??? ??? ? ????.

    <code class="javascript">layui.use('carousel', function(){ var carousel = layui.carousel; //carousel rendering carousel.render({ elem: '#test-carousel' ,width: '100%' //set container width ,arrow: 'always' //always show arrow ,height: '500px' ,anim: 'fade' //switch animation way }); });</code>

? ??? ???? Layui? ??? ??? ???? ?? ??? ????? ?? ? ????.

Layui? ??? ??? ??? ??? ??? ?? ??? ??????

Layui? ?? ?? ??? ?? ??? ??? ??? ???? ? ??? ??? ? ?? ??? ?? ??? ?????. ?? ??? ??? ????.

• ??? ?? : ? ??? ??? ??? ???? ???? ??? ?? ? ? ????.

   <code class="javascript">width: '100%', // Set the width of the carousel height: '500px', // Set the height of the carousel</code>

• ??? ??? : ????? ???? ??? ??? ?????. ???? always , hover ?? none ?????.

   <code class="javascript">arrow: 'always', // Always show the arrows</code>

• ????? ??? : ???? ??? ?? ??? ??????. ??? default (??/??? ????) ?? fade .

   <code class="javascript">anim: 'fade', // Use fade animation</code>

• ??? ??? : ??? ???? ??? ?????. ???? none ?? bar ?????.

   <code class="javascript">indicator: 'bar', // Use a bar as an indicator</code>

• ?? ?? : ?? ??? ??? ?? ?????? ??? ?????.

   <code class="javascript">autoplay: true, // Enable autoplay interval: 3000, // Set interval to 3 seconds</code>

• ???? ??? : ???? ????? ??? ???? ??????. ??? click ?? hover ???.

   <code class="javascript">trigger: 'click', // Change slide on click</code>

? ??? ???? ?? ??? ??? ??? ??? ???? ?? ?? ??? ???? ? ????.

Layui ?? ???? ?? ?? ? ????? ???? ????? ?????????

Layui? ?? ???? ?? ?? ? ????? ???? ????? ??? ???? carousel.render ???? ???????. ??? ? ??? ?????.

1. AutoPlay ??? : ?? ??? ?????? autoplay ??? true ? ???? ????? ?? ?? ??? interval ??????.

    <code class="javascript">layui.use('carousel', function(){ var carousel = layui.carousel; carousel.render({ elem: '#test-carousel' ,width: '100%' ,height: '500px' ,arrow: 'always' ,autoplay: true // Enable autoplay ,interval: 3000 // Set autoplay interval to 3 seconds }); });</code>

2. ????? ??? ?? : Layui? ?? ???? arrow ??? ?? ????? ???? ?? ?? ??? ????. always ???? ????? ????? ??? ??? ? ????? ??? ??? none hover ? ??? ? ????.

    <code class="javascript">layui.use('carousel', function(){ var carousel = layui.carousel; carousel.render({ elem: '#test-carousel' ,width: '100%' ,height: '500px' ,arrow: 'always' // Always show navigation arrows ,autoplay: true ,interval: 3000 }); });</code>

??? ??? ???? Layui ?? ???? ?? ?? ? ?? ??? ??? ? ????.

Layui? ??? ??? ??? ??????? ?? ??? ??????

Layui? ?? ?? ??? ??? ?????? ???? ????? ???? ? ?? ??? ?????. ?? ??? ??? ????.

1. ??? ??? : ???? ?? ??? ???? ?? ??? ??? ???? ??????. ??? ?? ?? ???? ???? ?? ??? ?? ???? ??? ??? ??????.
2. ???? ?? : ?? ?? ????? ?? ??? ????? ????. ? ?? ?? ????? ??? ???? ? ????.
3. ???? ????? ?? : ???? ????? ???? ??????. fade ?????? ?? ????? ?? default ???? ???? ??? ???? ?? ? ????.

4. ???? ?? ???? : ?? ?? ?? ???? ?? ?? ??? ???? ?? ?? ?? ??? ??? ???? ????????.

    <code class="javascript">autoplay: false, // Disable autoplay if not needed indicator: 'none' // Disable indicators if not needed</code>

5. JavaScript ?? ??? : Layui? ????????? ??? ??????? ?? ????? ??? ???? ?? ??? ??????? ??????.

    <code class="html"><script src="path/to/layui/layui.js" async></script></code>

6. ?? ?? : Layui ??? ???? ??? ???? ?? ????? ??? ????.
7. ?? ? ??? : ?? ??? ??? ?? ??? ?? ??? ? ???? ?? ???? ??? ??? ?????.
8. ??? ?? : ???? ??? ??? ???? ?? ??? ??? ?????? ?????. ?? ??? ?? ?? ?? ???????.

??? ?? ??? ??? Layui ?? ??? ??? ????? ? ?? ??? ??? ?? ? ? ????.

? ??? Layui? ?? ?? ??? ???? ??? ????? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!