background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Слайдер с навигацией

Слайдер с навигацией
Просмотров: 1141  Скачан: 206 раз  Комментариев в теме: 0

Простой слайдер с навигацией на jquery. В сладере используется меню которое находиться с левой стороны, также вы можете задать текст, который будет плавно появляться в нижней части слайдера, при переходе по пунктам.

Шаг 1 - создание разметки

 

HTML

<div id="wrapper-content">
    <div id="side-nav" class="mobile-remove">
        <div class="row-24 section-1 nav">
            <a id="section-1" class="section"><span>LivePipe</span></a>
        </div>
        <div class="row-24 section-2 nav remove-right-border">
            <a id="section-2" class="section"><span>Echo</span></a>
        </div>
        <div class="row-24 section-3 nav remove-right-border">
            <a id="section-3" class="section"><span>Ajax.org</span></a>
        </div>
        <div class="row-24 section-4 nav remove-right-border">
            <a id="section-4" class="section"><span>Spry</span></a>
        </div>
        <div class="row-24 section-5 nav remove-right-border">
            <a id="section-5" class="section"><span>QooxDoo</span></a>
        </div>
        <div class="row-24 section-6 nav remove-right-border">
            <a id="section-6" class="section"><span>jQuery Tools</span></a>
        </div>
    </div>
    <div id="main-container">
    <div class="overlay">Default: here is the overlay text</div>
        <div id="main-container-background">
            <div class="row-273 s1 mobile-public">
                <a href="#"><img src="images/1.png"></a>
            </div>
            <div class="row-273 s2 mobile-public">
                <a href="#"><img src="images/2.png"></a>
            </div>
            <div class="row-273 s3 mobile-public">
                <a href="#"><img src="images/3.png"></a>
            </div>
            <div class="row-273 s4 mobile-public">
                <a href="#"><img src="images/4.png"></a>
            </div>
            <div class="row-273 s5 mobile-public">
                <a href="#"><img src="images/5.png"></a>
            </div>
            <div class="row-273 s6 mobile-public">
                <a href="#"><img src="images/6.png"></a>
            </div>
        </div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script&
<script type="text/javascript">
$(function() {
    $('#main-container-background a[name]').removeAttr("name");
    $('#main-container').css('overflow', 'hidden');
    $('#side-nav').css('visibility', 'visible');
    $('#side-nav a').live
    ('click', function() {
        $(this).parent().removeClass('remove-right-border');
        $(this).parent().siblings().addClass('remove-right-border');
        //Коментарий к картинке
        var overlay = new Array(
            "LivePipe: here is the overlay text",
            "Echo: here is the overlay text",
            "Ajax.org: here is the overlay text",
            "Spry: here is the overlay text",
            "QooxDoo: here is the overlay text",
            "jQuery Tools: here is the overlay text");
        //Цвет коментария к картинке
        var color= new Array(
            "#ff0d4c",
            "#0d13ff",
            "#0dff18",
            "#fff10d",
            "#0dcfff",
            "#ff0deb");
        var index = $('#side-nav a').index(this);
        $("#main-container-background").animate({ top: index * -307 }, 'slow');
        $(".overlay").hide().css("background-color", color[index]).text(overlay[index]).fadeIn(1500);
    });
});
</script>
Материалы по теме:

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid ac...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

Круговой слайдерКруговой слайдер css3

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

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....
Интересные публикации:

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

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

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat Forms ...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 6 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить