Доброго времени суток, дорогой читатель! Сейчас я хочу поделиться с Вами опытом в создании интересного слайдера. Задача состояла в том, чтобы на сайте был слайдер с возможностью изменения заднего фона и текста при смене картинки. Для реализации сей задачи в качестве основы я взял слайдер TMS. Сам по себе он умеет создавать слайдер из группы изображений и умеет вставлять текст поверх изображения, но мне нужно было больше: пагинация должна быть из иконок изображений и нужен второй див с текстом. В основном вся идея состоит в изменении класса объекта с помощью jQuery. Ну что ж, ознакомившись с проблемами, приступим к их решению.

На официальном сайте TMS slider Вы сможете узнать как его подключить к сайту, я же расскажу как я его изменял.

Приготовления HTML и CSS

Для начала я изменил входные данные плагина на:

$('.slider_wrapper')._TMS({
show:0,
pauseOnHover:true,
playBu:false,
duration:300,
preset:'fade',
pagination:true,
pagNums:false,
slideshow:9000,
numStatus:false,
banners: 'fade',
waitBannerAnimation:true,
progressBar:false
});

и настроил вывод информации в HTML. Здесь я воспользовался атрибутом title для вывода второго дива с текстом, которым потом буду выводить в диве banner_content. Див banner, заключенный между каждым <li></li>, выводится стандартным скриптом TMS слайдера:

<div id="back_fon" class="back_mobilepo"></div>
<div class="slider_wrapper">
<ul class="items">
<li><img src="mobile.jpg" class="mobilepo" title="Текст для второго дива с текстом" /><div class="banner">Мобильные приложения</div></li>
<li><img src="internet.jpg" class="internet" title="Текст для второго дива с текстом" /><div class="banner">Интернет Имидж</div></li>
<li><img src="website.jpg" class="website" title="Текст для второго дива с текстом" /><div class="banner">Разработка Сайтов</div></li>
</ul>
<div class="banner_content"></div>
</div>

После этих приготовлений первое что мне бросилось в глаза — пагинация слайдера, вместо круглишков я хотел бы видеть иконки своих изображений. Для этого я полез менять CSS стили. Вот все что я оставил от стиля pagination:

.pagination {
position: absolute;
left: 40%;
bottom: 0px;
overflow: hidden;
}

Каждый див пагинации выводит в background'е изображение через CSS стиль, это удобно в случае изменения изображения в активном и пассивном виде:

.mobilepo {
width: 80px;
height: 80px;
background-image: url("../images/mobile,jpg");
}
li.current .mobilepo {
background-image: url("../images/mobile_active,jpg");
}

На этом этапе иконки в пагинации не будут отображаться, для этого нам нужно внести изменения в скрипт TMS слайдера, чем мы и займемся в следующем этапе.

Редактирование tms.js

Приготовления закончены, теперь начнем править tms.js для решения задач. Первое что я сделал — убрал автоматическое присваивание изображению размера изображения, закомментировав строки 792 и 793:

 width:_.width=img.width(),
height:_.height=img.height(),

Следующее на нашем пути редактирования окажется функция changeFu, которая отвечает за процесс смены слайдов. Где-нибудь в конце это фукнции после _.showFu() вставляем код, который будет менять изображение заднего фона и скрывать текст второго дива с текстом:

$('.back_fon').attr('class','back_'+_.itmsclass[n]) //Меняем главный backgroud на 3ей странице при смене
                        .hide()
                        .fadeIn(_.bannerDuration)
$('.banner_content').hide() // Скрываем контент при смене слайда

Далее двигаемся на функцию afterShow. Назавние фунции само говорит за себя. В ней надо бы изменить одну строку и добавить другую:

_.banner.appendTo(_.me), на _.banner.appendTo(_.pic), //Выведит баннер внутрь дива с изображением при изменении слайда. Возможно это Вам не понадобится, я это сделал для облегчения своей задачи.
$('.banner_content').html(_.itmscontent[_.n]) //Вывод дива с контентом внутрь дива с анимацией изображения при изменении слайда
.hide()
.fadeIn(_.bannerDuration)

Теперь функция parseImgFu, которая отвечает за сбор информации с html кода, который мы предоставили слайдеру. Находим строку в цикле each _.itms[i]=$(this).attr('src') и под нее вставляем две строчки, которые возьмут название классов и текст для второго дива:

_.itmsclass[i]=$(this).attr("class") // Считываем класс class
_.itmscontent[i]=$(this).attr("title") // Считываем описание title

Название функции paginationFu так же говорит само за себя, в ней надо будет подправить код для вывода миниатюр. Находим строку _.pags.append(li.append('<a href="#"></a>')) и заменяем ее на:

_.pags.append(li.append('<a href="#"><div class="+_.itmsclass[n]+"></div></a>')) //Вывод миниатюр изображений

И на последок находим функцию bannersFu, которая выводит текст в див banner. В ней нам нужно найти строку _.bannerShow(_.banner=_.bnnrs[_.show].appendTo(_.me),_) и заменить двумя:

_.bannerShow(_.banner=_.bnnrs[_.show].appendTo(_.pic),_) //Вывод баннера внутрь дива с изображением при инициализации
$('.banner_content').html(_.itmscontent[_.show]) //Вывод дива с контентом внутрь дива с изображением при инициализации

Ну что ж на этом редактирование скрипта окончена, можно сохранить файл и посмотреть что получилось. А получился бардак, который нужно прибрать с помощью CSS стилей для наших дивов.

.banner{
font-size: 40px;
height: inherit;
padding-top: 470px;
}
.banner_content{
font-size: 30px;
position: absolute;
left: 30%;
top: 20px;
}
.pic{
text-align: center;
} .slider_wrapper {
overflow: hidden;
position: relative;
z-index: 0;
width: 100%;
height: 100%; }
.mobilepo {
width: 80px;
height: 80px;
background-image: url("mobile.jpg");
}
li.current .mobilepo {
background-image: url("mobile_active.jpg");
}
.back_mobilepo {
background: url("back_mobile.jpg") no-repeat center center fixed;
}

И так же для стиля internet и website. Пример этого слайдера можно посмотреть на сайте компании 2А Софт

На этом все изменения окончены, можно радоваться проделанной работе и опробовать сие творение. До новых встреч!

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.