时间戳

首页 > 解决方案 > 猫头鹰轮播边距错误

javascript - 猫头鹰轮播边距错误

问题描述

我对猫头鹰旋转木马有疑问。我有三张照片，其中一张的高度和其他的不一样。如果代码对您没有帮助，我会给您一个带有项目的 .zip 文件。

PS：我的帖子主要是代码..我必须在这里放一些随机文本***（对此感到抱歉！）*** {Lorem ipsum dolor sit amet，consectetur adipiscing elit。Ut rhoncus, leo non venenatis accumsan, eros massa rutrum risus, vitae ultricies ipsum libero et sem。Donec eget diam 在 sed orci 中的 elit condimentum lobortis 中。整数 volutpat aliquam ligula vitae varius。Mauris luctus maximus nulla, bibendum faucibus risus gravida vel。整数 a ultrices nisi, ac hendrerit risus。Vestibulum nulla magna, porttitor eu ante ut, sodales pulvinar eros。Lorem ipsum dolor sit amet, consectetur adipiscing elit。Donec purus ligula, interdum id 中的调味品, tempor sit amet justo。}

在此处输入图像描述 在此处输入图像描述

<script src="js/owl.carousel.min.js"></script>
	<script type="text/javascript">
		$('.owl-carousel').owlCarousel({
			autoplay:        false,
			navigation:      false,
			slideSpeed:      500,
			paginationSpeed: 800,
			rewindSpeed:     1000,
			singleItem:      true,
			stopOnHover:     true,
			dots:            false,
			loop:            true,
			margin:          0,
			responsive: {
				0: {
				items:1
				},
				600: {
				items:1
				},
				1000: {
				items:1
				}
			}
		});
	</script>
	<script>
		var owl = $('.owl-carousel');
		owl.owlCarousel();
		// Go to the next item
		$('.customNextBtn').click(function() {
			owl.trigger('next.owl.carousel');
		})
		// Go to the previous item
		$('.customPrevBtn').click(function() {
			// With optional speed parameter
			// Parameters has to be in square bracket '[]'
			owl.trigger('prev.owl.carousel', [300]);
		})
	</script>
#testimonials.bg-1 {
    position: relative;
    background: linear-gradient(to bottom, rgba(0, 0, 0,0.65), rgba(0, 0, 0,0.05)), url("https://images.unsplash.com/photo-1462798209360-48743134a7c9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e367b677ac4e4899d0053442dc87c4a9&auto=format&fit=crop&w=750&q=80") no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    z-index: 1;
}
#testimonials h2 {
    position:relative; 
    display: block; 
}
#testimonials h2::after {
    height: 2.2rem;
    width: 1px;
    background-color:white;
    position: absolute;
    left: 0;
    right: 0;
    margin:auto;
    bottom: 0;
    margin-bottom: -4rem;
    content:'';
}
#testimonials .owl-carousel .owl-item img {
    display: block;
    max-width: 210px;
  
}
#testimonials .color-h {
    color:var(--w)!important;
}
#testimonials .color-h-1 {
    color:var(--p)!important;
}
#testimonials .bg-testimonials {
    background-color:var(--w)!important;
}
<link rel="stylesheet" href="css/owl.carousel.min.css"/>
	<link rel="stylesheet" href="css/owl.theme.default.css"/>
