CSS:溢出:隐藏无法在全屏模式下运行

时间:2018-12-30 03:35:28

标签: javascript jquery html css blogger

我已将以下滑块(带有文字的照片)代码添加到我的博客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>

0 个答案:

没有答案