slogin.info
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна4 / 5
 
Автор: Администратор
Просмотров: 18168
Теги: css, jQuery, slider, слайдер

В этой статье мы своими руками сделаем простой и адаптивный слайдер с кнопками перелистывания на чистом CSS с использованием нескольких строк jQuery.

Первым делом, создадим разметку HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Демо-страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
	<script type="text/javascript" src="/js/slider.js"></script>
</head>
<body>
	<div class="slider">
		<div class="next"></div>
		<div class="prev"></div>
		<div class="slides">
			<div class="slide">
				<img src="/images/image1.jpg" />
			</div>
			<div class="slide">
				<img src="/images/image2.jpg" />
			</div>
			<div class="slide">
				<img src="/images/image3.jpg" />
			</div>
		</div>
	</div>
</body>
</html>

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

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

Теперь напишем следующие CSS стили:

body {
	margin:0;
	text-align:center;
}

	body .slider {
		overflow:hidden; /* Скрываем всё что за блоком слайдера */
		position:relative;
		width:800px;
		height:500px;
		margin:0 auto;
	}
	
		body .slider .slides {
			position:relative;
			transition:1s; /* Задаем время изменения блока, отвечает за плавную прокрутку */
		}
		
			body .slider .slides .slide {
				float:left;
				display:block;
			}
			
			body .slider .slides .slide img{
				width:800px;
				height:500px;
			}
			
		body .slider .next {
			position:absolute;
			height:50px;
			width:50px;
			background:#009900;
			right:0;
			top:225px;
			z-index:1;
			cursor:pointer;
		}
		
		body .slider .prev {
			position:absolute;
			height:50px;
			width:50px;
			background:#009900;
			left:0;
			top:225px;
			z-index:1;
			cursor:pointer;
		}

Тут стоит отметить 7 строчку, которая скрывает всё, что выходи за пределы этого блока и 16 строку, которая задает скорость анимации для блока, который мы будем двигать.

Остается только написать скрипт, который будет:

  1. Определять количество слайдов и их суммарную ширину, задавать эту ширину slides.
  2. Обработчики событий на клики по кнопкам prev и next, которые будут листать слайды при помощи изменения свойство transform.