<section id="testimonials" class='py-5 bg-1'>
		<div class="container">
			<div class="row justify-content-center">   
				<div class="col-8 mb-3 text-center">
					<small class="color-h">TESTIMONIALS</small>
					<h2 class="color-h">A WORD FROM MY CLIENTS</h2>
				</div>
			</div>	
			<div class="owl-carousel owl-theme">
				<div class="row mt-5 justify-content-center">   
					<div class="col-12 p-3 p-md-5 bg-testimonials" data-aos="fade-up" data-aos-duration="2000" data-aos-delay="100">
						<div class="row media text-center align-items-center">
							<div class="col-12 col-md-4 mt-5 mt-md-0">
								<img  class="mx-auto my-auto" src="images/t1.jpg" alt="">
							</div>
							<div class="media-body p-4 col-12 col-md-8">
								<small class="color-h-1"><em>SANTA BARBARA ENGAGEMENT</em></small>
								<h5 class="my-4 color-h-1">"Your photos are AMAZING! Thank you so, so much. I will forever treasure them. We are really grateful. You are such a talented photographer. We can't thank you enough for sharing your craft with us.   "</h5>
								<h5 class="color-h-1 mb-3 mb-md-0">JELIJAH & DEFOUE</h5>
							</div>
						</div>
					</div>
				</div>
				<div class="row mt-5 justify-content-center">   
					<div class="col-12 p-3 p-md-5 bg-testimonials" data-aos="fade-up" data-aos-duration="2000" data-aos-delay="100">
						<div class="row media text-center align-items-center">
							<div class="col-12 col-md-4 mt-5 mt-md-0">
								<img  class="mx-auto my-auto" src="images/t4.jpg" alt="">
							</div>
							<div class="media-body p-4 col-12 col-md-8">
								<small class="color-h-1"><em>SANTA BARBARA ENGAGEMENT</em></small>
								<h5 class="my-4 color-h-1">"Hannah is truly an outstanding photographer. She captures the heart of the events. I'd recommend her to anyone!  -"</h5>
								<h5 class="color-h-1 mb-3 mb-md-0">JELIJAH & DEFOUE</h5>
							</div>
						</div>
					</div>
				</div>
				<div class="row mt-5 justify-content-center">   
					<div class="col-12 p-3 p-md-5 bg-testimonials" data-aos="fade-up" data-aos-duration="2000" data-aos-delay="100">
						<div class="row media text-center align-items-center">
							<div class="col-12 col-md-4 mt-5 mt-md-0">
								<img  class="mx-auto my-auto" src="https://images.unsplash.com/photo-1517462964-21fdcec3f25b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c6622d956bd3bb519516691c31141f4&auto=format&fit=crop&w=394&q=80&h=494" alt="">
							</div>
							<div class="media-body p-4 col-12 col-md-8">
								<small class="color-h-1"><em>SANTA BARBARA ENGAGEMENT</em></small>
								<h5 class="my-4 color-h-1">"Thank you is simply not enough. You have captured moments that our family will treasure forever. "</h5>
								<h5 class="color-h-1 mb-3 mb-md-0">JELIJAH & DEFOUE</h5>
							</div>
						</div>
					</div>
				</div>	
			</div>
		</div>
	</section>

标签： javascripthtmlcss

解决方案

检查下面的代码

<script src="js/owl.carousel.min.js"></script>
	<script type="text/javascript">
		$('.owl-carousel').owlCarousel({
			autoplay:        false,
			navigation:      false,
			slideSpeed:      500,
			paginationSpeed: 800,
			rewindSpeed:     1000,
			singleItem:      true,
			stopOnHover:     true,
			dots:            false,
			loop:            true,
			margin:          0,
      autoHeight: false,


			responsive: {
				0: {
				items:1
				},
				600: {
				items:1
				},
				1000: {
				items:1
				}
			}
     
		});
	</script>
	<script>
		var owl = $('.owl-carousel');
		owl.owlCarousel();
		// Go to the next item
		$('.customNextBtn').click(function() {
			owl.trigger('next.owl.carousel');
		})
		// Go to the previous item
		$('.customPrevBtn').click(function() {
			// With optional speed parameter
			// Parameters has to be in square bracket '[]'
			owl.trigger('prev.owl.carousel', [300]);
		})
    
    var setMinHeight = function(minheight = 0) {
  jQuery('.owl-carousel').each(function(i,e){
    var oldminheight = minheight;
    jQuery(e).find('.owl-item').each(function(i,e){
      minheight = jQuery(e).height() > minheight ? jQuery(e).height() : minheight;    
    });
    jQuery(e).find('.owl-item .bg-testimonials').css("min-height",minheight + "px");
    minheight = oldminheight;
  });
};

setMinHeight();
    
	</script>
