RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

Слайдер на css3 и jqueryСлайдер на css3 и jquery

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

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

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

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

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

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

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

Rotator на css и jQueryRotator на css и jQuery

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

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

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

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...
Интересные публикации:

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на css +30...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню на css

Горизонтальное многоуровневое фиксированного меню в темном стиле...

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery «Elas...

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

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

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......
  • Текущий 1.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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