$(document).ready(function() { // Ждём загрузки страницы
						   
	var slides = $(".slider .slides").children(".slide"); // Получаем массив всех слайдов
	var width = $(".slider .slides").width(); // Получаем ширину видимой области
	var i = slides.length; // Получаем количество слайдов
	var offset = i * width; // Задаем начальное смещение и ширину всех слайдов
	i--; // уменьшаем кол-во слайдов на один ( для проверки в будущем )

	$(".slider .slides").css('width',offset); // Задаем блоку со слайдами ширину всех слайдов
	
	offset = 0; // Обнуляем смещение, так как показывается начала 1 слайд
	$("body .slider .next").click(function(){	// Событие клика на кнопку "следующий слайд"
		if (offset < width * i) {	// Проверяем, дошли ли мы до конца
			offset += width; // Увеличиваем смещение до следующего слайда
			$(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к следующему
		}
	});


	$("body .slider .prev").click(function(){	// Событие клика на кнопку "предыдущий слайд"
		if (offset > 0) { // Проверяем, дошли ли мы до конца
			offset -= width; // Уменьшаем смещение до предыдущего слайда
			$(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к предыдущему
		}
	});

});

Код обильно снабжён комментариями и в дополнительных пояснениях не нуждается.

Результат можете посмотреть на Демо-странице:

demo

 

Скачать исходники:

download

Комментарии   

+1 # Олег 03.10.2015 12:34
Почему то не прокруивает больше 3 слайдов,подскажите что надо сделать.
Ответить | Ответить с цитатой | Цитировать
-1 # Администратор 06.10.2015 09:14
Цитирую Олег:
Почему то не прокруивает больше 3 слайдов,подскажите что надо сделать.

Добрый день, извиняюсь, это всё моя невнимательность при написании скрипта, поправил, добавил 7 строку и подправил 12
Ответить | Ответить с цитатой | Цитировать
0 # Олег 06.10.2015 18:26
Спасибо.. воспользуюсь.
Ответить | Ответить с цитатой | Цитировать
0 # Алекс 13.02.2016 10:27
Спасибо большое, но как сделать автоматическое пролистывание и кнопки пагинации внизу слайдера?

Подскажите пожалуйста
Ответить | Ответить с цитатой | Цитировать
0 # Администратор 13.02.2016 22:54
Цитирую Алекс:
Спасибо большое, но как сделать автоматическое пролистывание и кнопки пагинации внизу слайдера?

Подскажите пожалуйста

http://www.web.cofp.ru/vse-o-sajtakh/sozdanie-sajta/javascript/jquery/157-prostoj-slajder-karusel-s-tochkami-dots-na-jquery

по ссылке статья, где улучшается этот код и добавляется пагинация. насчёт автоматического пролистывания - нужно добавить таймер и менять слайды, идею подсказал - дальше сами =)
Ответить | Ответить с цитатой | Цитировать
0 # Владлена 12.05.2016 17:13
Никак не могу понять, почему не работает слайдер(

1. Нет кнопок прокрутки
2. Показывается лишь одно первое фото

Подскажите пожалуйста. Уже нет идей(
Ответить | Ответить с цитатой | Цитировать
0 # Администратор 21.05.2016 18:42
Цитирую Владлена:
Никак не могу понять, почему не работает слайдер(

1. Нет кнопок прокрутки
2. Показывается лишь одно первое фото

Подскажите пожалуйста. Уже нет идей(


Код в студию, можно через https://jsfiddle.net/
Ответить | Ответить с цитатой | Цитировать
0 # Евгений666 23.05.2016 10:04
А можно тоже самое, только без жКвери?
жКвери уже отошел и норм конторы перестали его использовать
Ответить | Ответить с цитатой | Цитировать
0 # Администратор 11.06.2016 19:20
Цитирую Евгений666:
А можно тоже самое, только без жКвери?
жКвери уже отошел и норм конторы перестали его использовать


Здравствуйте, можно конечно, как будет время - напишу статью с чистым js, но она будет сложновата для новичков.
Ответить | Ответить с цитатой | Цитировать
0 # Никита 20.06.2016 10:33
Что значит уже отошел?
Если вы это пишите, очевидно вы ничего не понимаете, но это надо обязательно вставить.

jQ просто облегчает js в некоторых моментах, как кому удобно, тот так и пишет.
Если он и отойдет, то далеко не в ближайшем будущем.
Ответить | Ответить с цитатой | Цитировать
0 # Никита 20.06.2016 10:37
Я думал, ключевое слово карусель означает цикличное вращение (без остановки).

Здесь же используется обычный слайдер.
Слишком много одних и тех же обращений.
Ответить | Ответить с цитатой | Цитировать
0 # Администратор 05.07.2016 12:09
Цитирую Никита:
Я думал, ключевое слово карусель означает цикличное вращение (без остановки).

Здесь же используется обычный слайдер.
Слишком много одних и тех же обращений.


Здравствуйте, спасибо за дельное замечание, ошибся в терминологии когда писал.
Ответить | Ответить с цитатой | Цитировать
0 # Вера 04.10.2016 19:55
Спасибо, получилось даже у меня. Супер.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
  • JesseBLamurb
    3.00
  • Lambadacit
    3.00
  • LiStudio16
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 1276
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

porohinaio@mail.ru аватар
INMYROOM это контентный проект про интерьеры и маркетплейс дизайнерской мебели с посещаемостью более...
Перейти в тему
Evgenij83 аватар
Добрый день! Я представляю компанию IT-ОБСЛУЖИВАНИЕ, которая занимается созданием, продвижением сайт...
Перейти в тему
anzhelika_bell аватар
Обязанности: Верстка web-интерфейсов по готовым макетам, исправление дефектов верстки. Требования: ...
Перейти в тему

Последние статьи

Javascript функции

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

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.