Angular的skitter.js滑块库 - angular-skitter

Angular的skitter.js滑块库 - angular-skitter
插件名称 angular-skitter
发布时间 2020年9月22日
插件作者 kinotto

Angular Skitter是在强大的jQuery库skitter.js之上构建的库。角度skitter只不过是一个包装器,将skitter.js的所有功能公开在一个角度组件中。

安装:

# NPM
$ npm install angular-skitter

# Bower
$ bower install angular-skitter

使用:

我们设法创建一个指令,轻松地创建一个画廊 <ng-skitter items="photos" options="skitterOption">.

项定义了图库的源图片

$scope.photos = [
    {
        src: 'https://skitterp-4b51.kxcdn.com/images/mountains/3-sand-mountain-clouds.jpg',
        title: 'Donec sollicitudin molestie',
        description: 'Vivamus suscipit tortor eget felis porttitor volutpat. Donec sollicitudin molestie malesuada.',
        url: 'http://www.google.com'
    },
    {
        src: 'https://skitterp-4b51.kxcdn.com/images/mountains/4-landscape-with-tree-hills-and-lake.jpg',
        title: 'Vivamus suscipit tortor',
        description: 'Vivamus suscipit tortor eget felis porttitor volutpat. Donec sollicitudin molestie malesuada.',
        url: 'http://www.facebook.com'
    }
]

Options定义应用于图库的配置。官方文档中列出了所有可用的选项

$scope.skitterOption = {
    auto_play: false,
    theme: "clean",
    navigation: true,
    animation: "cubeShow",
    dots: true
}

您可以自定义在每个图像中添加例如标题和描述的html。只需在标签中插入您的自定义html。 <ng-skitter>.

<ng-skitter items="photos" options="skitterOption">
    <p><strong>{{item.title}}</strong></p>
    <p>{{item.description}}</p>
</ng-skitter>