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

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

ОБСУЖДЕНИЕ

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

Адаптивная карусель
Просмотров: 7793  Скачан: 501 раз  Комментариев в теме: 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>
Материалы по теме:

Kenburner слайдерKenburner слайдер

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

Слайдер картинок на JqueryСлайдер картинок на Jquery

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

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Круговой слайдерКруговой слайдер css3

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

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

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

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

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

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

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

Шаблон Dual FlowШаблон Dual Flow

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть галерея, выпадающее меню, форма обратной связи с Google Maps......

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Контактная форма (дизайн)Контактная форма (дизайн)

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

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

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....

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

Меню с выпадающими пунктами на css

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....
  • Текущий 1.78/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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