slider/src/slider.riot

<tiny-slider>
    <div class="slider tiny-slider">
        <div class="display-flex">
            <button class="{ getPreviousClasses() }" onclick={ (event) => { handlePrevious(event) } }>
                <svg class="icon">
                    <use xlink:href="/symbol-defs.svg#icon-previous" />
                </svg>
            </button>
            <div class="overflow-hidden">
                <div class="slider__inner tiny-slider__inner" style={ getContentStyles() }>
                    <div class="slider__item tiny-slider__item" each={ slide in state.slides }>
                        <h3 class="tiny-slider__title">
                            { slide.title }
                        </h3>
                        <figure class="tiny-slider__figure" if={ slide.media }>
                            <img class="tiny-slider__media" loading="lazy" src="{ slide.media.url }" alt="{ slide.media.description }" />
                        </figure>
                        <div class="tiny-slider__content">
                            <div class="content">
                                <tiny-raw html={ slide.content }></tiny-raw>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="{ getNextClasses() }" onclick={ (event) => { handleNext(event) }}>
                <svg class="icon">
                    <use xlink:href="/symbol-defs.svg#icon-next" />
                </svg>
            </button>
        </div>
        <div class="tiny-slider__select display-flex m-top-4">
            <span class="{ getSelectClasses(position) }" each={ (slide, position) in state.slides } onclick={ (event) => { handleSelect(event, position) }}></span>
        </div>
    </div>

    <script>

        // riot
        import * as riot from 'riot'

        // mixin
        import sliderMixin from './mixin.js'

        // tiny-raw & riot
        import raw from '@tiny-components/raw/src/raw.riot'
        riot.register('tiny-raw', raw)

        /**
         *  Markup for slider, extends from sliderMixin.js
         *
         *  @author Björn Hase
         *  @license http://opensource.org/licenses/MIT The MIT License
         *  @link https://gitea.node001.net/tiny-components/slider
         *
         */

        export default () => {
            return {

                ...sliderMixin

            }
        }
    </script>

</tiny-slider>