Как сделать слайдер на сайте?

Сайты, сайты, сайты. Самое популярное, что существует на сегодняшний день, постольку, поскольку нынешнее поколение целиком и полностью утопает в них. На этот момент человек просто не может обойтись без сайта, поскольку даже самые крупные компании такие как: Microsoft или же Google, да и та же Apple имеют свой собственный сайт с документацией, магазином, каким-то отдельным ассортиментом и прочими услугами.

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

В этой статье, я бы хотел рассказать, как легко и просто создать слайдер, находящийся в верхней части сайта, а именно – header (голова сайта).

Вероятнее всего, для вас сейчас прозвучала несколько незнакомых слов, с которыми вы ни разу не сталкивались, а если и сталкивались, то не так часто. Расскажу подробнее. Header – он же верхушка сайта, та самая часть, которая должна в первую очередь захватить внимание пользователя, который зашёл на ваш сайт. Слайдер – эта та самая картинка, которая привлекает внимание. Слайдер может состоять из нескольких картинок, поочерёдно меняющихся.

Как сделать слайдер на сайте?

Рисунок 1: Слайдер на сайте

Как создать слайдер на сайте?

Перед тем как перейти непосредственно к созданию слайдера на сайте, я бы порекомендовал вам ознакомиться с некоторыми статьями на нашей сайте, а именно: по созданию красивых клавиш, а также немного почитать про стили и JS-скрипты. Поскольку всё это, мы будем использовать при создании слайдера.

Переходим к написанию слайдера. В первую очередь создадим обычную структуру сайта: HTML – HEAD – STYLE – BODY.

<html>
	<head>
		<style>
			
		</style>
	</head>
	<body>
		
	</body>
</html>

После того как первичная структура сайта готова, следующим шагом нам необходимо добавить три контейнера DIV, находящихся друг в друге. Первый контейнер, будет иметь атрибут класса – header, второй - background-image и третий – content. Выглядеть это будет следующим образом:

<div class="header">
<div class = "background-image">
		<div class="content">
						
		</div>
	</div>
</div>

Контейнер с классом header – будет содержать в себе картинку, точно так-же как и background-image, но эти две картинки будет разными, так, что одна будет сменять другую. Настраиваем стили для трёх этих контейнеров.

