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

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

ОБСУЖДЕНИЕ

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

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

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

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

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jqu...

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

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

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

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

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

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....
Интересные публикации:

Стильная форма пошаговой установкиСтильная форма пошаговой установки

Это комплект пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей....

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изображе...

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

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

Sooshal v2.4Sooshal v2.4

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

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

Кнопка с анимацией на css3Кнопка с анимацией на css3

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

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

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....
  • Текущий 1.14/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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