Карусель | Висловлюючи IT

2008 9 грудня 2008

Проста карусель з допомогою підкачки Mootools

Завдяки різноманітності Каруселі там багато для Mootools, а також, я все ж вирішив написати свій власний клас Карусель, деякі вагомі причини
1. Потрібні підкачки функцію (щоб мати можливість перейти зокрема слайд / крок в каруселі).
2. Потрібні волі з розміщенням кнопок вліво і вправо / зв'язку, де б я, будь ласка.
3. Більше контролю над Слайд кроки.

Мені вдалося створити нові каруселі, з урахуванням вищезазначених особливостей ... нижче ... Не соромтеся пропонувати будь-які зміни зажадають!

Мій приклад виглядає наступним чином ... [ Переглянути презентацію ]
Mootools карусель з підкачкою

Переглянути демо | Завантажити Mootools карусель з підкачкою версії 1.0 (Скачано 1976 раз)

1. Карусель пейджинга

Ви можете легко додати підкачки до каруселі, просто встановивши підкачки прапор, який є останнім parater пройшло при створенні екземпляра MooCarousel до істинної (хочу підкачки) або FALSE (виграш бажаючих підкачки).

УАГ carousel1 = новий MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда) / / нс = кількість слайдів, SSS = слайд кроку

І звичайно ж ви можете змінити зовнішній вигляд-н-стиль цих підкачки achors як вам буде завгодно, змінюючи їх CSS.

. Carousel_paging {вирівнювання тексту: праворуч; поле: 5px 10px 0 0;}
. Carousel_paging струму, carousel_paging сторінки {контуру: немає; ширина: ... 15px висота: 15px; висота рядка: 15px; вирівнювання тексту: центр; дисплей: блок; float: left; фон: # D8D8EB; маржа: 0 1px 0 0; текст-оздоблення: немає;}
. Carousel_paging: наведіть, carousel_paging поточний {фон: # 4D4D9B, колір: # FFFFFF;} ..

Ну! є невелика проблема, хоча, підкачування якоря якщо встановлений, то він отримає породжених завжди після того, як карусель компонентів. Я хотів зробити його динамічним, як добре, але потім просто зберегти сценарій для видува пропорції, я вирішив пропустити його.
Але ви знаєте, трохи Javascript, ви можете легко змінити код підкачки покоління в MooCarousel класу порадувати своїх потреб.

2. Налаштування лівий і правий іконки

Ви можете змінити розміщення, зображення або будь-якого displat власності ліва і права кнопки просто граючи з CSS. щоб бути в змозі змінити розміщень лівої і правої buttoms була дійсна причина для мене, щоб права наших моя карусель класу.
Так як це MooCarousel класу, приймає ідентифікатори з цих кнопок, ви можете помістити ці кнопки в будь-якому місці сторінки, будь ласка ... це не повинно бути в ієрархії елементів, як у моєму прикладі.

УАГ carousel1 = новий MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда);
CSS
.. Carousel_container_l, carousel_container_r {маржа: 50px 0 0 0; позиція: відносна ширина: 23px висота: 20px; float: left; курсора: покажчик;}
. Carousel_container_r {фон-позиції: 0-38px;}
. Carousel_container_l {фон-позиції: 0-58px;}

3. Налаштування слайд кроки

Що я маю на увазі мій Налаштування КРОКИ SLIDE?
Більшість Каруселі ковзати з повним видимого вікна. Так кажуть у вас було чотири елементи (як в моєму прикладі вище), то буде ковзати всіма чотирма елементами. З цією каруселі компонент, Ви передаєте кількість слайдів і розмір кроку за вашим вибором.

УАГ carousel1 = новий MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда);
c_ns = кількість слайдів, c_sss = слайд кроку

Крім того, в моєму example1 я calcuted розмір слайда крок, засновані на логіці, де, я знаю, кількість предметів, шириною по кожному пункту, і поля, які дали після того, як кожен елемент в моєму CSS.

/ * Для гулянки 1 * /
УАГ c1_w = 92; / / гулянки товару Ширина
УАГ c1_n = 10; / / Загальна кількість товарів Порівняння гулянки
УАГ c1_pp = 4 / / Кількість Порівняння perpage гулянки товарів
УАГ c1_marginFactor = 51;
УАГ c1_sss = c1_w * c1_pp / / SSS = слайд кроку
УАГ c1_ns = ParseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / нс = кількість слайдів
c1_sss + = c1_marginFactor / / SSS = слайд кроку, 51 полів