Question

我正在尝试在旋转木马内部创建一个带有固定元素（带有模糊的div）的多项旋转木马（在右侧，但没关系，它甚至可以在左侧，在非常中心或某处，以覆盖其中一个旋转木马项目）。我会上传其他图片给你的想法：

我用owl carousel作为框架构建它。到目前为止，我最大的问题是根本没有响应。每当我更改屏幕尺寸时，固定的div（我放在旋转木马画布上，但在整个旋转木马div内）只会略有变化，但不会跟随每个项目的确切尺寸。

jsFiddle：

$('.owl-carousel').owlCarousel({
			loop: true,
			nav: true,
			navText: [
			"<i class='fa fa-caret-left'></i>",
			"<i class='fa fa-caret-right'></i>"
			],
			autoplay: true,
			autoplayHoverPause: true,
			responsive: {
				0: {
					items: 3
				},
				600: {
					items: 3
				},
				1000: {
					items: 3
				}
			}
		});

.carousel-wrap {
		float: left;
		padding: 0 5%;
		width: 60%;
		position: relative;
	}

	/* fix blank or flashing items on carousel */
	.owl-carousel .item {
		position: relative;
		z-index: 100; 
		-webkit-backface-visibility: hidden; 
	}

	/* end fix */
	.owl-nav > div {
		margin-top: -26px;
		position: absolute;
		top: 50%;
		color: #cdcbcd;
	}

	.owl-nav i {
		font-size: 52px;
	}

	.owl-nav .owl-prev {
		left: -30px;
	}

	.owl-nav .owl-next {
		right: -30px;
	}

	.covercarousel {
		float: left;
		width: 23.33%;
	}
	.covercarousel img {
		max-width: 100%
	}
	.owl-carousel {
		width: 70%;
		float: left;
		position: relative;
	}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Carousel</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
</head>
<body>
	<div class="carouselwhole">
		<div class="carousel-wrap">

			<div class="owl-carousel">
				<div class="item"><img src="http://placehold.it/300x300"></div>
				<div class="item"><img src="http://placehold.it/300x300"></div>
				<div class="item"><img src="http://placehold.it/300x300"></div>
				<div class="item"><img src="http://placehold.it/300x300"></div>
				<div class="item"><img src="http://placehold.it/300x300"></div>
				<div class="item"><img src="http://placehold.it/300x300"></div>
				<div class="item"><img src="http://placehold.it/300x300"></div>
				<div class="item"><img src="http://placehold.it/300x300"></div>
				<div class="item"><img src="http://placehold.it/300x300"></div>
			</div>
			<div class="covercarousel">
				<img src="http://placehold.it/300x300">
			</div>
		</div>
		
	</div>
	
</body>
</html>

在宽度（屏幕）的1280像素处看起来很完美

我只需要找到一种方法让它在任何规模上都有响应。

有什么建议吗？

如何在猫头鹰旋转木马上放置一个固定的div并使其响应

0 个答案: