React>> LittleSlideshow>> 返回
项目作者： little-apps

项目描述 ：
LittleSlideshow is a simple slideshow developed in jQuery and works with Bootstrap 3.
高级语言： JavaScript
项目地址: git://github.com/little-apps/LittleSlideshow.git
创建时间： 2017-06-03T18:19:22Z
项目社区：https://github.com/little-apps/LittleSlideshow
开源协议：MIT License
下载


Little Slideshow

Little Slideshow is a simple slideshow developed in jQuery and works with Bootstrap v3.

LittleSlideshow Screenshot

License

Little Slideshow is licensed under the MIT License. 

  1. Copyright (c) 2017 Little Apps
  3. Permission is hereby granted, free of charge, to any person obtaining a copy
  4. of this software and associated documentation files (the "Software"), to deal
  5. in the Software without restriction, including without limitation the rights
  6. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  7. copies of the Software, and to permit persons to whom the Software is
  8. furnished to do so, subject to the following conditions:
  10. The above copyright notice and this permission notice shall be included in all
  11. copies or substantial portions of the Software.
  13. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  14. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  15. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  16. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  17. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  18. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  19. SOFTWARE.

Features

  • Responsive (compatible with Bootstrap v3)
  • Displays multiple images at one time
  • Thumbnails are centered below
  • Focus the center image
  • Automatically change images
  • Set max width and max height for images and thumbnails

Requirements

  • jQuery Core 1.12.4+, 2.2.4+, or 3.2.1+
  • Bootstrap 3

Installation

  1. Download the source code from GitHub.
  2. Add the following HTML tags inside the <head> tag.
  1. <script type="text/javascript" src="path/to/littleslideshow/littleslideshow.min.js"></script>
  2. <link rel="stylesheet" type="text/css" href="path/to/littleslideshow/littleslideshow.min.css">
  1. Insert the HTML tag inside the <body> tag that will be used to contain the slideshow.
  1. <div id="littleslideshow"></div>
  1. Call the .LittleSlideshow method
  1. <script type="text/javascript">
  2.   jQuery(document).ready(function($) {
  3.       const images =
  4.           [
  5.               {
  6.                   src: 'path/to/image1.jpg'
  7.               },
  8.               {
  9.                   src: 'path/to/image2.jpg'
  10.               },
  11.               {
  12.                   src: 'path/to/image3.jpg'
  13.               },
  14.               {
  15.                   src: 'path/to/image4.jpg'
  16.               },
  17.               {
  18.                   src: 'path/to/image5.jpg'
  19.               },
  20.           ];
  21.       const options = {};
  23.       $('#littleslideshow').LittleSlideshow(images, options);
  24.   });
  25. </script>

Parameters

Images

This parameter is an array of objects, with each object having the following properties:

  1. [
  2.     {
  3.         src:            '',     // The source of the image (required)
  4.         width:          '',     // Width of image (set as the 'width' attribute of <img>)
  5.         height:         '',     // Height of image (set as the 'height' attribute of <img>)
  6.         alt:            '',     // Image alternative text (set as the 'alt' attribute of <img>)
  7.         anchorTitle:    ''      // Title of link (set as the 'title' attribute of <a>)
  8.     },
  9.     // ...
  10. ]

Options

Options are a JSON object with the following properties:

  1. {
  2.     maxWidth:           0,      // The maximum width of each image. If zero, the original image widths are used.
  3.     maxHeight:          0,      // The maximum height of each image. If zero, the original image heights are used.
  4.     insertAfter:        false,  // Inserts slideshow after target element (rather than inside) if true.
  5.     thumbnailWidth:     50,     // Width of thumbnails.
  6.     thumbnailHeight:    50,     // Height of thumbnails.
  7.     maxThumbnailWidth:  0,      // Maximum width of thumbnails. This is ignored if zero. If not zero and thumbnailWidth is larger than maxThumbnailWidth, maxThumbnailWidth supersedes the thumbnailWidth.
  8.     maxThumbnailHeight: 0,      // Maximum height of thumbnails. This is ignored if zero. If not zero and thumbnailHeight is larger than maxThumbnailHeight, maxThumbnailHeight supersedes the thumbnailHeight.
  9.     slideDuration:      400,    // The number of milliseconds of each slide animation. Ignored if changeSlideEvery is zero.
  10.     changeSlideEvery:   0       // Number of milliseconds until slide is automatically changed. If zero, slides aren't changed automatically.
  11. }