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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......
Интересные публикации:

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

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

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

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

ChromeGTChromeGT

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

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

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

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


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