Слайдер Tiny Slider

Слайдер контента Tiny Slider — это универсальный элемент, с помощью которого можно организовать слайдер не только изображений, но и произвольного контента.

Для подключения слайдера укажите у страницы:

use.tiny-slider: +

Код слайдера состоит из двух частей. Первая часть — это html-код разметки, вторая — инициализация через JavaScript.

<div style="--nav-bg-active: #4D4D4D; --nav-bg: #B8B8B8; --nav-bor-radius: 5px; --nav-mar: 0 3px; --nav-height: 10px; --nav-width: 20px">
    <div class="my-slider">
      <div class="pad30 bg-primary100 t-center">1</div>
      <div class="pad30 bg-primary200 t-center">2</div>
      <div class="pad30 bg-primary300 t-center">3</div>
      <div class="pad30 bg-primary400 t-center">4</div>
      <div class="pad30 bg-primary500 t-center">5</div>
    </div>
</div>

<!-- nosimple --><script>
    var slider = tns({
        container: '.my-slider',
        items: 2,
        autoplay: true,
        autoplayTimeout: 3000,
        mouseDrag: true,
        controls: false,
        navPosition: 'bottom',
        autoplayButtonOutput: false,
    });
</script><!-- /nosimple -->