Comment utiliser Layui pour obtenir un effet de commutation coulissante d'image

Comment utiliser Layui pour obtenir un effet de commutation coulissante d'image nécessite des exemples de code spécifiques

Layui est un cadre d'interface utilisateur frontal léger qui fournit une multitude de composants et d'interfaces, rendant le développement de pages plus pratique et plus rapide. Dans cet article, je vais présenter comment utiliser Layui pour obtenir l'effet de commutation par glissement d'image et fournir des exemples de code spécifiques.

Tout d’abord, introduisez les fichiers principaux et les fichiers de style de Layui dans la page HTML.

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

Ensuite, créez un conteneur sur la page pour afficher l'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="Comment utiliser Layui pour obtenir un effet de commutation coulissante d'image" ></div>
    <div class="swiper-slide"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy" alt="Comment utiliser Layui pour obtenir un effet de commutation coulissante d'image" ></div>
    <div class="swiper-slide"><img  src="/static/imghw/default1.png"  data-src="img/3.jpg"  class="lazy" alt="Comment utiliser Layui pour obtenir un effet de commutation coulissante d'image" ></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

Ensuite, initialisez l'objet Swiper en JavaScript et définissez les paramètres associés.

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'
  });
});

Dans le code ci-dessus, nous chargeons et initialisons le composant carrousel de Layui via la méthode layui.use('carousel', ...). Ensuite, nous appelons la méthode carousel.render() pour créer un objet carrousel et définir les paramètres associés. layui.use('carousel', ...) 方法来加载并初始化 Layui 的轮播组件。然后，我们调用 carousel.render() 方法来创建一个轮播对象，并设置相关参数。

• elem：指定要渲染的容器选择器。
• width 和 height：设置轮播容器的宽度和高度。
• interval：设置轮播图切换的时间间隔，单位为毫秒。
• indicator：设置指示器显示的位置，可以选择 inside、outside 或者 none。
• arrow：设置箭头显示的方式，可以选择 hover、always 或者 none。
• anim：设置切换的动画效果，可以选择 fade、slide 或者 none
  • elem : Spécifiez le sélecteur de conteneur à restituer.
  • largeur et hauteur : définissez la largeur et la hauteur du conteneur du carrousel.
• intervalle : définissez l'intervalle de temps pour le changement de carrousel, en millisecondes.

• indicateur : Définissez la position où l'indicateur est affiché. Vous pouvez choisir à l'intérieur, à l'extérieur ou aucun</code. >. </p><li><code>flèche : définissez la façon dont les flèches sont affichées. Vous pouvez choisir survoler, toujours ou aucun.

• anim : définissez l'effet d'animation de commutation, vous pouvez choisir fondu, diapositive ou aucun.
  Enfin, nous pouvons personnaliser le style en fonction de nos besoins pour le rendre plus cohérent avec le style de la 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%);
  }

  🎜Grâce aux étapes ci-dessus, nous pouvons obtenir un effet de changement de glissement d'image sur la page. Bien entendu, ce qui précède n’est qu’un exemple de base et vous pouvez le modifier et l’étendre selon vos besoins. 🎜🎜Pour résumer, il est très simple d'utiliser Layui pour obtenir l'effet de commutation coulissante des images. Il vous suffit d'introduire les fichiers de base et les fichiers de style de Layui, de créer un conteneur pour afficher les images, d'initialiser l'objet carrousel en JavaScript. et définissez les paramètres appropriés. Dans le même temps, nous pouvons également personnaliser le style en fonction des besoins pour le rendre plus cohérent avec le style de la page. J'espère que cet article vous sera utile ! 🎜

  Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!