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

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

ОБСУЖДЕНИЕ

Адаптивная карусель изображений

Адаптивная карусель
Просмотров: 7207  Скачан: 470 раз  Комментариев в теме: 0

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

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

Посмотреть работу карусели более детально, можете в ДЕМО или скачав исходники, когда будете просматривать, измените размер окна в браузере. Адаптивная карусель может быть горизонтальной, вертикальной и фиксированной.

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

 

HTML

<div class="demo-1">
    <ul id="carousel" class="elastislide-list">
        <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
        <li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
        <li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
        <li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
        <li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
        <li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
        <li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
        <li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
        <li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
        <li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
        <li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
        <li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
        <li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
        <li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
        <li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
        <li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
        <li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
        <li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
        <li><a href="#"><img src="images/21.jpg" alt="image21" /></a></li>
        <li><a href="#"><img src="images/22.jpg" alt="image22" /></a></li>
        <li><a href="#"><img src="images/23.jpg" alt="image23" /></a></li>
    </ul>
</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/modern.custom.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript">
    $( '#carousel' ).elastislide( {
        easing : 'ease-in-out',
        orientation : 'horizontal',
        speed : 500,
        minItems : 5,
        start : 0,
    } );
</script>
Материалы по теме:

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

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

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

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

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

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

Скроллер картинокСкроллер картинок

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

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

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

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

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

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....
Интересные публикации:

Lotus Flower v1.2Lotus Flower v1.2

Lotus Flower - это современный универсальный шаблон для WordPress с адаптивной вёрсткой и большим функционалом....

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Облако теговОблако тегов на css

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

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

WebDesignWebDesign

Стильный шаблон построенный на HTML5, в шапке располагается слайдер, по всей ширине страницы, есть портфолио......

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....
  • Текущий 1.78/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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