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

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

ОБСУЖДЕНИЕ

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

Адаптивная карусель
Просмотров: 8578  Скачан: 543 раз  Комментариев в теме: 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, в слайдере вы множите полноценно использовать текст, изображения....

Navigation SlaiderNavigation Slaider

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Выпадающее меню в темном стиле, реализованное полностью на css...

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......

EbuyEbuy

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

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

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

The SameThe Same

Шикарный профессиональный html шаблон имеющий два стиля (светлый и тёмный), на главной странице используется стильный слайдер......
  • Текущий 1.78/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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