当前位置:主页 > JavsScript库 > 图库 / 图片 >

JavaScript中的背景滑块
栏目分类:图库 / 图片   发布日期:2021-09-13   浏览次数:

JavaScript 最小的响应式背景滑块/幻灯片。

如何使用它:

1.在文档中加载核心样式表和字体awesome标志性字体。

<link rel="stylesheet" href="/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css" />

2.为幻灯片添加背景图像,然后将它们与控件一起包装到滑块容器中。

<div class="slider-container">
  <div class="slide active" style="background-image: url('1.jpg');">
  </div>
  <div class="slide" style="background-image: url('2.jpg');">
  </div>
  <div class="slide" style="background-image: url('3.jpg');">
  </div>
  <div class="slide" style="background-image: url('4.jpg');">
  </div>
  <div class="slide" style="background-image: url('5.jpg');">
  </div>
  <button class="arrow left-arrow" id="left">
    <i class="fas fa-arrow-left"></i>
  </button>
  <button class="arrow right-arrow" id="right">
    <i class="fas fa-arrow-right"></i>
  </button>
</div>

3.script.js在文档末尾加载主脚本。就是这样。

<script src="script.js"></script>

官方网站:https://github.com/Bryanauta/BackgroundSlider

相关热词: 滑块

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库