├── .gitignore ├── demo ├── demo.js ├── index.html └── Demo.svelte ├── dist └── index.html ├── package.json ├── LICENSE ├── rollup.config.js ├── .circleci └── config.yml ├── src └── Carousel.svelte └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /demo/demo.js: -------------------------------------------------------------------------------- 1 | import Demo from './Demo.svelte' 2 | 3 | new Demo({ target: document.body }) -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Svelte Carousel | Developer Documentation 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Svelte Carousel | Developer Documentation 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@beyonk/svelte-carousel", 3 | "svelte": "src/Carousel.svelte", 4 | "module": "dist/index.mjs", 5 | "main": "dist/index.js", 6 | "version": "2.9.1", 7 | "scripts": { 8 | "build": "rollup -c", 9 | "dev": "NODE_ENV=development rollup -cw", 10 | "prepublishOnly": "npm run build" 11 | }, 12 | "devDependencies": { 13 | "@gen/rollup-plugin-generate-html": "^0.1.1", 14 | "rollup": "^1.16.2", 15 | "rollup-plugin-commonjs": "^10.0.1", 16 | "rollup-plugin-node-resolve": "^5.1.0", 17 | "rollup-plugin-postcss": "^2.0.3", 18 | "rollup-plugin-serve": "^1.0.1", 19 | "rollup-plugin-svelte": "^5.1.0", 20 | "svelte": "^3.6.1", 21 | "svelte-feather-icons": "^1.1.1" 22 | }, 23 | "keywords": [ 24 | "svelte", 25 | "carousel", 26 | "slider", 27 | "glidejs", 28 | "slick", 29 | "flickity", 30 | "siema" 31 | ], 32 | "repository": "github:beyonk-adventures/svelte-carousel", 33 | "files": [ 34 | "src", 35 | "dist/index.js", 36 | "dist/index.mjs" 37 | ], 38 | "dependencies": { 39 | "siema": "^1.5.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016-20 [these people](https://github.com/beyonk-adventures/svelte-carousel/graphs/contributors) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte' 2 | import pkg from './package.json' 3 | import serve from 'rollup-plugin-serve' 4 | import resolve from 'rollup-plugin-node-resolve' 5 | import commonjs from 'rollup-plugin-commonjs' 6 | import css from 'rollup-plugin-postcss' 7 | import html from '@gen/rollup-plugin-generate-html' 8 | 9 | const name = pkg.name 10 | .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3') 11 | .replace(/^\w/, m => m.toUpperCase()) 12 | .replace(/-\w/g, m => m[1].toUpperCase()); 13 | 14 | const dev = process.env.NODE_ENV === 'development' 15 | 16 | const plugins = [ 17 | resolve(), 18 | commonjs(), 19 | css(), 20 | svelte() 21 | ] 22 | 23 | const output = [ 24 | { file: `${pkg.module}`, 'format': 'es' }, 25 | { file: `${pkg.main}`, 'format': 'umd', name } 26 | ] 27 | 28 | if (dev) { 29 | plugins.push( 30 | html({ 31 | template: 'demo/index.html', // Default undefined 32 | filename: 'index.html', // Default index.html 33 | publicPath: 'dist' // Default undefined 34 | }), 35 | serve({ 36 | contentBase: 'dist', 37 | port: 12001 38 | }) 39 | ) 40 | } 41 | 42 | export default { 43 | input: dev ? './demo/demo.js' : './src/Carousel.svelte', 44 | output, 45 | plugins 46 | } 47 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | docker: 5 | - image: circleci/node:10 6 | 7 | working_directory: ~/workspace 8 | 9 | steps: 10 | - checkout 11 | 12 | - restore_cache: 13 | keys: 14 | - v1-dependencies-{{ checksum "package.json" }} 15 | 16 | - run: npm install 17 | 18 | - save_cache: 19 | paths: 20 | - node_modules 21 | key: v1-dependencies-{{ checksum "package.json" }} 22 | 23 | - store_test_results: 24 | path: reports/junit 25 | 26 | publish: 27 | docker: 28 | - image: circleci/node:10 29 | 30 | steps: 31 | - add_ssh_keys 32 | - checkout 33 | 34 | - run: 35 | name: Authorize NPM 36 | command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc 37 | 38 | - restore_cache: 39 | keys: 40 | - v1-dependencies-{{ checksum "package.json" }} 41 | 42 | - run: npm install 43 | 44 | - save_cache: 45 | paths: 46 | - node_modules 47 | key: v1-dependencies-{{ checksum "package.json" }} 48 | 49 | - run: 50 | name: Publish to NPM 51 | command: npm publish 52 | 53 | workflows: 54 | version: 2 55 | main: 56 | jobs: 57 | - build: 58 | context: org-global 59 | filters: 60 | branches: 61 | only: master 62 | tags: 63 | only: /v.*/ 64 | - publish: 65 | context: org-global 66 | requires: 67 | - build 68 | filters: 69 | branches: 70 | ignore: /.*/ 71 | tags: 72 | only: /v.*/ -------------------------------------------------------------------------------- /demo/Demo.svelte: -------------------------------------------------------------------------------- 1 |
2 | {#each carousels as carousel} 3 | 4 | 5 | 6 | 7 |
8 |
9 | 10 |
11 |
12 | Hello I am kitten 13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 | I am fluffy 21 |
22 |
23 |
24 |
25 | 26 |
27 |
28 | I enjoy wool 29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 | I eat beans 37 |
38 |
39 | 40 | 41 | 42 | 43 |
44 |
45 | {/each} 46 |
47 | 48 | 81 | 82 | -------------------------------------------------------------------------------- /src/Carousel.svelte: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 | {#if controls} 7 | 10 | 13 | {/if} 14 | {#if dots} 15 | 20 | {/if} 21 |
22 | 23 | 80 | 81 | 172 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## This project is now archived. We don't use carousels any more, [and](https://powerdigitalmarketing.com/blog/why-you-should-not-use-a-carousel-on-your-website/#gref) [you](https://www.impactplus.com/blog/why-homepage-carousels-are-bad#:~:text=Carousels%20may%20seem%20flashy%20and,reflects%20badly%20on%20your%20brand.) [shouldn't](https://thegood.com/insights/ecommerce-image-carousels/) [either](https://cxl.com/blog/dont-use-automatic-image-sliders-or-carousels/). 2 | 3 | 4 | 5 | 6 | 7 | ## Svelte Carousel 8 | 9 | [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![CircleCI](https://circleci.com/gh/beyonk-adventures/svelte-carousel.svg?style=shield)](https://circleci.com/gh/beyonk-adventures/svelte-carousel) [![svelte-v2](https://img.shields.io/badge/svelte-v2-orange.svg)](https://v2.svelte.dev) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev) 10 | 11 | Svelte Carousel / Slider 12 | 13 | This is a ground-up rewrite of the original Svelte Carousel/Slider using Svelte v3, and [Siema](https://github.com/pawelgrzybek/siema), the goal being a fully working carousel with a tiny size. 14 | 15 | ## Usage 16 | 17 | This library is pure javascript, so can be used with any framework you like. 18 | 19 | ### Demo 20 | 21 | The [simplest possible demo](https://svelte.dev/repl/3953567d530b41d087ab7eaa8e7e632a?version=3.22.3) 22 | 23 | ``` 24 | npm install 25 | npm run dev # http://localhost:12001 26 | ``` 27 | 28 | ### To use within a Svelte application: 29 | 30 | ```bash 31 | npm i -D @beyonk/svelte-carousel 32 | ``` 33 | 34 | ## Usage 35 | 36 | ```jsx 37 | 38 |
Slide 1
39 |
Slide 2
40 |
Slide 3
41 |
Slide 4
42 | 43 | 44 | 48 | ``` 49 | 50 | ### Options 51 | 52 | #### Controls 53 | 54 | You can set the controls to be anything you like, though the default height and width are set to 40px. Just use the slots available to insert your own content. 55 | 56 | ```bash 57 | npm i -D svelte-feather-icons 58 | ``` 59 | 60 | ```jsx 61 | 62 | 63 | 64 | 65 |
Slide 1
66 | ... 67 |
Slide n
68 | 69 | 70 | 71 | 72 | 73 | 77 | ``` 78 | 79 | If you need to override height and width, you can use CSS: 80 | 81 | ```css 82 | .control :global(svg) { 83 | width: 100%; 84 | height: 100%; 85 | color: #fff; 86 | border: 2px solid #fff; 87 | border-radius: 32px; 88 | } 89 | ``` 90 | 91 | #### Attributes 92 | 93 | You can pass the following attributes: 94 | 95 | | Attribute | Type | Default Value | Description | 96 | |-----------|---------|---------------|------------------------------------------------------------------------------------------------------------------------------| 97 | | loop | boolean | true | At the end of the carousel, loop through to the first slide again, seamlessly | 98 | | perPage | integer | 3 | Number of slides on a single page. Note that this needs to be less than or equal to the number of slides in your carousel | 99 | | autoplay | integer | 0 | Auto-change slide at an interval (in milliseconds). 0 means don't autoplay. | 100 | | duration | number | 200 | Slide transition duration in milliseconds. | 101 | | easing | string | 'ease-out' | It is like a CSS transition-timing-function — describes acceleration curve. | 102 | | startIndex | number | 0 | Index (zero-based) of the starting slide. | 103 | | draggable | boolean | true | Use dragging and touch swiping. | 104 | | multipleDrag | boolean | true | Allow dragging to move multiple slides. | 105 | | dots | boolean | true | Toggles visibility of slider dots. 106 | | controls | boolean | true | Toggles visibility of slider controls. dots. | 107 | | threshold | number | 20 | Touch and mouse dragging threshold (in px). | 108 | | rtl | boolean | false | Enables layout for languages written from right to left (like Hebrew or Arabic). | 109 | 110 | perPage can also be set to a responsive object, to change the number of slides based on screen width: 111 | 112 | ```jsx 113 | 114 | // will show 1 slide below 500px width, 2 at 500, 3 at 800. 115 | ``` 116 | 117 | ### Events 118 | 119 | The Carousel components emits the following events: 120 | 121 | | Name | Data | Description | 122 | |----------|--------------------------------|--------------------------------------------------------------------------------| 123 | | `change` | `{ currentSlide, slideCount }` | `currentSlide`: The current slide index. Can be a positive or negative integer. `slideCount`: The number of slides. | 124 | 125 | 126 | ### Actions 127 | 128 | You can call left, right, go(slideNumber), pause and resume functions on the slider. For example, for pausing the autoslide while the mouse is hover the carousel 129 | 130 | ```jsx 131 | 132 |
Slide 1
133 | ... 134 |
Slide n
135 | 136 | 137 | 149 | ``` 150 | 151 | 152 | --------------------------------------------------------------------------------