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

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

ОБСУЖДЕНИЕ

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

Карусель изображений «Feature Carousel»
Просмотров: 3109  Скачан: 262 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Rotator на css и jQueryRotator на css и jQuery

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

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

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

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

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

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

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

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

Web StoreWeb Store

Шаблон интернет магазина Web Store, в шаблоне имеется готовое решение для корзины, детального просмотра товара и каталога,...

Контактная форма (дизайн)Контактная форма (дизайн)

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

Exterior DesignExterior Design

Неплохой html шаблон с готовым набором страниц, на главной странице расположено два слайдера, имеется портфолио, контактная форма......

Скрипт комментариев на PHPСкрипт комментариев на PHP

Скрипт комментариев написанный на php и работает в связке с MYSQL....

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с помощ...

Красивое горизонтальное меню, используется изображения и анимация текста....

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

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

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....
  • Текущий 1.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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