carouFredSel – лучшая jQuery карусель

carouFredSel – достаточно мощный и простой плагин, позволяющий создавать различного рода карусели с обширным функционалом. Именно carouFredSel я использую уже продолжительное время в большинстве своих проектов. Конечно, кто-то может поспорить и предложить альтернативу данному плагину, но я на 100% уверен что ни один из них не сможет сделать то, что делает carouFredSel.

Преимущества

Чем же так хорош плагин carouFredSel? Ниже я перечислю основные преимущества carouFredSel:

  1. Бесплатный;
  2. Существует в виде плагина для WP. За плагин некоторым придется раскошелиться, но знающие разработчики найдут бесплатную версию тут — http://www.nulled.cc/;
  3. Простой;
  4. Отсутствие багов. (В отличие от iosslider или jCarousel где баг на баге сидит);
  5. Огромное количество настроек (http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced);
  6. Подробная документация (http://docs.dev7studios.com/jquery-plugins/caroufredsel);
  7. Большое количество готовых примеров с использованием данного плагина (http://coolcarousels.frebsite.nl/);
  8. Адаптивность, поддержка touch и scroll событий.

Список можно продолжать и дальше, но на мой взгляд остальные преимущества плагина carouFredSel раскрываются в зависимости от требований к карусели в разрабатываемом проекте и ее конечной сложности.

Создание простой карусели

Для начала скачиваем плагин с githubhttps://github.com/gilbitron/carouFredSel. После загрузки переносим файл jquery.carouFredSel-*.js в удобное место и подключаем на странице. 

<script src="jquery.carouFredSel-*.js"></script>

 Для работы плагина необходимо подключить библиотеку jQuery! После подключения плагина необходимо задать разметку карусели.

Например:

<ul class=”caro-slider”>
  <li><img src=”path/some-img-1.jpg” alt=””></li>
  <li><img src=”path/some-img-2.jpg” alt=””></li>
  <li><img src=”path/some-img-3.jpg” alt=””></li>
  <li><img src=”path/some-img-4.jpg” alt=””></li>
</ul>

Добавить небольшой CSS код:

.caro-slider li {
  float: left;
  width: 228px;
  height: 228px;
  margin: 10px;
}

И наконец добавим несколько строчек JS:

$(document).ready(function() {
  $('.caro-slider').carouFredSel();
});

На этом все! Самая простая карусель готова. Если нужно добавить какой-либо функционал в карусель, переходите по ссылке http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced и читайте документацию.

Если необходимо добавить поддержку touch и scroll событий для карусели, подключаем соответствующие библиотеки из папки helper-plugins.

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

UPD:

По состоянию на 13.03.2017 — все ссылки/сайты плагина js/wp закрыты и перенаправляют на другие домены и 404 ошибки — вероятно, это означает полную смерть плагина, но возможно со временем ситуация по меняется.

Подписаться на новые статьи