Доброго времени суток, дорогий читачу! Зараз я хочу поділитися з Вами досвідом у створенні цікавого слайдера. Завдання полягало в тому, щоб на сайті був слайдер з можливістю зміни заднього фону і тексту при зміні картинки. Для реалізації цього завдання в якості основи я взяв слайдер TMS. Сам по собі він вміє створювати слайдер з групи зображень і вміє вставляти текст над зображенням, але мені потрібно було більше: пагінація повинна бути з іконок зображень і потрібен другий див з текстом. В основному вся ідея полягає в зміні класу об'єкта за допомогою jQuery. Ну що ж, ознайомившись з проблемами, приступимо до їх вирішення.
На офіційному сайті TMS slider Ви зможете дізнатися як його підключити до сайту, я ж розповім як я його зраджував.
Приготування HTML і CSS
Для початку я змінив вхідні дані плагіна на:
і налаштував висновок інформації в HTML. Тут я скористався атрибутом title для виведення другого дива з текстом, яким потім буду виводити в діві banner_content. Див banner, укладений між кожним
, виводиться стандартним скриптом TMS слайдера:Після цих приготувань перше що мені впало в очі - пагінація слайдера, замість круглішков я хотів би бачити іконки своїх зображень. Для цього я поліз міняти CSS стилі. Ось все що я залишив від стилю pagination:
Кожен див пагінацію виводить в background'е зображення через CSS стиль, це зручно в разі зміни зображення в активному і пасивному вигляді:
На цьому етапі іконки в пагінацію не показуються, для цього нам потрібно внести зміни в скрипт TMS слайдера, ніж ми і займемося в наступному етапі.
редагування tms.js
Наступне на нашому шляху редагування виявиться функція changeFu. яка відповідає за процес зміни слайдів. Де-небудь в кінці це фукнции після _.showFu () вставляємо код, який буде змінювати зображення заднього фону і приховувати текст другого дива з текстом:
Далі рухаємося на функцію afterShow. Назавніе фунции свідчить сама за себе. У ній треба б змінити один рядок і додати іншу:
Тепер функція parseImgFu. яка відповідає за збір інформації з html коду, який ми надали слайдеру. Знаходимо рядок в циклі each _.itms [i] = $ (this) .attr ( 'src') і під неї вставляємо два рядки, які візьмуть назву класів і текст для другого дива:
Назва функції paginationFu так само говорить сама за себе, в ній треба буде підправити код для виведення мініатюр. Знаходимо рядок _.pags.append (li.append ( '')) І замінюємо її на:
І на останок знаходимо функцію bannersFu. яка виводить текст в див banner. У ній нам потрібно знайти рядок _.bannerShow (_. Banner = _. Bnnrs [_. Show] .appendTo (_. Me), _) і замінити двома:
Ну що ж на цьому редагування скрипта закінчена, можна зберегти файл і подивитися що вийшло. А вийшов бардак, який потрібно прибрати за допомогою CSS стилів для наших Дивов.
І так само для стилю internet і website. Приклад цього слайдера можна подивитися на сайті компанії 2А Софт
На цьому всі зміни закінчені, можна радіти виконану роботу і випробувати цей витвір. До нових зустрічей!
З усіх питань обращатесь на [email protected]