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

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

ОБСУЖДЕНИЕ

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

Карусель изображений «Feature Carousel»
Просмотров: 3448  Скачан: 282 раз  Комментариев в теме: 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Слайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

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

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

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

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

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

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

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

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

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

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....
Интересные публикации:

Радиоактивные кнопкиРадиоактивные кнопки

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

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фоном

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Boxes M...

Меню в виде куба с красивым эффектом трансформации....

Шаблон Desire Night ClubШаблон Desire Night Club

HTML шаблон ночного клуба, на главной странице располагается привлекательный слайдер, есть галерея, видео проигрыватель, заготовлена контактная форма ...
  • Текущий 1.11/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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