Simple-slider

Небольшой по размерам адаптивный CSS-Javascript - слайдер изображений с плавным перетеканием одного изображения в другое. Автоматически подстраивается к любой ширине экрана. Обладает опциями зацикливания (бесконечного цикла) и функцией автоматического пролистывания элементов. Интервал между пролистыванием элементов можно изменять, указав значения в миллисекундах. Навигация осуществляется стрелками и точками навигации. Любой из элементов навигации можно отключить.

В HTML-разметке можно использовать как теги ul-li, так и div-div (или div-p).

<div class="sim-slider">
  <ul class="sim-slider-list">
    <li><img src="no-image.gif" alt="no-image"></li>   <!-- экран -->
    <li class="sim-slider-element"><img src="image1.jpg" alt="1"></li>
    <li class="sim-slider-element"><img src="image2.jpg" alt="2"></li>
    ...
    <li class="sim-slider-element"><img src="imageN.jpg" alt="N"></li>
  </ul>
  <div class="sim-slider-arrow-left"></div>
  <div class="sim-slider-arrow-right"></div>
  <div class="sim-slider-dots"></div>
</div>

Все изображения должны быть одного размера. Перед первым изображением помещён экран (no-image.gif) – однотонный рисунок белого (или любого другого) цвета.

Для того, чтобы слайдер был адаптивным к любой ширине экрана, для изображений нужно указать CSS-свойство width: 100%. Для всех блочных контейнеров (div, ul, li и пр.) также width: 100% или, если нужна ширина в числовых единицах, то только max-width или min-width.

Все изображения располагаются “в стопочку”, одно над другим абсолютным позиционированием в левом верхнем углу объемлющего контейнера. Экран предотвращает схлопывание контейнера. Всем изображениям присваивается CSS-свойство opacity: 0, кроме первого элемента, которому программа инициализации присваивает opacity: 1, тем самым делая его видимым. Пролистывание элементов осуществляется плавным изменением opacity из 1 в 0 для видимого элемента и из 0 в 1 для следующего за ним невидимого элемента.

Стили, как обычно, подключаются в заголовке. Скрипт слайдера можно подключить по наступлению события onload или в конце HTML-разметки.

<html>
<head>
	…
<link rel="stylesheet" href="sim-files/sim-slider-styles.css">
</head>
<body>
	…
	</footer>
<script src="sim-files/sim-slider.js"></script>
<script>new Sim()</script>
</body>
</html>

Название глвной функции Sim - от "simple" - простой слайдер.

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

<div class="sim-slider" id=“first”>
	<!-- первый слайдер -->
	…
<div class="sim-slider" id=“second”>
	<!-- второй слайдер -->
	…
<script>new Sim(“first”); new Sim(“second”);</script>

Более подробное описание слайдера находится в моём посте на HABRAHABR или на ITnan

Демонстрационный пример

Скачать Simple-slider

Количество скачиваний:

Проверьте ваш IQ