Текстовый слайдер jQuery

Да, это не совсем обычно, но все же встречается. Часто таким текстовым слайдером выводятся, например, отзывы о каком-то продукте или какие-то случайные фразы. Применений много, все зависит от Ваших нужд и фантазии.

Предлагаю не очень сложный способ, как сделать текстовый слайдер с помощью jQuery. Чтобы это сделать, Вам понадобится сделать несколько шагов. Давайте же приступим к выполнению поставленной задачи.

HTML - разметка

Как обычно, сначала надо добавить html

<div id="text_slide1">Содержимое текстового блока №1</div>
<div id="text_slide2">Содержимое текстового блока №2</div>
<div id="text_slide3">Содержимое текстового блока №3</div>
<div id="text_slide4">Содержимое текстового блока №4</div>
<div id="text_slide5">Содержимое текстового блока №5</div>

Каждому блоку нужно присвоить свой id. Это должно быть название text_slide и в конце цифра по порядку. По примеру видно как именно. Это очень Важно, потому как в скрипте jQuery, от этого будет зависеть правильность работы.

Так что, при добавлении новых слайдов или удалении лишних, обратите внимание, чтобы все было по порядку!

jQuery - скрипт

В шапку перед закрывающимся head или в подвал перед закрывающимсяbody, нужно сначала подключить jQuery библиотеку, если ее еще там нет

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Потом, после нее подключить уже сам скрипт текстового слайдера.

<script type="text/javascript">  
var text_slide_cur=0;
function showtext_slide(){
	$('#text_slide'+(text_slide_cur+1)).css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000);
	setTimeout(hidetext_slide, 3000);
}
function hidetext_slide(){
	$('#text_slide'+(text_slide_cur+1)).css({opacity: 1}).animate({opacity: 0,left: "-50px"}, 1000,function(){showtext_slide();});
	text_slide_cur=(text_slide_cur+1)%5;
}
$(document).ready(function() {
	showtext_slide();
})
</script> 

Скрипт работает следующим образом. Изначально блок прозрачный, потом от стает видимым и сдвигается вправо на 50 пикселей. Происходит это за 1 секунду. В скрипте это значение - 1000, что равно 1000 миллисекундам. Если Вам надо быстрее или медленнее, то просто поменяйте его.

После совершения появления текст видно в течении 3 секунд, значение 3000 в скрипте, что равно 3000 миллисекунд, тоже можете менять, если нужно чтобы блок дольше задерживался или наоборот быстрее исчез.

Когда время кончится, совершиться обратный процесс. Блок начнет становится невидимым и сдвигаться влево еще на -50 пикселей. Все это вновь за 1000 миллисекунд, так что тоже меняйте на нужное значение, как и с появлением.

Как и говорил раньше, скрипт берет текст с id, в нашем случаи - text_slide и присваивает ему номер по порядку, благодаря чему и осуществляется анимация. Если Вы будете добавлять или уменьшать количество слайдов, то нужно в строке text_slide_cur=(text_slide_cur+1)%5; - 5 заменить на нужное число, которое соответствует количеству слайдов.

CSS - стили

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

#text_slide1, #text_slide2, #text_slide3, #text_slide4, #text_slide5{
	position: absolute;
	left: 0px;
    opacity:0;
}

Тут тоже важно обратить внимание, что если будете добавлять или убирать лишние слайды, то в стилях через запятую укажите или удалите id. Настроить и добавить можете что хотите, все зависит от того, каким Вы хотите видеть слайдер. Думаю, если знакомы с СSS, то это не составит труда для Вас.

В принципе и все, если сделаете правильно, то новый текстовый слайдер будет радовать Вас и посетителей Вашего сайта.

Вы используете текстовый слайдер на своем сайте и в каких целях?

На этом все, спасибо за внимание. 🙂