Требуется написать Javascript-компонент, который обеспечивал бы работу прокручивающегося меню типа того, что используется на сайте Apple Store (имеется в виду горизонтальное меню с пунктами "Shop iPhone", "iPhone 6" ... и стрелочкой вправо).

Мы набросали прототип, в котором даже кое-как работают стрелочки.

Мы не нашли готовых решений, которые в полной мере удовлетворяли бы наши требования. Тестили BxSlider, Owl Slider, lightSlider, Touch Carousel, Unslider, Slick и несколько других плагинов для jQuery. Большая часть из них не работает, когда width: auto;, другие глючат, когда "слайды" разной ширины, третьи слишком тяжелые для такой задачи (>20КБ после минификации).

Прочие требования:

1. Код должен быть готов к повторному использованию, поэтому его нужно оформить соответствующим образом - в виде плагина к jQuery, либо к какому-то UI-фреймворку — по договоренности с нами.


2. Поддержка плавающей ширины (width: auto;) — см. прототип.


3. Стрелочки должны работать как в указанном примере (Apple Store). В начальном состоянии левая стрелочка должна быть спрятана, в конечном — прячется правая.


4. В отличие от слайдера Apple Store, наш слайдер должен также прокручиваться перетягиванием мышью (dragging), как в этом примере: http://www.owlcarousel.owlgraphic.com/index.html
   


5. 
   Слайдер Owl Carousel и слайдер Apple Store поддерживают touch events, т.е. прокручиваются пальцем на планшетах и мобилах с тач-экраном. Для нас это очень важно.


6. Эффект движения по инерции, как у Apple Store или Owl Carousel.


7. Анимацию реализовать с помощью CSS3 с Javascript fallback-ом (типа jQuery animate()).


8. При загрузке, меню должно автоматически прокручиваться до активного пункта меню. Чтобы понять о чем речь, нажмите на сайте Apple Store, например, "iPhone for Education". 


9. Совместимость с IE8+, а также современными версиями браузеров Chrome, Firefox, Opera, iOS Safari.

Прочие требования к коду:

• Адекватные задаче размеры исходника.


• Использование каких-либо плагинов, фреймворков и т.п. приветствуется, но только по согласованию с нами.


• Вообще заимствовать куски кода из других плагинов, типа Owl Carousel — разрешается.


• Код должен быть опрятным и читабельным, стремящимся соответствовать одному из общеизвестных style guides, например, от Google или Airbnb.


• Код должен не ломаться после минификации.

Оплата почасовая. По успешному выполнению этой задачи, вам будут предложены другие задачи подобного плана.

В заявке, пожалуйста, указывайте:

1. Вашу часовую ставку и примерную оценку трудозатрат.


2. Ссылку на ваш GitHub/блог/примеры кода.

Предпочтение отдается наиболее квалифицированным заявителям.

Имейл для связи dae@d43.me