响应式无限图像滚动器 – Carousel.js
栏目分类:幻灯片 / 轮播图   发布日期:2021-10-22   浏览次数:

一个小巧、现代、响应式轮播 JavaScript 库,允许通过单击下一个或上一个箭头无限循环图像。

更多功能:

  • 图像加载器。

  • 自定义标题和副标题。

  • 从 JSON 中获取图像数据。

  • 4 种图像卡类型。

使用:

1. 导入 Carousel.js。

import Carousel from './js/carousel.js';
import './scss/carousel.scss';

2. 或者将 JavaScript 和 CSS 文件导入到文档中。

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

3. 按如下方式准备您的图像数据:

const myData =
[
  {
    "image": "1.jpg",
    "type": "video",
    "duration": 76,
    "title": "图片标题",
    "cardinality": "single"
  },
  {
    "image": "2.jpg",
    "type": "elearning",
    "duration": 2520,
    "title": "图片标题",
    "cardinality": "single"
  },
  {
    "image": "3.jpg",
    "type": "learning_plan",
    "duration": 4800,
    "title": "图片标题",
    "cardinality": "collection"
  },
  {
    "image": "4.jpg",
    "type": "playlist",
    "duration": 4800,
    "title": "图片标题",
    "cardinality": "collection"
  }
];

4.在页面上生成一个基本的轮播。

<div id="myCarousel"></div>
const myCarousel = new Carousel({
      container: 'myCarousel',
      title: 'Carousel Title',
      subtitle: 'Sub Title',
      fetchCards: (chunkSize) => {
        const itemLimit = chunkSize || Math.ceil(Math.random() * 6);
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(myData.slice(0, itemLimit));
          }, 1000);
        });
      }
});

5. 自定义图片和卡片。

const myCarousel = new Carousel({
 
      // 图标显示在标题中
      // 需要材质图标
      icon: 'tungsten',
 
      // 卡片宽度
      cardWidth: 200,
 
      // 卡片间距
      cardGutter: 10,
 
      // 卡片高度
      cardHeight: 240,
 
      // 图片高度
      imgHeight: 100,
 
      // 容器选择器
      containerSelector: 'container'
       
});


官方网站:https://github.com/pasor1/vanilla-js-infinite-carousel

相关热词: Carousel.js旋转木马

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