Тема: custom carousel
Показать сообщение отдельно
  #2 (permalink)  
Старый 27.02.2016, 21:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

carousel с адаптацией под окно просмотра
s24344,
для медитации ...
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
   <style type="text/css">
   .clearfix:before, .clearfix:after{
	content: " ";
	display: table;
}
.clearfix:after{
	clear: both;
}
body {
	background-color: #d6dbcb;
}
img {
	border: none;
	max-width: 100%;
	display: block;
	margin: auto;
}
.wrap {
	max-width: 959px;
	margin: auto;
	position: relative;
}

div.carousel-wrap {
	margin: 20px auto;
	max-width: 852px;
	overflow: hidden;
     position: relative;

}
ul.carousel {
	padding: 20px 0 15px 0;
	margin: 0;
	list-style-type: none;
	background-color: #fff;
	/* width: 852px; */
    left: 0;
    position:  relative;
	width: 10650px;
}
li.carousel__title {
	float: left;
	position: relative;
}
div.myslide {
	width: 213px;
	text-align: center;
}
a.carousel__link {
	display: block;
	color: #be1a2a;
}

div.controls__prev {
	position: absolute;
	top: 0;
	left: 0px;
	width: 54px;
	background-color: #f0f2eb;
    opacity: .2;
}
div.controls__prev > a {
	width: 22px;
	height: 45px;
	background: url(../images/prev.png) no-repeat;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
}
div.controls__next {
	position: absolute;
	top: 0;
	right: 0px;
	width: 54px;
	background-color: #f0f2eb;
}
div.controls__next > a {
	width: 22px;
	height: 45px;
	background: url(../images/next.png) no-repeat;
	display: block;
	position: absolute;
	top: 50%;
	 right: 50%;

}

   </style>
</head>
<body>
	<div class="wrap">
		<div class="carousel-wrap">
			<ul class="carousel clearfix">
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
						<a href="#" class="carousel__link">Комнатные цветы1</a>
					</div>
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
						<a href="#" class="carousel__link">Свадебные цветы2</a>
					</div>
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
						<a href="#" class="carousel__link">Комнатные цветы3</a>
					</div>
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
						<a href="#" class="carousel__link">Свадебные цветы4</a>
					</div>
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
						<a href="#" class="carousel__link">Комнатные цветы5</a>
					</div>
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
						<a href="#" class="carousel__link">Свадебные цветы6</a>
					</div>
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
						<a href="#" class="carousel__link">Комнатные цветы7</a>
					</div>
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
						<a href="#" class="carousel__link">Свадебные цветы8</a>
					</div>
				</li>
			</ul>

			<div class="controls">
				<div class="controls__prev"><a href="#">prev</a></div>
				<div class="controls__next"><a href="#">next</a></div>
			</div>
		</div>
	</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
    var e = $(".carousel"),
        c = $("li", e).get(),
        d = c.length,
        g = $("div.carousel-wrap"),
        h = $(".controls__next, .controls__prev");
    h.on("click", function(a) {
        a.preventDefault();
        a = e.position().left;
        if (this.classList.contains("controls__next"))
            for (var b = 0; b < d; b++) {
                var f = $(c[b]).position().left;
                if (f > -a) {
                    a = f;
                    break
                }
            } else
                for (b = d - 1; - 1 < b; b--)
                    if (f = $(c[b]).position().left, f < -a) {
                        a = f;
                        break
                    }
        h.css({
            opacity: 1
        });
        b > 0 || $(this).css({
            opacity: .2
        });
        b = $(c[d - 1]).position().left + $(c[d - 1]).width() - g.width();
        a > b && (a = b, $(this).css({
            opacity: .2
        }));
        e.stop().animate({
            left: -a + "px"
        }, 1E3)
    });
    var k;
    $(window).on("resize", function() {
        window.clearTimeout(k);
        k = window.setTimeout(function() {
            var a = -e.position().left + g.width() - $(c[d - 1]).position().left - $(c[d - 1]).width();
            0 < a && e.stop().animate({
                left: "+=" + a + "px"
            }, 300)
        }, 200)
    })
});
</script>
</body>
</html>

Последний раз редактировалось рони, 27.02.2016 в 23:26.
Ответить с цитированием