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

custom adaptive slider
Здравствуйте. Решил написать свой 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 active">
					<img src="images/1.jpg" alt="">
				</li>
				<li class="slider__item "> 
					<img src="images/2.jpg" alt="">
				</li>
				<li class="slider__item "> 
					<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;
	position: relative;
	z-index: 50;
}

.slider__list--wrap {
	
}

ul.slider__list {
	list-style: none;
	margin: 0;
	padding: 0;

	display: block;
	position: absolute; /* Работает такой способ от IE 8 */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;

}
li.slider__item {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

/* a.slider_controls-button_prev {
	position: absolute;
	left: 0;
	top: 50%;
}
a.slider_controls-button_next {
	position: absolute;
	right: 0;
	top: 50%;
} */


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
			activeHeight = active.children().height();

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

			// console.log(active);

			// ширина и высота контейнера slider
			slider.css({
				"maxWidth": activeWidth + 20 + "px",
				"height": activeHeight + 20 + "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();
		
			// console.log(active_ch);

			if (window_w < 819) {
				slider.css({
					// ???
				});
			}
	});

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