How to use Layui to achieve picture sliding switching effect

How to use Layui to achieve image sliding switching effect requires specific code examples

Layui is a lightweight front-end UI framework that provides a wealth of components and Interface makes page development more convenient and faster. In this article, I will introduce how to use Layui to achieve the image sliding switching effect and provide specific code examples.

First, introduce Layui’s core files and style files into the HTML page.

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

Next, create a container in the page to display the image.

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy" alt="How to use Layui to achieve picture sliding switching effect" ></div>
    <div class="swiper-slide"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy" alt="How to use Layui to achieve picture sliding switching effect" ></div>
    <div class="swiper-slide"><img  src="/static/imghw/default1.png"  data-src="img/3.jpg"  class="lazy" alt="How to use Layui to achieve picture sliding switching effect" ></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

Then, initialize the Swiper object in JavaScript and set relevant parameters.

layui.use('carousel', function(){
  var carousel = layui.carousel;
  
  //图片轮播
  carousel.render({
    elem: '.swiper-container',
    width: '100%',
    height: '400px',
    interval: 3000,
    indicator: 'inside',
    arrow: 'hover',
    anim: 'fade'
  });
});

In the above code, we load and initialize Layui's carousel component through the layui.use('carousel', ...) method. Then, we call the carousel.render() method to create a carousel object and set related parameters.

• elem: Specifies the container selector to render.
• width and height: Set the width and height of the carousel container.
• interval: Set the time interval for carousel switching, in milliseconds.
• indicator: Set the position where the indicator is displayed. You can choose inside, outside or none.
• arrow: Set the arrow display method, you can choose hover, always or none.
• anim: Set the switching animation effect, you can choose fade, slide or none.

Finally, we can customize the style according to our needs to make it more consistent with the style of the page.

.swiper-container {
  position: relative;
  width: 100%;
  height: 400px;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
}
.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

Through the above steps, we can achieve a sliding switching effect of images on the page. Of course, the above is just a basic example and you can modify and extend it according to your needs.

To sum up, it is very simple to use Layui to achieve the sliding switching effect of images. You only need to introduce the core files and style files of Layui, create a container to display the images, initialize the carousel object in JavaScript, and set the relevant parameters. . At the same time, we can also customize the style according to needs to make it more consistent with the style of the page. Hope this article is helpful to you!

The above is the detailed content of How to use Layui to achieve picture sliding switching effect. For more information, please follow other related articles on the PHP Chinese website!