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

Layui ??? ??? ??? ??? ??? ????? CSS ? JavaScript ??? ?? ??? ? ????. ??? ??? ?? ? ?? ?? ?????.

1. CSS ??? ?? :
   Layui? ?? ??? ????? ?? CSS ???? ?????. ??? ?????? ???? ??? CSS ??? ??? ? ????. ?? ??, ??? ??? ???? ????? ??? ?? ?? ??? ? ????.

    <code class="css">.layui-carousel-ind .layui-carousel-item { background-color: #yourColor; }</code>

   ?? ??? ??? ?? ??, ??, ??? ? ?? ??? ??? ? ????.

2. ?? ???? ??? ?? :
   Layui? ?? ?? ??? JavaScript? ???? ????? ?? ? ? ????. width , height , arrow , anim , interval , autoplay ?? ?? ??? ??? ??? ? ????. ???? ? ?? ??? ?? ? ???? ?? ??? ???? ??? ????.

    <code class="javascript">layui.use('carousel', function(){ var carousel = layui.carousel; carousel.render({ elem: '#test1' ,width: '100%' ,height: '260px' ,interval: 5000 ,arrow: 'hover' ,anim: 'fade' ,autoplay: true }); });</code>

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

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

Layui? ?? ?? ??? ?? ??? ??? ??? ????? ? ??? ??? ? ?? ?? ??? ?????. ?? ??? ??? ???? anim ?? ??? ???? ??? ? ????. ?? ??? ??? ??? ????.

• ??? (Anim : 'Updown') : ????? ???? ???? ?? ?? ?????.
• ??? (Anim : 'Fade') : ???? ??? ?? ??? ? ???? ?????.
• ???? (Anim : 'Slide') : ????? ???? ??? ?? ????? ???? ?????.
• ?? (Anim : 'None') : ?? ??? ???? ????. ???? ???? ?? ?????.

?? ??? ????? ?? JavaScript ??? ??? ? ????.

 <code class="javascript">layui.use('carousel', function(){ var carousel = layui.carousel; carousel.render({ elem: '#test1' ,anim: 'fade' // Specify the desired transition effect }); });</code>

??? anim ?? ???? ???? ??? ??? ??? ?? ? ????.

Layui Carousel ??? ?? ?? ??? ??? ??? ? ?????

Layui Carousel ??? ?? ?? ??? ????? interval ? autoplay ??? ???????. ??? ? ??? ??? ??? ????.

1. ?? ?? ?? :
   ?? ??? ?????? autoplay ??? true ? ??????. ??????? false ? ??????.

    <code class="javascript">layui.use('carousel', function(){ var carousel = layui.carousel; carousel.render({ elem: '#test1' ,autoplay: true // Enable autoplay }); });</code>

2. ?? ?? :
   interval ??? ?? ????? ???? ?? ? ????? ???? ??? ?????. ?? ?? ?????. ?? ??, 3000?? ???? ? ????? 3 ? ?? ?????.

    <code class="javascript">layui.use('carousel', function(){ var carousel = layui.carousel; carousel.render({ elem: '#test1' ,interval: 3000 // Set interval to 3000 milliseconds (3 seconds) }); });</code>

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

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

?, Layui ?? ??? ??? ?? ???? ?? ? ? ????. ?? ???? ???? ?? ?? ? HTML ??? ??? Layui? ?? ?? ??? ??? ??? ????????. ??? ???? ??? ????.

1. ??? ?? ??? ?? :
   ??? ?? ????? ???? HTML ??? ??????. ?? ??, ?? ? ??? ??? ??? ? ????.

    <code class="html"><div id="test1" class="carousel"> <!-- Your carousel content here --> </div> <button id="prevBtn">Previous</button> <button id="nextBtn">Next</button></code>

2. ??? Layui ?? :
   Layui? ?? ?? ???? ??? ???? ??? ?? ????? ?? ??? ??????. ? ??? ??? ????? ??? ??? ????.

    <code class="javascript">layui.use('carousel', function(){ var carousel = layui.carousel; var ins = carousel.render({ elem: '#test1' }); // Bind the 'prev' method to the previous button document.getElementById('prevBtn').addEventListener('click', function(){ ins.prev(); }); // Bind the 'next' method to the next button document.getElementById('nextBtn').addEventListener('click', function(){ ins.next(); }); });</code>

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

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