Плагин карусели Flexisel

И снова я с вами на связи, на улице отличная погода и настроение, соответственно, аналогичное!) Недавно, для выполнения поставленной задачи потребовался скрипт карусели и я, случайно, наткнулся на один jQuery плагин под названием Flexicel, который мне для данной работы очень помог и подошел.

При изучении документации данного плагина, мне очень понравилось в нем, что он содержит в себе минимум кода и очень прост в использовании. Для его реализации потребуются две библиотеки, немного html кода и стили css. Пока не начали вдаваться в подробности, хочу учесть, что раньше я уже выкладывал подобного рода материалы, на темы: карусель изображений и карусель новостей на jQuery. Кому интересно, посмотрите! - Может что то Вам тоже пригодиться.

Теперь можем перейти к изучению самого плагина, но перед этим хочу немного рассказать о самом разработчике. И так, плагин был разработан неким Яном, который является основателем 9 битной Студии. По жизни он занимается, как сказано из его личной страницы на сайте "обо мне", веб-дизайном и веб разработкой, а также помогает многим пользователям в решении проблем, связанных с веб разработкой. Помимо этого, имеет свой блог и твиттер в котором регулярно публикует и делится своими знаниями. За что ему огромное спасибо, как творческому человеку! Также имеет свои личные темы по WordPress и другие JQuery плагины, чтобы лучше с ними ознакомиться, перейди по ссылке указанной в источниках материала. А тем временем, мы приступим к изучению самого кода плагина карусели Flexicel.

Честно говоря, в данной части мы могли сразу рассмотреть весь код скрипта, но я все же решил разбить его на части. Для начала давайте подключим библиотеку jQuery.min.js и саму библиотеку плагина карусели Flexicel.js, а также не забудем про стили demo.css.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.flexisel.js"></script>
<link type="text/css" rel="stylesheet" href="css/demo.css"> 

Теперь нам нужно в папке img создать две под папки button и carousel. В папке button мы будем хранить наши навигационные элементы, в нашем случае это две стрелки next.png и previous.png. В папке carousel мы храним наши картинки для карусели.

Далее нам потребуется сам HTML код, который будет выводить наши элементы. Для этого прописываем обычные теги списка, в которых будет ссылка с картинкой: ul -> li -> a -> img. 

<ul id="flexisel"> 
    <li><a href="#"><img src="img/carousel/1.jpg"></a></li>
    <li><a href="#"><img src="img/carousel/2.jpg"></a></li>    
    <li><a href="#"><img src="img/carousel/3.jpg"></a></li>     
    <li><a href="#"><img src="img/carousel/4.jpg"></a></li>
</ul>

Примечание! Для тега ul, указываем идентификатор flexicel.

Ну и завершаем наш код, скриптом, который будет выводить нужный нам функционал с параметрами из библиотеки скрипта jquery.flexisel.js. Так как у меня нет параметров, для данного плагина, потому что все идет по умолчанию из библиотеки jquery.flexisel.js, то я просто подключаю функцию карусели flexicel.

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

<script>
$(window).load(function() {
    $("#flexisel").flexisel();
});
</script>

Переходя к CSS стилям, сразу выявлю важное свойство это:

#flexisel {
   display:none;
}

Так как без него работать плагин, корректным образом не будет! А так, в принципе, все по стандарту.

.nbs-flexisel-container {
    position:relative;
    max-width:100%;
}
.nbs-flexisel-ul {
    position:relative;
    width:99999px;
    margin:0px;
    padding:0px;
    list-style-type:none;   
    text-align:center;  
}

.nbs-flexisel-inner {
    overflow:hidden;
    float:left;
    width:100%;
    background:#ffffff;
    border:1px solid #ccc;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;  
}

.nbs-flexisel-item {
    float:left;
    margin:0px;
    padding:0px;
    cursor:pointer;
    position:relative;
    line-height:0px;
}
.nbs-flexisel-item img {
    width: 100%;
    cursor: pointer;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width:100px;
}

/* Кнопки навигации */

.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
    width: 22px;
    height: 22px; 
    position: absolute;
    cursor: pointer;
    z-index: 100;
    opacity: 0.5;
}

.nbs-flexisel-nav-left {
    left: 10px;
    background: url(../img/button/previous.png) no-repeat;
}

.nbs-flexisel-nav-right {
    right: 5px;
    background: url(../img/button/next.png) no-repeat;
}

Надеюсь, данный плагин поможет Вам в работе и придаст удобство и простоту в его использовании. Всех благодарю за внимание, спасибо что нас читаете!) Удачи! Пишите свои комментарии, чего бы Вы хотели увидеть.