EasySlideMe

Лучший простой слайдер для сайта

Часто возникают ситуации, когда сайт перегружен различными библиотеками: CSS, JS и прочими файлами, которые иногда делают его слишком объемным. На помощь приходит простой слайдер для сайта на jQuery.

Простота и удобство, приятный дизайн и минимальное количество кода, файлов и времени на его установку. Все, что тебе будет необходимо – задействовать библиотеку jQuery, Java Script код слайдера, его стили и HTML. Главным преимуществом данного слайдера для сайта является минимализм используемых ресурсов, простые анимации смены слайдов, минимально нагружающих процессор конечного пользователя и простота установки.

Как подключить простой слайдер для сайта в любой html странице?

Для начала нужно скачать исходные файлы (ссылка ниже). Затем распаковать их и найти файлы *.js , прикрепить их к странице следующим образом. Зайди на свой хостинг, скачай файл, куда требуется поместить слайдер и редактируй его страницу обычным редактором.:

<script src="/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/slider.js" type="text/javascript"></script>

ВНИМАНИЕ! Если у тебя на странице уже используется библиотека jQuery, то повторно её не нужно подгружать.

Прикрутим файл стилей на страницу:

<link rel="stylesheet" href="/slider.css" type="text/css" />

Далее смотрим сам код слайдера:

<div id="slider-wrap">
<div id="slider">
<a href="#">
<div class="slide" style="background:url(https://f.inverser.pro/img/6/NeedFull.NET_videoklip-victoria-justice-gold-1080p-hd.jpg) 50% 0 no-repeat;background-size:cover;" title="Перейти к  &gt; Victoria Justice - Gold [1080p HD]">
<div class="slide_title">Victoria Justice - Gold</div>
<div class="slide_show">&bull; Перейти к материалу</div>
</div>
</a>
<a href="#">
<div class="slide" style="background:url(https://f.inverser.pro/img/6/NeedFull.NET_videoklip-tiesto-wasted-1080p-hd.jpg) 50% 0 no-repeat;background-size:cover;" title="Перейти к  &gt; Tiesto - Wasted [1080p HD]">
<div class="slide_title">Tiesto - Wasted</div>
<div class="slide_show">&bull; Перейти к материалу</div>
</div>
</div>
</div>

Ты видишь несколько контейнеров, в которых лежат ссылка и изображение. Мне было необходимо, чтобы изображение в слайдере подгонялось в полную ширину и высоту, так как я использую различные изображения и они имеют как вертикальную, так и горизонтальную ориентацию. Нашел выход в том, что сделал изображение фоном контейнера, прикрутив к нему стиль background-size: cover. В результате у меня получилось то, что задумывал, но ты можешь изменить его, для своего случая.

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

Файлы EasySlideMe: