readme.md

#Задание слайдер(карусель)

Написать циклический слайдер для элементов списка. Шаблон верстки для слайдера

  <div data-slider>
    <button type="button">prev</button>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
        <li><a href="#">Link 9</a></li>
        <li><a href="#">Link 10</a></li>
        <li><a href="#">Link 11</a></li>
        <li><a href="#">Link 12</a></li>
    </ul>
    <button type="button">next</button>
  </div>

Слайдер должен одновременно показывать только три лишки из списка, при нажатии на prev слайдер должен сместиться на один элемент влево(вверх), при нажатии на next - на один элемент вправо(вниз).

Слайдер должен быть циклическим, то есть лишки должны показываться по кругу.

Пример:

Изначально показаны Link 1, Link 2, Link 3,

при нажатии на prev покажутся Link 12, Link 1, Link 2

при нажатии на next покажутся Link 2, Link 3, Link 4

Для реализации слайдера разрешено добавлять к элементам любые аттрибуты айдишники и классы

Можно написать цсс для красоты.

На выбор можно сделать два варианта : проще в плане css - слайдер вертикальный, немного сложнее - слайдер горизонтальный(для него точно придется писать цсс)

Плюс, для тех кто захочет, можно заменить линки на картинки и добавить анимации используя свойство css3 transition

Как вы наверно догадались, слайдер должен быть переиспользуемым, то есть принимать любое количество лишек в списке. Если слайдер инициализируется на списке с количеством лишек меньше трех, то кнопки next и prev должны блокироваться и ничего не делать при нажатиях