Помогите найти быстрое решение на js следующей задачи. Есть такая картина:
Код:
HTML:
<div id="container">
<div class="slide">...</div>
<div class="slide">...</div>
<div class="slide">...</div>
</div>
CSS:
#container {white-space: nowrap; overflow: auto;}
.slide {display: inline-block;}
Есть блок-контейнер, очень желательно резиновый 100% ширины, который содержит много inline-block-элементов разной ширины. Т.к. есть запрет переноса, соответственно появляется горизонтальный скроллбар при переполнении. Нужен js скрипт, который автоматически крутит содержимое контейнера направо-налево, и останавливается при наведении мышки. В интернете куча скроллеров/слайдеров, но я в этом разнообразии потерялся...
CSS указанный вовсе необязателен, да и без скроллбара можно обойтись, главное - плавный атоматический скроллинг туда-сюда (еще лучше - непрерывный, в одну сторону) ряда элементов произвольной ширины в контейнерном блоке тоже произвольной ширины. Многие mootools и jquery слайдеры требуют как для прокручиваемых элементов, так и для контейнера указание фиксированной ширины, а мне этого не надо... Поэтому, думаю, лучше реализовать именно через доработку обычного скроллинга, но, учитывая, что сам скроллбар, дабы не резать глаз, у меня стилизуется скриптом flexscroll.
Если еще короче - нужна плавная карусель разношироких элементов с остановкой анимации при наведении мыши.
Заранее спасибо.