Показать сообщение отдельно
  #1 (permalink)  
Старый 18.02.2016, 12:14
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

user adaptive slider
Здравствуйте, уважаемы форумчане. Решил написать свой user adaptive slider. Хотелось бы, чтобы Вы взглянули на первый этап этой идеи, и может быть указали на какие то погрешности, прежде чем я продолжил бы его писать.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>slider</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat laboriosam esse rem ut velit dolores accusamus voluptatem possimus, temporibus, earum enim autem, impedit pariatur necessitatibus. Possimus placeat ad eos velit.</p>

	<!-- slider -->

	<div class="slider">

		<div class="slider__list--wrap">
			<ul class="slider__list">
				<li class="slider__item ">
					<img src="images/1.jpg" alt="">
				</li>
				<li class="slider__item "> 
					<img src="images/2.jpg" alt="">
				</li>
				<li class="slider__item active"> 
					<img src="images/3.jpg" alt="">
				</li>
				<li class="slider__item"> 
					<img src="images/4.jpg" alt="">
				</li>
			</ul>
		</div>
		
		<div class="slider__controls">
			<a href="#" class="slider__controls_button slider_controls-button_prev"></a>
			<a href="#" class="slider__controls_button slider_controls-button_next"></a>
		</div>
	</div>

	<!-- slider - end -->

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus magnam inventore veritatis expedita et accusamus, nemo eum sequi, assumenda, quas deleniti perferendis qui dolor harum nisi. Sed dolorem veniam eligendi?</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus magnam inventore veritatis expedita et accusamus, nemo eum sequi, assumenda, quas deleniti perferendis qui dolor harum nisi. Sed dolorem veniam eligendi?</p>

</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/main.js"></script>
</body>
</html>


div.container {
	width: 90%;
	background-color: #f2f2f2; 
	margin: auto;
}
.active {
	z-index: 100;
}

img {
	width: 100%; 
	height: auto; 

	display: block;
}

div.slider {
	margin: auto;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
	z-index: 50;
	padding: 10px;
	position: relative;
}

ul.slider__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
li.slider__item {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.slider__controls_button {
	display: block;
	width: 30px;
	height: 34px;
	border-radius: 2px;
}
a.slider_controls-button_prev {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 200;
	background: url(../images/prev.jpg) no-repeat;
}
a.slider_controls-button_next {
	position: absolute;
	right: 0;
	top: 50%;
	z-index: 200;
	background: url(../images/next.jpg) no-repeat;
}


h1, h2 {
	margin: 0; 
	padding: 0;
}


$(function() {
	(function() {
		var 
			slider        = $('div.slider'), // контейнер slider
			slider_list   = $('.slider__list'), // ul
			slider_item   = $('.slider__item'), // li
			active        = $('.active'), // активный
			activeWidth   = active.children().width(), // active.children() - img
			slider_cbut   = $('.slider__controls_button'), // элеметы управления
			slider_cbut_h = slider_cbut.height(),
			activeHeight = active.children().height();

			slider_cbut.css('marginTop', - (slider_cbut_h / 2)); // выравниваем по центру элементы управления

			if (active) active.css('opacity', '1');

			// ширина и высота контейнера slider
			slider.css({
				"maxWidth": activeWidth + "px",
				"height": activeHeight + "px"
			});

			// ширина и высота контейнера ul
			slider_list.css({ 
				"maxWidth": activeWidth + "px",
				"height": activeHeight + "px"
			});
	})();


	$(window).on("resize", function(){
		var 
			active       = $('.active'), // активный
			activeHeight = active.children().height(), //  active.children() - img
			activeWidth  = active.children().width(), // active.children() - img
			active_ch  = active.children();
			window_w     =  $(window).width(),
			slider       = $('div.slider'), // контейнер slider
			slider_w     = slider.width();
	
			slider.css("height", activeHeight + 'px');
	});

});
Ответить с цитированием