Coda-Slider 2.0 - плагин слайдер вкладок

Пример 1: настройки по умолчанию

Панель 1

Тауматауакатангиангакоауауотаматеатурипука-капикимаунгахоронукупокануэнуакитанатаху (Taumatawhakatangihangakoauauotamateaturi-pukakapikimaungahoronukupokaiwhenuakitanatahu) — такое необычное название имеет невысокая гора на Северном острове. Кстати, это один из самых длинных топонимов в мире.

Панель 2

Самый крупный существующий в настоящий момент платиновый самородок хранится в Алмазном фонде Московского Кремля. Этот самородок весом 7 кг 860,5 г называют «Уральский гигант». В XVII веке в Южной Америке платину считали «поддельным серебром». Однажды запасы платины для предотвращения фальшивомонетничества утопили в океане.

Панель 3

Интересный факт, в начальной школе Исаак Ньютон учился весьма посредственно. До ровно до тех пор, пока его не избил и не оскорбил лучший ученик в классе, нанеся Ньютону моральную травму. Однако после этого все успехи Ньютона в учебе были блестящи.
А вот ещё интересный случай из жизни знаменитого физика. Исаак Ньютон, как известно был членом палаты лордов. Заседания палаты лордов Ньютон посещал самым регулярным образом. Однако, на протяжении многих лет Ньютон не проронил ни слова на заседаниях. Все замерли когда, наконец, великий человек вдруг попросил слова. Все ожидали грандиозной и умной речи от признанного. Но Ньютон в гробовой тишине провозгласил свою единственную речь в парламенте: «Господа, я прошу закрыть окно, иначе я могу простудиться!»
В последние годы своей жизни Исаак Ньютон серьёзно взялся за богословие и под большим секретом писал собственную книгу, о которой высказывался, как о самом великом и важном своем труде. Он считал, что этот труд должен решительным образом изменить жизнь людей. Кто знает, какой бы была эта книга, но по вине любимой собаки Ньютона, которая опрокинула лампу, случился пожар. В результате кроме самого дома и всего имущества Ньютона сгорела великая рукопись. Вот вам и булгаковское-воландовское: «Рукописи не горят!» Горят, еще как горят! Это было незадолго до смерти великого ученого…

Панель 4

Знаете ли вы, что еще в XV—XVI веках индейцы культуры Чонос (Эквадор) выплавляли медь с содержанием 99,5 %. Из меди они изготавливали монеты в виде топориков 2 мм по сторонам и 0,5 мм толщиной. Данная монета имела хождение по всему западному побережью Южной Америки, и в том числе в государстве Инков. В Японии медным трубопроводам для газа в зданиях присвоен статус «сейсмостойких».

Выше указанный слайдер инициализируется в <head> вот так:

    	$().ready(function() {
            $('#coda-slider-1').codaSlider();
        });

Пример 2: Автоматическая смена слайдов

Панель 1

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

Панель 2

Панель 3

Панель 4

Выше указанный слайдер инициализируется в <head> вот так:

    	$().ready(function() {
            $('#coda-slider-2').codaSlider({
                autoSlide: true,
                autoSlideInterval: 4000,
                autoSlideStopWhenClicked: true
            });
        });

Пример 3: Cross Linking

Первый набор ссылок управляет первым слайдером ниже. Второй набор ссылок управляет вторым слайдером. Обратите внимание, что хэш URL изменяется за каждый клик. Это позволяет создавать ссылку на определенную панель с других страниц (но помните, что каждый слайдер с включенным cross linking будет также загружен в той же панели).

Кросс-линкинг для первого слайдера: Панель 1 | Панель 2 | Панель 3
Кросс-линкинг для второго слайдера: Панель 1 | Панель 2 | Панель 3

Панель 1

Этот слайдер управляется первым набором ссылок выше.

Панель 2

Этот слайдер управляется первым набором ссылок выше.

Панель 3

Этот слайдер управляется первым набором ссылок выше.

Панель 1

Этот слайдер управляется вторым набором ссылок выше.

Панель 2

Этот слайдер управляется вторым набором ссылок выше.

Панель 3

Этот слайдер управляется вторым набором ссылок выше.

Каждая кросс-ссылка должна иметь соответсвующий класс и rel атрибут. Класс должен быть "xtrig" по умолчанию, но вы можете указать другое название через настройки. Значение rel должно соответсвовать id целового слайдера. Например:

    	Панель 1

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

Пример 4: произвольное расположение вкладок и стрелок

Можно самим задать расположение навигационных элементов, поместив их в любое место на странице. В примере ниже, стрелки расположены слева и справа от вкладок.

Панель 1
Панель 2
Панель 3
Панель 4

Панель 1

Панель 2

Панель 3

Панель 4

