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 в удобное место и подключаем на странице. 

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

Например:

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

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

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

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

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

UPD:

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

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

  • annablk

    Можете помочь с настройками?
    Плагин использую для вывода новостей. Все работает как я хочу на телефоне с разрешением 480 на 854 (леново), но на iphone 6 выводит 2 новости вместо одной.
    Настройки использую такие:

    responsive : true,
    height : «auto»,
    items:
    {
    width: 451,
    visible:
    {
    min: 1,
    max: 3
    }
    },
    scroll : {
    items:
    {
    visible:1
    },
    easing : «quadratic»,
    duration : 700
    },
    …..

    • А вам надо что бы выводилось везде по одной?

      • annablk

        на пк и планшетах по 3 (это работает везде), а на айфоне по одной (не работает, выовдит по 2) и на телефонах по одной (это работает).

        • У вас респонсив фредсел, а это значит, что он выводит новости в зависимости от разрешения. И тут на самом деле несколько путей решения проблемы.
          1. Делать нескольков слайдера с выводом новостей и в зависимости от разрешения скрывать/показывать нужный блок с нужным количеством новостей.
          2. В зависимости от разрешения добавлять или удалять слайды.
          3. Либо как в вашем случае специально для айфонов выводил бы отдельный слайдер, а другие прятал.

          • annablk

            Большое спасибо)

  • Andrey Egorov

    Привет. Решил к тебе обратиться в связи с твоим постом насколько хорош этот плагин.
    У меня есть сайт http://ozerocomovilla.ru/ если ты его открываешь на мобильном или на десктопе то увидишь resize при загрузке. Как этого избежать? Что не так? Движок WordPress

    • Привет. Параметр true responsive и items { width : 100 } установлен? Если не поможет попробуй картинку фоном положить должно помочь + можно перед подгрузкой js кода принудительно через css растягивать слайд по ширине всей.

  • Denis Ipatov

    Плагин умер-таки, получается? Жаль. Мне нравилось в нем, что текст плавно появлялся на слайде (т.е. слайд загружался, потом на нем текст).