# Слайдер текста на JavaScript

В уроке показана реализация слайдера текста на JavaScript. Разобрано два варианта: с таймером и с кнопочками.

## Исходники кода

`<div id="slider1"> <div class="elem"></div> <button class="prev">prev</button> <button class="next">next</button> </div> <div id="slider2"> <div class="elem"></div> <button class="prev">prev</button> <button class="next">next</button> </div>` `initSlider(['text 1', 'text 2', 'text 3'], '#slider1'); initSlider(['text 4', 'text 5', 'text 6'], '#slider2'); function initSlider(texts, selector) { var parent = document.querySelector(selector); var elem = parent.querySelector('.elem'); var prev = parent.querySelector('.prev'); var next = parent.querySelector('.next'); var i = 0; elem.innerHTML = texts[i]; next.addEventListener('click', function() { i++; if (i == texts.length) { i = 0; } elem.innerHTML = texts[i]; }); prev.addEventListener('click', function() { i--; if (i == -1) { i = texts.length - 1; } elem.innerHTML = texts[i]; }); } /* var i = 1; elem.innerHTML = texts[0]; window.setInterval(function() { elem.innerHTML = texts[i]; i++; if (i == texts.length) { i = 0; } }, 1000); */`

## Смотрите также

- видео
  простой слайдер картинок JavaScript

← →
↑