antony

wolfr

alex.dilley

adampond

siraaj

ahpercival

@beyonk/svelte-carousel

    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);

    var Siema = unwrapExports(siema_min);

    var siema_min$1 = unwrapExports(siema_min);

    var Siema = /*#__PURE__*/Object.freeze({

    /* src/Carousel.svelte generated by Svelte v3.6.1 */

    	style.textContent = ".carousel.svelte-1ppqxio{position:relative;width:100%;justify-content:center;align-items:center}button.svelte-1ppqxio{position:absolute;width:40px;height:40px;top:50%;z-index:50;margin-top:-20px;border:none;background-color:transparent}button.svelte-1ppqxio:focus{outline:none}.left.svelte-1ppqxio{left:2vw}.right.svelte-1ppqxio{right:2vw}ul.svelte-1ppqxio{list-style-type:none;position:absolute;display:flex;justify-content:center;width:100%;margin-top:-30px;padding:0}ul.svelte-1ppqxio li.svelte-1ppqxio{margin:6px;border-radius:100%;background-color:rgba(255,255,255,0.5);height:8px;width:8px}ul.svelte-1ppqxio li.svelte-1ppqxio:hover{background-color:rgba(255,255,255,0.85)}ul.svelte-1ppqxio li.active.svelte-1ppqxio{background-color:rgba(255,255,255,1)}";

    function get_each_context(ctx, list, i) {

    	const child_ctx = Object.create(ctx);

    const get_right_control_slot_changes = ({}) => ({});

    const get_right_control_slot_context = ({}) => ({});

    const get_left_control_slot_changes = ({}) => ({});

    const get_left_control_slot_context = ({}) => ({});

    	var button0, t, button1, current, dispose;

    	const left_control_slot_1 = ctx.$$slots["left-control"];

    	const left_control_slot = create_slot(left_control_slot_1, ctx, get_left_control_slot_context);

    	const right_control_slot_1 = ctx.$$slots["right-control"];

    	const right_control_slot = create_slot(right_control_slot_1, ctx, get_right_control_slot_context);

    			if (left_control_slot) left_control_slot.c();

    			if (right_control_slot) right_control_slot.c();

    			attr(button0, "class", "left svelte-1ppqxio");

    			attr(button0, "aria-label", "left");

    			attr(button1, "class", "right svelte-1ppqxio");

    			attr(button1, "aria-label", "right");

    				listen(button0, "click", ctx.left),

    				listen(button1, "click", ctx.right)

    			if (left_control_slot) left_control_slot.l(button0_nodes);

    			if (right_control_slot) right_control_slot.l(button1_nodes);

    				left_control_slot.m(button0, null);

    				right_control_slot.m(button1, null);

    			if (left_control_slot && left_control_slot.p && changed.$$scope) {

    				left_control_slot.p(get_slot_changes(left_control_slot_1, ctx, changed, get_left_control_slot_changes), get_slot_context(left_control_slot_1, ctx, get_left_control_slot_context));

    			if (right_control_slot && right_control_slot.p && changed.$$scope) {

    				right_control_slot.p(get_slot_changes(right_control_slot_1, ctx, changed, get_right_control_slot_changes), get_slot_context(right_control_slot_1, ctx, get_right_control_slot_context));

    			transition_in(left_control_slot, local);

    			transition_in(right_control_slot, local);

    			transition_out(left_control_slot, local);

    			transition_out(right_control_slot, local);

    	function isDotActive (currentIndex, dotIndex) {

            if (currentIndex < 0) currentIndex = pips.length + currentIndex;

            return currentIndex >= dotIndex*currentPerPage && currentIndex < (dotIndex*currentPerPage)+currentPerPage

    			timer = setInterval(right, autoplay);

    		$$invalidate('currentIndex', currentIndex = controller.currentSlide);

    			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 ('duration' in $$props) $$invalidate('duration', duration = $$props.duration);

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

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

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

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

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

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

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

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

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

    	let pips, currentPerPage, totalDots;

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

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

    		if ($$dirty.controller || $$dirty.perPage) { $$invalidate('currentPerPage', currentPerPage = controller ? controller.perPage : perPage); }

    		if ($$dirty.controller || $$dirty.currentPerPage) { $$invalidate('totalDots', totalDots = controller ? Math.ceil(controller.innerElements.length / currentPerPage) : []); }

    class Carousel extends SvelteComponent {

    		if (!document.getElementById("svelte-1ppqxio-style")) add_css();

    		init(this, options, instance, create_fragment, safe_not_equal, ["perPage", "loop", "autoplay", "duration", "easing", "startIndex", "draggable", "multipleDrag", "dots", "controls", "threshold", "rtl", "isDotActive", "left", "right", "go", "pause", "resume"]);

    "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.

The [simplest possible demo](https://svelte.dev/repl/3953567d530b41d087ab7eaa8e7e632a?version=3.22.3)

  <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:

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

| dots | boolean | true	      | Toggles visibility of slider dots.

		@@ -330,5 +330,11 @@ (function (global, factory) {

		var Siema = unwrapExports(siema_min);
		var siema_min$1 = unwrapExports(siema_min);
		var siema_min_1 = siema_min.Siema;

		var Siema = /#__PURE__/Object.freeze({
		'default': siema_min$1,
		__moduleExports: siema_min,
		Siema: siema_min_1
		});

		/* src/Carousel.svelte generated by Svelte v3.6.1 */
		@@ -697,2 +703,3 @@
		autoplay && clearInterval(timer);
		timer = null;
		controller.destroy();
		@@ -721,6 +728,7 @@ }
		clearInterval(timer);
		timer = null;
		}

		function resume() {
		if (autoplay) {
		if (autoplay && !timer) {
		timer = setInterval(right, autoplay);
		@@ -727,0 +735,0 @@ }

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

		@@ -1,4 +0,4 @@
		<p align="center">
		<img width="186" height="90" src="https://user-images.githubusercontent.com/218949/44782765-377e7c80-ab80-11e8-9dd8-fce0e37c235b.png" alt="Beyonk" />
		</p>
		<a href="https://beyonk.com">
		<img src="https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png" width="198" />
		</a>

		@@ -149,2 +149,2 @@ ## Svelte Carousel

Improved metrics