#testimonials.bg-1 {
    position: relative;
    background: linear-gradient(to bottom, rgba(0, 0, 0,0.65), rgba(0, 0, 0,0.05)), url("https://images.unsplash.com/photo-1462798209360-48743134a7c9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e367b677ac4e4899d0053442dc87c4a9&auto=format&fit=crop&w=750&q=80") no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    z-index: 1;
}
.bg-testimonials{
background:#fff
}
#testimonials h2 {
    position:relative; 
    display: block; 
}
#testimonials h2::after {
    height: 2.2rem;
    width: 1px;
    background-color:white;
    position: absolute;
    left: 0;
    right: 0;
    margin:auto;
    bottom: 0;
    margin-bottom: -4rem;
    content:'';
}
#testimonials .owl-carousel .owl-item img {
    display: block;
    max-width: 210px;
  
}
#testimonials .color-h {
    color:#000 !important;
}
#testimonials .color-h-1 {
    color:#000!important;
}
#testimonials .bg-testimonials {
    background-color:#fff!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"/>
	<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css"/>
<section id="testimonials" class='py-5 bg-1'>
		<div class="container">
			<div class="row justify-content-center">   
				<div class="col-8 mb-3 text-center">
					<small class="color-h">TESTIMONIALS</small>
					<h2 class="color-h">A WORD FROM MY CLIENTS</h2>
				</div>
			</div>	
			<div class="owl-carousel owl-theme">
				<div class="row mt-5 justify-content-center">   
					<div class="col-12 p-3 p-md-5 bg-testimonials" data-aos="fade-up" data-aos-duration="2000" data-aos-delay="100">
						<div class="row media text-center align-items-center">
							<div class="col-12 col-md-4 mt-5 mt-md-0">
								<img  class="mx-auto my-auto" src="images/t1.jpg" alt="">
							</div>
							<div class="media-body p-4 col-12 col-md-8">
								<small class="color-h-1"><em>SANTA BARBARA ENGAGEMENT</em></small>
								<h5 class="my-4 color-h-1">"Your photos are AMAZING! Thank you so, so much. I will forever treasure them. We are really grateful. You are such a talented photographer. We can't thank you enough for sharing your craft with us.   "</h5>
								<h5 class="color-h-1 mb-3 mb-md-0">JELIJAH & DEFOUE</h5>
							</div>
						</div>
					</div>
				</div>
				<div class="row mt-5 justify-content-center">   
					<div class="col-12 p-3 p-md-5 bg-testimonials" data-aos="fade-up" data-aos-duration="2000" data-aos-delay="100">
						<div class="row media text-center align-items-center">
							<div class="col-12 col-md-4 mt-5 mt-md-0">
								<img  class="mx-auto my-auto" src="images/t4.jpg" alt="">
							</div>
							<div class="media-body p-4 col-12 col-md-8">
								<small class="color-h-1"><em>SANTA BARBARA ENGAGEMENT</em></small>
								<h5 class="my-4 color-h-1">"Hannah is truly an outstanding photographer. She captures the heart of the events. I'd recommend her to anyone!  -"</h5>
								<h5 class="color-h-1 mb-3 mb-md-0">JELIJAH & DEFOUE</h5>
							</div>
						</div>
					</div>
				</div>
				<div class="row mt-5 justify-content-center">   
					<div class="col-12 p-3 p-md-5 bg-testimonials" data-aos="fade-up" data-aos-duration="2000" data-aos-delay="100">
						<div class="row media text-center align-items-center">
							<div class="col-12 col-md-4 mt-5 mt-md-0">
								<img  class="mx-auto my-auto" src="https://images.unsplash.com/photo-1517462964-21fdcec3f25b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c6622d956bd3bb519516691c31141f4&auto=format&fit=crop&w=394&q=80&h=494" alt="">
							</div>
							<div class="media-body p-4 col-12 col-md-8">
								<small class="color-h-1"><em>SANTA BARBARA ENGAGEMENT</em></small>
								<h5 class="my-4 color-h-1">"Thank you is simply not enough. You have captured moments that our family will treasure forever. "</h5>
								<h5 class="color-h-1 mb-3 mb-md-0">JELIJAH & DEFOUE</h5>
							</div>
						</div>
					</div>
				</div>	
			</div>
		</div>
	</section>

推荐阅读