carouFredSel – достаточно мощный и простой плагин, позволяющий создавать различного рода карусели с обширным функционалом. Именно carouFredSel я использую уже продолжительное время в большинстве своих проектов. Конечно, кто-то может поспорить и предложить альтернативу данному плагину, но я на 100% уверен что ни один из них не сможет сделать то, что делает carouFredSel.
Преимущества
Чем же так хорош плагин carouFredSel? Ниже я перечислю основные преимущества carouFredSel:
- Бесплатный;
- Существует в виде плагина для WP. За плагин некоторым придется раскошелиться, но знающие разработчики найдут бесплатную версию тут — http://www.nulled.cc/;
- Простой;
- Отсутствие багов. (В отличие от iosslider или jCarousel где баг на баге сидит);
- Огромное количество настроек (http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced);
- Подробная документация (http://docs.dev7studios.com/jquery-plugins/caroufredsel);
- Большое количество готовых примеров с использованием данного плагина (http://coolcarousels.frebsite.nl/);
- Адаптивность, поддержка touch и scroll событий.
Список можно продолжать и дальше, но на мой взгляд остальные преимущества плагина carouFredSel раскрываются в зависимости от требований к карусели в разрабатываемом проекте и ее конечной сложности.
Создание простой карусели
Для начала скачиваем плагин с github — https://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 ошибки — вероятно, это означает полную смерть плагина, но возможно со временем ситуация по меняется.