Скроллер (карусель) на JavaScript с помощью jScrollPane

О чём эта статья?

В этой статье мы поговорим о том, как плагин jQuery для создания нестандартной полосы прокрутки под названием jScrollPane (о котором я рассказывал в одном из прошлых постов) может помочь нам сделать простой скроллер содержимого на web-страницах нашего сайта. При этом скроллер может быть как линейным (то есть все элементы расположены в ряд один за другим), так и сеткой (что-нибудь вроде такого).

Введение

Некоторое время назад мне необходимо было сделать скроллер содержимого в виде сетки. Для тех, кто не знает, типичный скроллер выглядит так, а скроллер в виде сетки - вот так (его также называют каруселью, в английском варианте scroller или carousel). Плагинов jQuery для создания скроллеров существует огромное количество, как платных, так и бесплатных. Для нескольких проектов мне уже приходилось искать подобные плагины, но в данном случае они не подходили, потому что необходимо было сделать нестандартное расположение элементов в сетке - в частности, некоторые элементы могли занимать несколько клеток (откройте приведённый выше пример и вы поймёте, о каких клетках я говорю). Большинство плагинов подразумевает, что элементы во всех клетках должны иметь одинаковую ширину и высоту, а времени для долгих поисков готового решения у меня попросту не было. Так родилась нехитрая идея, которую я опишу здесь.

Располагаем элементы будущего скроллера

В первую очередь надо понять, каким будет наш скроллер. Будет ли он линейным или сеточным? Если сеточным, то сколько рядов он будет иметь? Какова будет ширина и высота элементов? Будут ли все они иметь одинаковые размеры?

Пусть в нашем примере скроллер будет сеточным

Следуйте за мной в Твиттере, чтобы первым узнавать о новых статьях >>

Комментарии

Чтобы оставить комментарий, пожалуйста, войдите через одну из социальных сетей: