Пошаговый слайдер с строкой прогресса

Віталий

10 років ago

Доброго времени суток. 🙂

Недавно я уже писал статьи о разных слайдерах, но сегодня хочу показать еще один. Он мне понравился своей необычностью и простотой. У него нет автопрокрутки, автослайда, нужно вручную перелистывать, но это не помеха, а скорее плюс в его универсальности. Его структура необычна, благодаря чему, его можно использовать как табы (вкладки) или закладки, как кому удобнее. Он перелистывает не только изображения, все что угодно. Также в нем есть полоса прогресса, которая показывает, какая закладка, табы(вкладки) или слайд активен.

В примере нажимайте на Шаги и увидите перелистывание.

Как видите в примере, переключение осуществляется с легкой анимацией. Как и писал выше слайдер очень похож на панель вкладок. Чтобы его установить себе на сайт, нужно выполнить всего три легких шага.

Первый шаг

Сначала нужно добавить HTML-разметку.

<div class="tabslide">
<div class="tabs">
      <span class="tab" data-id="1">Шаг 1</span>
      <span class="tab" data-id="2">Шаг 2</span>
      <span class="tab" data-id="3">Шаг 3</span>
      <span class="tab" data-id="4">Шаг 4</span>
</div>
    <div class="pointer"><div id="pointer"></div></div>
    <div class="slider">
        <div id="slider">
        <div>
		<h1>Заголовок текстового блока №1</h1>
			Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
		</div>
        <div>
		<h1>Заголовок текстового блока №2</h1>
			Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
		</div>
        <div>
		<h1>Заголовок текстового блока №3</h1>
			Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
		</div>
        <div>
		<h1>Заголовок текстового блока №4</h1>
			Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
		</div>
    </div>
    </div>
</div>

По коду видно, что у нас есть родительский div - tabslide. Внутри него еще три блока. Первый это табы(вкладки, закладки). Второй строка прогресса. И третий, внутри которого располагаются блоки, слайды.

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

<span class="tab" data-id="5">Шаг 5</span>

Также добавьте еще один блок, слайд внутри div - slider^

<div>
<h1>Заголовок текстового блока №5</h1>
	Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
</div>

Чтобы это заработало, потом еще нужно будет настроить стили.

Второй шаг

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

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

После этого добавьте уже сам скрипт, который и будет совершать анимацию.

<script type="text/javascript">  
$('.tab').click(function(){
    var id = $(this).attr('data-id') - 1;
    var count = $('.tabs').children('.tab').length;
    var tab_width = $(this).width();
    var slider_width = $('#slider').width();
    
    $('#pointer').stop().animate({'left':(id*tab_width)+'px'});
    $('#slider').stop().animate({'left':-(id*slider_width)+'px'});
});
</script>

Третий шаг

Напоследок нужно добавить CSS стилей.

.tabslide{
    width:80%;
    margin: 0 auto;
    margin-top: 20px;
  padding: 0;
}
.tab{
    display:inline-block;
    width:24%;
    cursor:pointer;
    padding: 0;
}
.pointer{
    position:relative;
    height:5px;
    background:#bbb;
    width:95%;
}
#pointer{
    position:relative;
    left:0px;
    width:24%;
    height:100%;
    background:#0fa5d9;
}
.slider{
    width:100%;
    overflow:hidden;
    position:relative;
    padding-top: 10px;
}
#slider{
    position:relative;
    left:0px;   
    white-space:nowrap;
}
#slider>div{
    display:inline-block;
    width:100%;
}

Настраивать, как обычно, можете все под себя. Как писал выше, для того чтобы добавить или уменьшить количество вкладок, нужно внести некоторые настройки в стили.

.tab - класс отвечающий за настройку вкладок. Тут есть параметр - width:24%. Это означает, что от общей длины в 100%, каждая из вкладок составит длину 24%. То есть в ряд поместится 4 вкладки. Если вы добавили 5 вкладку, то длина каждой из них будет 100%/5=20%. 1% оставляем на отступ, в итоге останется - 19%. Думаю математику знаете так что разберетесь.
#pointer - это длина синей полоски прогресса. Она должна равняться длине вкладок, чтобы все красиво выглядело.

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

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

Exit mobile version