Многофункциональный слайдер-карусель Сaroufredsel

В последнее время, всё чаще и чаще, клиенты заказывают размещение слайдера или карусели изображений на сайтах. После долгих поисков и тестирования кучи разных скриптов, таких так nivoSlider, jQuerySlider и т.п., в дебрях сети я нашел очень качественный, удобный и полезный скрипт, который и представляю Вашему вниманию — встречайте jquery скрипт CarouFredSel.

Что мне в нём понравилось? В нём присутствует всё для быстрого создания качественной галереи. На сайте разработчика присутствует отличный конфигуратор, который позволяет в считанные минуты вставить правильный код на страницу для запуска галереи. Часто я сталкивался с тем, что многие скрипты не умеет правильно отрабатывать анимацию, рассчитывать расстояния при 100% ширине слайдера. КаруФредСель справляется с этим на отлично.
Приведу пример запуска простейшей галереи, при минимуме настроек также необходим некоторый CSS код.
Для запуска галереи необходимо подключить jQuery и собственно сам скрипт:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.carouFredSel.js"></script>

Создать HTML контент галереи, например с изображениями (отличительная особенность этой карусели в том, что она умеет работать с разными элементами, а не только с изображениями — Вы можете использовать практически любое перечисление одинаковых элементов внутри контейнера карусели):

<div id="foo">
<img alt="" src="img1.jpg" width="300" />
<img alt="" src="img2.jpg" width="300" />
<img alt="" src="img3.jpg" width="300" />
<img alt="" src="img4.jpg" width="300" />
<img alt="" src="img5.jpg" width="300" />
<img alt="" src="img6.jpg" width="300" />
<img alt="" src="img7.jpg" width="300" />
<img alt="" src="img8.jpg" width="300" />
</div>

И запустить выполнение скрипта карусели при загрузке страницы:

$(document).ready(function() {
	$("#foo").carouFredSel();	
});

Вот так просто и быстро можно подключить отличный адаптивный слайдер на страницу.

Чуть не забыл, ссылка на сайт скрипта — http://caroufredsel.dev7studios.com/
А еще у этого слайдера есть гора примеров реализации!

Надеюсь Вам этот слайдер понравится и Вы его полюбите, как и я в своё время.

Vkontakte Facebook Twitter Google Bookmarks I.ua Закладки Yandex

2 комментария

  1. Ilya says: -

    Thanks for the information. I will watch your news 🙂

    [Ответить]

  2. Cordis says: -

    Спасибо за информацию, отличные слайдеры caroufredsel

    [Ответить]

Leave A Reply