antony

wolfr

alex.dilley

adampond

siraaj

ahpercival

@beyonk/svelte-carousel

kingham

    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :

    typeof define === 'function' && define.amd ? define(factory) :

    (global = global || self, global.Carousel = factory());

        return typeof thing === 'function';

        return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');

    function create_slot(definition, ctx, fn) {

            const slot_ctx = get_slot_context(definition, ctx, fn);

            return definition[0](slot_ctx);

    function get_slot_context(definition, ctx, fn) {

            ? assign({}, assign(ctx.$$scope.ctx, definition[1](fn ? fn(ctx) : {})))

    function get_slot_changes(definition, ctx, changed, fn) {

            ? assign({}, assign(ctx.$$scope.changed || {}, definition[1](fn ? fn(changed) : {})))

    function insert(target, node, anchor) {

        target.insertBefore(node, anchor || null);

        node.parentNode.removeChild(node);

    function destroy_each(iterations, detaching) {

        for (let i = 0; i < iterations.length; i += 1) {

                iterations[i].d(detaching);

        return document.createElement(name);

        return document.createTextNode(data);

    function listen(node, event, handler, options) {

        node.addEventListener(event, handler, options);

        return () => node.removeEventListener(event, handler, options);

    function attr(node, attribute, value) {

            node.removeAttribute(attribute);

            node.setAttribute(attribute, value);

        return Array.from(element.childNodes);

    function custom_event(type, detail) {

        const e = document.createEvent('CustomEvent');

        e.initCustomEvent(type, false, false, detail);

    function set_current_component(component) {

            throw new Error(`Function called outside component initialization`);

        get_current_component().$$.on_mount.push(fn);

        const component = current_component;

            const callbacks = component.$$.callbacks[type];

                // TODO are there situations where events could be dispatched

                // in a server (non-DOM) environment?

                const event = custom_event(type, detail);

                callbacks.slice().forEach(fn => {

                    fn.call(component, event);

    const resolved_promise = Promise.resolve();

            resolved_promise.then(flush);

        const seen_callbacks = new Set();

            // first, call beforeUpdate functions

            while (dirty_components.length) {

                const component = dirty_components.shift();

                set_current_component(component);

            while (binding_callbacks.length)

                binding_callbacks.shift()();

            // then, once components are updated, call

            // afterUpdate functions. This may cause

            while (render_callbacks.length) {

                const callback = render_callbacks.pop();

                if (!seen_callbacks.has(callback)) {

                    // ...so guard against infinite loops

                    seen_callbacks.add(callback);

        } while (dirty_components.length);

            $$.fragment.p($$.dirty, $$.ctx);

            $$.after_render.forEach(add_render_callback);

    function transition_in(block, local) {

    function transition_out(block, local, callback) {

            outros.callbacks.push(() => {

    function mount_component(component, target, anchor) {

        const { fragment, on_mount, on_destroy, after_render } = component.$$;

        // onMount happens after the initial afterUpdate. Because

        // afterUpdate callbacks happen in reverse order (inner first)

        // we schedule onMount callbacks before afterUpdate callbacks

            const new_on_destroy = on_mount.map(run).filter(is_function);

                on_destroy.push(...new_on_destroy);

                // Edge case - component was destroyed immediately,

                // most likely as a result of a binding initialising

        after_render.forEach(add_render_callback);

    function destroy_component(component, detaching) {

    	const dispatch = createEventDispatcher();

    		$$invalidate('controller', controller = new Siema({

    		autoplay && setInterval(right, autoplay);

    			currentSlide: controller.currentSlide,

    			slideCount: controller.innerElements.length

    	let { $$slots = {}, $$scope } = $$props;

    	function div0_binding($$node, check) {

    		if ('perPage' in $$props) $$invalidate('perPage', perPage = $$props.perPage);

    		if ('loop' in $$props) $$invalidate('loop', loop = $$props.loop);

    		if ('autoplay' in $$props) $$invalidate('autoplay', autoplay = $$props.autoplay);

    		if ('$$scope' in $$props) $$invalidate('$$scope', $$scope = $$props.$$scope);

    	$$self.$$.update = ($$dirty = { controller: 1 }) => {

    		if ($$dirty.controller) { $$invalidate('pips', pips = controller ? controller.innerElements : []); }

    class Carousel extends SvelteComponent {

    		if (!document.getElementById("svelte-6pleld-style")) add_css();

    		init(this, options, instance, create_fragment, safe_not_equal, ["perPage", "loop", "autoplay"]);

    "dev": "NODE_ENV=development rollup -cw",

    "@gen/rollup-plugin-generate-html": "^0.1.1",

    "rollup-plugin-node-resolve": "^5.1.0",

  "repository": "github:beyonk-adventures/svelte-carousel",

[![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)

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.

This library is pure javascript, so can be used with any framework you like.

  <div class="slide-content">Slide 1</div>

  <div class="slide-content">Slide 2</div>

  <div class="slide-content">Slide 3</div>

  <div class="slide-content">Slide 4</div>

	import Carousel from '@beyonk/svelte-carousel'

	import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons'

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.

  <div class="slide-content">Slide n</div>

	import Carousel from './Carousel.svelte'

If you need to override height and width, you can use CSS:

|-----------|---------|---------------|------------------------------------------------------------------------------------------------------------------------------|

perPage can also be set to a responsive object, to change the number of slides based on screen width:

// will show 1 slide below 500px width, 2 at 500, 3 at 800.

The Carousel components emits the following events:

| Name     | Data                           | Description                                                                    |

|----------|--------------------------------|--------------------------------------------------------------------------------|

| `change` | `{ currentSlide, slideCount }` | `currentSlide`: The current slide index. Can be a positive or negative integer. `slideCount`: The number of slides. |

		@@ -83,2 +83,7 @@ (function (global, factory) {
		}
		function custom_event(type, detail) {
		const e = document.createEvent('CustomEvent');
		e.initCustomEvent(type, false, false, detail);
		return e;
		}

		@@ -97,2 +102,16 @@ let current_component;
		}
		function createEventDispatcher() {
		const component = current_component;
		return (type, detail) => {
		const callbacks = component.$$.callbacks[type];
		if (callbacks) {
		// TODO are there situations where events could be dispatched
		// in a server (non-DOM) environment?
		const event = custom_event(type, detail);
		callbacks.slice().forEach(fn => {
		fn.call(component, event);
		});
		}
		};
		}

		@@ -538,2 +557,4 @@ const dirty_components = [];
		let timer;

		const dispatch = createEventDispatcher();

		@@ -544,3 +565,4 @@ onMount(() => {
		perPage,
		loop
		loop,
		onChange: handleChange
		}));
		@@ -568,2 +590,9 @@

		function handleChange (event) {
		dispatch('change', {
		currentSlide: controller.currentSlide,
		slideCount: controller.innerElements.length
		} );
		}

		let { $$slots = {}, $$scope } = $$props;
		@@ -570,0 +599,0 @@

		@@ -6,3 +6,3 @@ {
		"main": "dist/index.js",
		"version": "2.1.1",
		"version": "2.2.0",
		"scripts": {
		@@ -9,0 +9,0 @@ "build": "rollup -c",

		@@ -20,2 +20,3 @@ <p align="center">
		```
		npm install
		npm run dev # http://localhost:12001
		@@ -102,2 +103,10 @@ ```
		// will show 1 slide below 500px width, 2 at 500, 3 at 800.
		```
		```

		### Events

		The Carousel components emits the following events:

		\| Name \| Data \| Description \|
		\|----------\|--------------------------------\|--------------------------------------------------------------------------------\|
		\| `change` \| `{ currentSlide, slideCount }` \| `currentSlide`: The current slide index. Can be a positive or negative integer. `slideCount`: The number of slides. \|

Fixed alerts

Improved metrics