В последнее время, всё чаще и чаще, клиенты заказывают размещение слайдера или карусели изображений на сайтах. После долгих поисков и тестирования кучи разных скриптов, таких так 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/
А еще у этого слайдера есть гора примеров реализации!
Надеюсь Вам этот слайдер понравится и Вы его полюбите, как и я в своё время.
Leave a Reply