.header {
	background-image: URL("img/image-background/1.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1920px;
	height: 700px;
}
.background-image {
	background-repeat: no-repeat;
	background-image: URL("img/image-background/2.jpg");
	background-size: 100% 100%;
	background-position: -1920px 0px;
	width: 100%;
	height: 100%;
}
.header .content {
	width: 100%;
	height: 100%;
}

!ВАЖНО! Не забудьте указать путь к своим картинкам, иначе ни чего не будет работать.

Разберемся, что здесь происходит.

Для контейнера с классом header:

  • background-image – устанавливает фоновое изображения для контейнера.
  • background-repeat – свойство, управляющие повторениями изображений. В данном случае значение no-repeat – запрещает повторение рисунка.
  • background -size – растягивает изображение на всю ширину и высоту контейнера.
  • width – ширина контейнера
  • height – высота – контейнера

Контейнер с классом .background-image повторяет значения контейнера с классом header, единственным отличием является наличие дополнительного параметра background-position. Данный параметр задает позицию для изображения. В этом случае, позиция указана так, чтобы изображение было выдвинуто за пределы зримого контейнера, что позволяет нам скрыть его.

Код страницы:

<html>
	<head>
		<style>
			.header {
				background-image: URL("img/image-background/1.jpg");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 1920px;
				height: 700px;
			}
			.background-image {
				background-repeat: no-repeat;
				background-image: URL("img/image-background/2.jpg");
				background-size: 100% 100%;
				background-position: -1920px 0px;
				width: 100%;
				height: 100%;
			}
			.header .content {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class = "background-image">
				<div class="content">
						
				</div>
			</div>
		</div>
		
		<script>
			
		</script>
	</body>
</html>
Как сделать слайдер на сайте?

Рисунок 2: Результат верстки

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

var imageBackground = document.getElementsByClassName('header')[0]; // получаем объект (первый контейнер)
var imageBackground_2 = document.getElementsByClassName('background-image')[0]; // получаем объект (второй контейнер)
var indexBackgroundImage = 1; // указываем индекс изображение (по началу 1)
var timeSwap = 5; // указываем время для отображения одной картинки
						
var DeltaX = 0; // задаём координату движения (по стандарту )
setTimeout(StartChangeHaderImage, timeSwap*1000); // запускаем функцию старта смены изображения через заданное время
				
function StartChangeHaderImage() { // функция старта смены изображения
imageBackground.style.backgroundPosition = "0px 0px"; // присваеваем нуливые координаты для первой картинки
	imageBackground_2.style.backgroundPosition = "-1920px 0px"; // присваеваем координаты для второй кортинки, так, чтобы она была смещена
	imageBackground.style.backgroundImage = 'URL("img/image-background/' + indexBackgroundImage + '.jpg")'; // задаем изображение для первой картинки в зависимости от индеса изображения
					
	if(indexBackgroundImage == 3) indexBackgroundImage = 1; // если индекс дастиг максимального количества картинок (в моём случае 3), обнуляем
	else indexBackgroundImage++; // если нет, показываем следующее изображение
							
	imageBackground_2.style.backgroundImage = 'URL("img/image-background/' + (indexBackgroundImage) + '.jpg")'; // задаём следующее изображение для второго объекта
	
DeltaX = 0; // обнуляем координату движения
	ChangeHaderImage(); // запускаем функцию смены картинки
}
function ChangeHaderImage() { // функция смены картинки
	if(DeltaX < 1920) { // если кооржината движения меньше чем ширина самой картинки (тобиш 1920)
		DeltaX += 20; // двигаем картинку на 20 пикселей
		setTimeout(ChangeHaderImage, 10); // перезапускаем функцию через 10 милисекунд
		imageBackground.style.backgroundPosition = DeltaX + "px 0px"; // сдвигаем первое изображение на координату движения
		imageBackground_2.style.backgroundPosition = (-1920  + DeltaX) + "px 0px"; // сдвигаем второе изображение на координату движения
	} else { // если изображение сдвинулось максимум
		setTimeout(StartChangeHaderImage, timeSwap*1000); // запускаем функцию старта смены изображение через время отображения картинки
	}
}

Для людей, которые прочитали код и ни чего не поняли, я советую перечитать его ещё раз, а в случае если вам всё равно ни чего не понятно, рассказываю. Данный код сдвигает изображение в правую сторону. После чего меняет их местами и вновь смещает. Так по кругу. Всё просто, как 2х2. 

Как сделать слайдер на сайте?

Рисунок 3: Процесс смены изображения

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

Полный код:

<html>
	<head>
		<style>
			.header {
				background-image: URL("img/image-background/1.jpg");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 1920px;
				height: 700px;
			}
			.background-image {
				background-repeat: no-repeat;
				background-image: URL("img/image-background/2.jpg");
				background-size: 100% 100%;
				background-position: -1920px 0px;
				width: 100%;
				height: 100%;
			}
			.header .content {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class = "background-image">
				<div class="content">
						
				</div>
			</div>
		</div>
		
		<script>
			var imageBackground = document.getElementsByClassName('header')[0]; // получаем объект (первый контейнер)
			var imageBackground_2 = document.getElementsByClassName('background-image')[0]; // получаем объект (второй контейнер)
			var indexBackgroundImage = 1; // указываем индекс изображение (по началу 1)
			var timeSwap = 5; // указываем время для отображения одной картинки
						
			var DeltaX = 0; // задаём координату движения (по стандарту )
			setTimeout(StartChangeHaderImage, timeSwap*1000); // запускаем функцию старта смены изображения через заданное время
				
			function StartChangeHaderImage() { // функция старта смены изображения
				imageBackground.style.backgroundPosition = "0px 0px"; // присваеваем нуливые координаты для первой картинки
				imageBackground_2.style.backgroundPosition = "-1920px 0px"; // присваеваем координаты для второй кортинки, так, чтобы она была смещена
				imageBackground.style.backgroundImage = 'URL("img/image-background/' + indexBackgroundImage + '.jpg")'; // задаем изображение для первой картинки в зависимости от индеса изображения
							
				if(indexBackgroundImage == 3) indexBackgroundImage = 1; // если индекс дастиг максимального количества картинок (в моём случае 3), обнуляем
				else indexBackgroundImage++; // если нет, показываем следующее изображение
							
				imageBackground_2.style.backgroundImage = 'URL("img/image-background/' + (indexBackgroundImage) + '.jpg")'; // задаём следующее изображение для второго объекта
							
							
				DeltaX = 0; // обнуляем координату движения
				ChangeHaderImage(); // запускаем функцию смены картинки
			}
			function ChangeHaderImage() { // функция смены картинки
				if(DeltaX < 1920) { // если кооржината движения меньше чем ширина самой картинки (тобиш 1920)
					DeltaX += 20; // двигаем картинку на 20 пикселей
					setTimeout(ChangeHaderImage, 10); // перезапускаем функцию через 10 милисекунд
					imageBackground.style.backgroundPosition = DeltaX + "px 0px"; // сдвигаем первое изображение на координату движения
					imageBackground_2.style.backgroundPosition = (-1920  + DeltaX) + "px 0px"; // сдвигаем второе изображение на координату движения
				} else { // если изображение сдвинулось максимум
					setTimeout(StartChangeHaderImage, timeSwap*1000); // запускаем функцию старта смены изображение через время отображения картинки
				}
			}
		</script>
	</body>
</html>
Пока нет оценок, но вы можете быть первым!

Оцените