Выше указанный слайдер инициализируется в <head> вот так:

    	$().ready(function() {
            $('#coda-slider-5').codaSlider({
                dynamicArrows: false,
                dynamicTabs: false
            });
        });

А вот разметка HTML для выше приведенного слайдера. Секция подсвечена там, где стрелки жестко прикручены в определенном месте страницы.

    	<div class="coda-slider-wrapper">

        	<div id="coda-nav-left-5" class="coda-nav-left"><a href="#" title="Slide left">&#171;</a></div>
            <div id="coda-nav-5" class="coda-nav">

            	<ul>
                	<li class="tab1"><a href="#1">Панель 1</a></li>
                    <li class="tab2"><a href="#2">Панель 2</a></li>

                    <li class="tab3"><a href="#3">Панель 3</a></li>
                    <li class="tab4"><a href="#4">Панель 4</a></li>

                </ul>
            </div>
            <div id="coda-nav-right-5" class="coda-nav-right"><a href="#" title="Slide right">&#187;</a></div>

            <div class="coda-slider preload" id="coda-slider-5">
            	<div class="panel">
                	<div class="panel-wrapper">
                    	<h2 class="title">Панель 1</h2>

                        <p>Какое-то содержимое панели...</p>
                 	</div>
                </div>
                <div class="panel">
                  	<div class="panel-wrapper">

                        <h2 class="title">Панель 2</h2>
                        <p>Какое-то содержимое панели...</p>
                    </div>
                </div>

                <div class="panel">
                	<div class="panel-wrapper">
                    	<h2 class="title">Панель 3</h2>
                        <p>Какое-то содержимое панели....</p>

                    </div>
                </div>
                <div class="panel">
                	<div class="panel-wrapper">
                    	<h2 class="title">Панель 4</h2>

                        <p>Какое-то содержимое панели...</p>
                    </div>
                </div>
            </div><!-- .coda-slider -->
        </div><!-- .coda-slider-wrapper -->

По мере необходимости используйте соответсвующие CSS для оформления навигации.

Пример 5: первая для загрузки панель

Панель 1

Панель 2

Панель 3

Эта панль загружается первой.

Панель 4

Панель 5

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

Выше указанный слайдер инициализируется в <head> вот так:

    	$().ready(function() {
            $('#coda-slider-6').codaSlider({
                crossLinking: false,
                firstPanelToLoad: 3
            });
        });

Обратите внимание, что cross-linking отключен.

Пример 6: Подправленные скорость и эффекты перехода

Панель 1

Этот слайдер быстрый.

Панель 2

Этот слайдер быстрый.

Панель 3

Этот слайдер быстрый.

Панель 4

Этот слайдер быстрый.

Выше указанный слайдер инициализируется в <head> вот так:

    	$().ready(function() {
            $('#coda-slider-7').codaSlider({
                autoHeightEaseDuration: 300,
                autoHeightEaseFunction: "easeInBounce",
                slideEaseDuration: 300,
                slideEaseFunction: "easeInBounce"
            });
        });

Панель 1

Этот слайдер медленный.

Панель 2

Этот слайдер медленный.

Панель 3

Этот слайдер медленный.

Панель 4

Этот слайдер медленный.

Выше указанный слайдер инициализируется в <head> вот так:

    	$().ready(function() {
            $('#coda-slider-8').codaSlider({
                autoHeightEaseDuration: 2500,
                autoHeightEaseFunction: "easeInOutElastic",
                slideEaseDuration: 2500,
                slideEaseFunction: "easeInOutElastic"
            });
        });

Пример 7: Видео внутри слайдера.

Панель 1

Панель 2

Панель 3

Панель 4

Выше указанный слайдер инициализируется в <head> вот так:

    	$().ready(function() {
            $('#coda-slider-9').codaSlider({
                dynamicArrows: false
            });
        });

Следующий HTML код используется для встраивания видео YouTube в панель (обратите внимание на дополнительную оболочку div):

    	<div class="panel">
        	<div class="panel-wrapper">

            	<h2 class="title">Panel 3</h2>
                <div style="height:350px;"><!-- Дополнительный div помогает установить правильную высоту, когда видео панель имеет кросс-ссылку -->
                	<object type="application/x-shockwave-flash" style="width:425px; height:350px;" data="http://www.youtube.com/v/zlfKdbWwruY">

                    	<param name="movie" value="http://www.youtube.com/v/zlfKdbWwruY" />
                        <param name="wmode" value="transparent" />

                    </object>
                </div>
            </div>
        </div>

Дополнительный стиль используется для установки ширины сладера и для скрытия заголовков панели:

        #coda-slider-9, #coda-slider-9 .panel { width: 465px }
        #coda-slider-9 h2.title { display: none }