Адаптивный слайдер jcarousel

Создадим слайдер, который бы адаптировался под разные устройства. Используем для этого jquery плагин jcarousel.

  1. Скачаем плагин http://sorgalla.com/jcarousel/dist/ и подключим у себя на странице.
  2. Добавим стили с помощью less
    // jCarousel
    // -------------------
    .jcarousel-wrapper {
        position: relative;
    }
    .jcarousel {
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    
    .jcarousel ul {
        position: relative;
        width: 200%;
        list-style: none;
        margin: 0;
        padding: 0;
    
        @media (max-width: @screen-sm-max) {
            width: 300%;
        }
        @media (max-width: @screen-xs-max) {
            width: 600%;
        }
    }
    .jcarousel-control-prev,
    .jcarousel-control-next {
    position: absolute;
    
        &, &:hover {
            font-size: 60px;
            line-height: 86px;
            text-decoration: none !important;
        }
    
        top: 50%;
        margin-top: -38px;
    }
    .jcarousel-control-prev {
        left: -10px;
    }
    .jcarousel-control-next {
        right:-10px;
    }
    
  3. Добавим js код
    $(function(){
    
        $('[data-jcarousel]').each(function () {
            var el = $(this);
            el.jcarousel(el.data());
        });
    
        $('[data-jcarousel-control]').each(function () {
            var el = $(this);
            el.jcarouselControl(el.data());
        });
    });
    
  4. Добавим разметку
    <div class="jcarousel-wrapper clearfix">
        <div data-jcarousel="true" data-wrap="circular" class="jcarousel">
            <ul class="clearfix">
            @for (var i = 0; i < 6; i++)
            {
                <li class="col-xs-2">
                    <img src="image-@(i).jpg" />
                </li>
            }
            </ul>
        </div>
        <a data-jcarousel-control="true" data-target="-=1" href="#" class="jcarousel-control-prev">&lsaquo;</a>
        <a data-jcarousel-control="true" data-target="+=1" href="#" class="jcarousel-control-next">&rsaquo;</a>
    </div>
    

Вот и все! Другие примеры можно посмотреть на сайте http://sorgalla.com/jcarousel/examples/

По теме:
Внедряем js модуль в query plugin

Например написан модуль SelectControl по принципу amd : define("SelectControl", ["jquery"/* TODO uncomment: , "addJqueryPlugin" */], function($) { function SelectControl() { this.init.apply(this, Read more

Soap вызов, используя jquery.ajax

Иногда не хочется делать запрос с клиента на свой сервер, который в свою очередь, используя soap клиент, делает запрос еще на Read more

Реализуем менеджер картинок в редакторе tinymce

На официальном сайте tinymce предлагают подключить файловый менеджер MoxieManager. Но этот менеджер вовсе не бесплатный. Реализуем свой менеджер для картинок. Покажем кнопку Read more

Работаем с JQuery Deferred

В JQuery есть такой удобный объект — Deferred, который позволяет выполнять отложенные действия в зависимости от состояния, которое нужно установить Read more

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *