05 авг 2012
Slidorion - слайдер и аккордеон в одном
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Slidorion - слайдер и аккордеон в одном

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Slidorion - слайдер и аккордеон в одном

Slidorion совмещает в себе и слайдер изображений и аккордеон из описания к ним.


Разметка HTML
Для первого слайдера в Демо, структура будет такой
    <div id="slidorion">
        
        <div id="slider">
            <div class="slider-image" rel="section1">
                <img src="img/ice-age-continental-drift.jpg" width="488" height="400" />
            </div>
            <div class="slider-image" rel="section2">
                <img src="img/puss-in-boots.jpg" width="488" height="400" />
            </div>
            <div class="slider-image" rel="section3">
                <img src="img/madagascar_3.jpg" width="488" height="400" />
            </div>
        </div>
        
        <div id="accordion">
            <div class="header"><a class="slider-link" rel="section1">Ледниковый период 4</a></div>
            <div class="content">
                <p><b>Континентальный дрифт</b>

                Действие развернется в наши дни, где выставленные в палеонтологическом музее Мэнни, Сид, Диего, Элли, Скрат и Персик окажутся случайно размороженными.


                5 июля в России</p>
                <a href="#">Читать далее</a>
            </div>
            <div class="header"><a class="slider-link" rel="section2">Кот в сапогах</a></div>
            <div class="content">
                <p>Мечи пересекутся и сердца будут разбиты в приключениях с одним из самых любимых персонажей из Шрэка — котом в сапогах. Это удалая поездка ранних лет кота в сапогах, когда он объединяется с умным Шалтай-Болтаем и сообразительной Кисой, чтобы украсть знаменитую Гусыню, несущую золотые яйца.


                27 октября 2011 в России</p>
                <a href="#">Читать далее</a>
            </div>
            <div class="header"><a class="slider-link" rel="section3">Мадагаскар 3</a></div>
            <div class="content">
                <p>Лев Алекс, зебра Марти, жираф Мелман и бегемот Глория присоединяются к бродячему цирку, в надежде вернуться в Нью-Йорк.


                7 июня 2012 в России</p>
                <a href="#">Читать далее</a>
            </div>
        </div>
        
    </div>

CSS
Стили страницы и самого плагина в файлах:
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/slidorion.css" />

javascript
Подключаем jQuery, easing для эффектов и сам slidorion:
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/jquery.easing.js"></script>
    <script src="js/jquery.slidorion.js"></script>

Вызываем плагин (сразу два варианта, как в демо):
    $(document).ready(function() {
        $('#slidorion').slidorion({
            hoverPause: true,
            interval: 2500,
            speed: 500,
            effect: 'fade'
        });
        $('#slidorion1').slidorion({
            interval: 4000,
            speed: 1000,
            effect: 'overLeft'
        });
    });

Опции
- autoPlay - Автоматическая смена слайдов (логическая переменная)
- easing - Эффект перехода анимации (строка)
- effect - Эффект смены слайдов (строка)
- first - Первый слайд для показа (атрибут rel данного слайда) (строка)
- hoverPause - Пауза при наведении курсора мыши (логическая переменная)
- interval - Задержка перед сменой слайдов (число)
- speed - Скорость анимации (число)


Внимание! У вас нет прав для просмотра скрытого текста.










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.