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

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

ОБСУЖДЕНИЕ

Карусель изображений Feature Carousel

Карусель изображений «Feature Carousel»
Просмотров: 2961  Скачан: 251 раз  Комментариев в теме: 0

Стильная карусель изображений с подписями для сайта, если быть точнее, то это плагин Feature Carousel, плагин довольно полезен, с его помощью можно выводить ключевые материалы на сайте, в карусели предусмотрено слайд-шоу, навигационная панель, кнопки листания (вправо, влево), а также кнопки (Pause и Start) для остановки слайд-шоу и его запуска.

Стоит отметить тот факт, что данная карусель, рассчитана на работу с изображениями одного размера и позволяет отображать только одну карусель, на одной странице.

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

 

HTML

<div class="carousel-container">    
    <div id="carousel">
        <div class="carousel-feature">
            <a href="#"><img class="carousel-image" alt="Image" src="images/1.jpg"></a>
            <div class="carousel-caption">
                <p>
                    The Elder Scrolls 5 завоевала признание многих игроков, вас ждут новые сюжеты, новые концепции, игровые механики и конечно, технологии.
                </p>
            </div>
        </div>
        <div class="carousel-feature">
            <a href="#"><img class="carousel-image" alt="Image" src="images/2.jpg"></a>
            <div class="carousel-caption">
                <p>
                    Mass Effect это лучшая ролевая игра 2007 года, изначально игра делалась для  Xbox 360 но спустя год вышла и на PC.
                </p>
            </div>
        </div>
        <div class="carousel-feature">
            <a href="#"><img class="carousel-image" alt="Image" src="images/3.jpg"></a>
            <div class="carousel-caption">
                <p>
                    Assassin's Creed вышла в 2007 году, мгновенно заполонив сердца многих геймеров, за тем вышло ещё много частей этой сногсшибательной игры.
                </p>
            </div>
        </div>
        <div class="carousel-feature">
            <a href="#"><img class="carousel-image" alt="Image" src="images/4.jpg"></a>
            <div class="carousel-caption">
                <p>
                    S.T.A.L.K.E.R эта игра в далёком 2007 году, ворвалась в мир игр с грохотом, мгновенно стала шедевром, за тем последовало ещё 2 части этой игры.
                </p>
            </div>
        </div>
        <div class="carousel-feature">
            <a href="#"><img class="carousel-image" alt="Image" src="images/5.jpg"></a>
            <div class="carousel-caption">
                <p>
                    Witcher это превосходная RPG игра которая завоевала множество наград, игра повествует историю о известном Ведьмаке и его приключениях.
                </p>
            </div>
        </div>
    </div> 
    <div id="but_pause"><img src="images/style/pause.png" title="PAUSE" /></div>
    <div id="but_start"><img src="images/style/play.png" title="START" /></div>
    <div id="carousel-left"><img src="images/style/arrow-left.png" title="LEFT" /></div>
    <div id="carousel-right"><img src="images/style/arrow-right.png" title="RIGHT" /></div>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery 1.8.2.js"></script>
<script type="text/javascript" src="js/featureCarousel.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var carousel = $("#carousel").featureCarousel({
        });
        $("#but_pause").click(function () {
            carousel.pause();
        });
        $("#but_start").click(function () {
            carousel.start();
        });
    });
</script>
Материалы по теме:

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью J...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Rotator на css и jQueryRotator на css и jQuery

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

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...
Интересные публикации:

Горизонтальное мульти менюГоризонтальное мульти меню

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

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......

Free MusicFree Music

Отличный html шаблон музыкального портала, сделанный по современным стандартам, в шаблоне уже встроенный проигрыватель аудио и видео файлов......

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....
  • Текущий 1.14/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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