You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.4 KiB
68 lines
2.4 KiB
<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>
|