Slider 🔗

Слайдер новостей, разделённый на две половины – текстовая часть слева и изображение справа

Пример использования:

Исходный код для примера выше:

<Slider let:showPrevPage let:showNextPage background="white" duration={5} autoplay={true} dots={false}>
    <Slide img="/img/slide1-img.jpg">
        <Heading size={ 2 } color="var(--blue)">Стань инженером будущего в Институте новых материалов и технологий УрФУ</Heading>
        <Text className="heading-3">Актуальная информация о поступлении в университет в 2022 году:</Text>
        <Link href="" borderWidth={ 2 }>Бакалавриат и специалитет</Link><br /><br />
        <Link href="" borderWidth={ 2 }>Магистратура</Link><br />
        <svelte:fragment slot="buttons">
            <RoundButton size="M" variant="left" on:click={ showPrevPage } />
            <RoundButton size="M" variant="right" on:click={ showNextPage } />
        </svelte:fragment>
    </Slide>
    <Slide img="/img/slide2-img.jpg">
        <Heading size={ 2 } color="var(--blue)">Стань инженером будущего в Институте новых материалов и технологий УрФУ</Heading>
        <Text className="heading-3">Актуальная информация о поступлении в университет в 2022 году:</Text>
        <Link href="" borderWidth={ 2 }>Бакалавриат и специалитет</Link><br /><br />
        <Link href="" borderWidth={ 2 }>Магистратура</Link><br />
        <svelte:fragment slot="buttons">
            <RoundButton size="M" variant="left" on:click={ showPrevPage } />
            <RoundButton size="M" variant="right" on:click={ showNextPage } />
        </svelte:fragment>
    </Slide>
</Slider>

Параметры:

background

string

Настройка заднего фона. Принимаются любые значения, валидные для стандартного background в CSS
Значение по умолчанию: transparent

autoplay

boolean

Автоматическое листание
Значение по умолчанию: true

duration

number

Длительность одного слайда (в секундах) при включённом autoplay
Значение по умолчанию: 7

swiping

boolean

Возможность листать слайды с помощью касаний (как на сенсорных экранах)
Значение по умолчанию: false

arrows

boolean

Отображать стандартные кнопки для перелистывания слайдов
Значение по умолчанию: false

progressBar

boolean

Отображать прогресс автоматического перелистывания (только при autoplay = true)
Значение по умолчанию: true

node

HTMLElement

Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)

id

string

Аналог стандартного атрибута id

className

string

Аналог стандартного атрибута class

Поддерживаемые события:

on:pageChanged

Событие, которое срабатывает при каждой смене страницы
Передаваемый в функцию аргумент: page - номер текущей страницы