我已将以下滑块(带有文字的照片)代码添加到我的博客html / javascript小工具中。我希望滑块在中间显示主要推荐,在左侧和右侧显示2个裁剪的推荐。
该代码应如下所示:https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes 但最终却是这样的:https://i.imgur.com/eGM4h33.png
您知道如何解决该问题吗?这是代码:
jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 2,
autoplay: false,
dots: true,
nav: true,
autoplayTimeout: 8500,
smartSpeed: 450,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3
}
}
});
});
.testimonials {
position: relative;
overflow: hidden;
padding-top: 10px;
}
#customers-testimonials .item-details {
background-color: #F7F6F6;
color: #4A4A51;
padding: 0.5em 0.5em;
text-align: left;
}
#customers-testimonials .item-details h5 {
margin: 0 0 0.2em;
font-size: 1em;
line-height: 1em;
}
#customers-testimonials .item-details h5 span {
color: red;
float: right;
padding-right: 0.2em;
}
#customers-testimonials .item-details p {
font-size: 1em;
}
#customers-testimonials .item {
text-align: center;
margin-bottom: 10px;
}
.owl-carousel .owl-nav [class*='owl-'] {
transition: all .3s ease;
}
.owl-carousel .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
.owl-carousel {
position: relative;
}
.owl-carousel .owl-next,
.owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #000;
border: 1px solid #000;
text-align: center;
}
.owl-carousel .owl-prev {
left: 10px;
}
.owl-carousel .owl-next {
right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="http://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' />
<!-- TESTIMONIALS -->
<section class="testimonials">
<div class="container" style="padding:0">
<div class="row">
<div class="col-sm-12">
<div id="customers-testimonials" class="owl-carousel">
<!--TESTIMONIAL 1 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 1 -->
<!--TESTIMONIAL 2 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 2 -->
<!--TESTIMONIAL 3 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 3 -->
</div>
</div>
</div>
</div>
</section>
<!-- END OF TESTIMONIALS -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js'>
</script>