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

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

ОБСУЖДЕНИЕ

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

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

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

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

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

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

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

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде с...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

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

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

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

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

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

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

Black and WhiteBlack and White

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

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

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансформации

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

ZeniZeni

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

KroftKroft

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

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

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

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....
  • Текущий 1.88/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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