logo标签列表

全宽 - Owl Carousel 2问题

htmlcssowl-carouselowl-carousel-2
6

尝试创建一个全宽的owl-carousel，但是当我在chrome上进行检查元素时，在.owl-stage上看到了这个：

element.style {
    transform: translate3d(-1872px, 0px, 0px);
    transition: 0s;
    width: 7264px;
    padding-left: 200px;
    padding-right: 200px;
}

最初我尝试仅覆盖.owl-stage上的填充，但填充保持不变。

我还尝试将所有图像的最小宽度设置为100％和100vw，但这也没有起作用。

有没有办法调整.owl-stage上的填充？

这是我的代码：

$('.owl-carousel').owlCarousel({
    stagePadding: 200,
    loop:true,
    margin:0,
    singleItem:true,
    nav:true,
    navText: [
        "<i class='fa fa-caret-left'></i>",
        "<i class='fa fa-caret-right'></i>"
    ],
    dots:true,
    // autoplay: true,
    // autoplayHoverPause: true,
    responsive:{
        0:{
            items:1,
            stagePadding: 60
        },
        600:{
            items:1,
            stagePadding: 100
        },
        1000:{
            items:1,
            stagePadding: 200
        },
        1200:{
            items:1,
            stagePadding: 250
        },
        1400:{
            items:1,
            stagePadding: 300
        },
        1600:{
            items:1,
            stagePadding: 350
        },
        1800:{
            items:1,
            stagePadding: 400
        }
    }
});
body {
  padding: 0;
  margin: 80px 0 0 0;
  font-family: Merriweather;
}

.owl-carousel:after {
  content: "";
  display: block;
  position: absolute;
  width: 8%;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: 0;
  pointer-events: none;
  background: url() no-repeat center 50%;
  background-size: 100% auto;
}
.owl-stage{
  min-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.owl-item {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate(0) scale(1.0, 1.0);
}
.item {
  opacity: 0.4;
  transition: .4s ease all;
  transform: scale(.6);
}
.item img{
  display: block;
  min-width: 100%;
  width: auto;
  height: auto;
  max-height: 680px !important;
}
.active .item {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  transform: scale(1);
  max-height: 680px !important;
}

/* content and cta */
.inner {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  text-align: center;
}
/* END CTA Button*/

/* Title Animation */
.reveal-text,
.reveal-text:after {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-duration: 600ms;
          animation-duration: 600ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.reveal-text {
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  color:#ffe221;
  text-shadow: 1px 1px #000000;
  white-space: nowrap;
}
.reveal-text:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #8ce2ea;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  pointer-events: none;
}
.active .reveal-text{
    -webkit-animation-name: reveal-text;
          animation-name: reveal-text;
}
.active .reveal-text:after {
    -webkit-animation-name: revealer-text;
          animation-name: revealer-text;
}
/* Before animation */
@-webkit-keyframes reveal-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes reveal-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

/* After animation */
@-webkit-keyframes revealer-text {
  0%, 50% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  60%, 100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@keyframes revealer-text {
  0%, 50% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  60%, 100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
/* Title Animation END */

/* OWL-Carousel Navigation*/
.owl-nav div {
  position: absolute;
  top: 45%;
  color: #cdcbcd;
}
.owl-nav i {
  font-size: 52px;
}
.owl-nav .owl-prev {
  left: 5% !important;
}
.owl-nav .owl-next {
  right: 5% !important;;
}
.owl-prev:hover, .owl-next:hover{
  text-shadow: 2px 2px #000000;
  transform: translateX(10%);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.owl-prev:hover{
  text-shadow: -2px 2px #000000;
  transform: translateX(-10%);
}
.owl-theme .owl-dots .owl-dot span{
  width: 0;
}
.owl-dots {
  text-align: center;
  position: fixed;
  margin-top: 10px;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.owl-dot {
  border-radius: 50px;
  height: 10px;
  width: 10px;
  display: inline-block;
  background: rgba(127,127,127, 0.5);
  margin-left: 5px;
  margin-right: 5px;
}
.owl-dot.active {
  background: rgba(127,127,127, 1);
}
/* END OWL-Carousel Navigation*/

@media only screen and (max-width:768px) {
  #full-width{
    padding: 0;
  }
  .item{
    transform: scale(0);
  }
  .item img{
    height: 400px !important;
  }
  .active .item img{
    max-height: 400px;
  }
}
@media only screen and (max-width:420px) {
  .item img{
    height: 200px !important;
  }
  .active .item img{
    max-height: 200px;
  }
}
<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Tanya-UI-Kit-3 Full Page Width</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
  </head>
<body>
<div class="owl-carousel owl-theme owl-loaded owl-drag">
  <div class="item">
  <img src="https://bboyjplus.files.wordpress.com/2014/04/bboying-steps-2043304.jpg" alt="" />
  <div class="inner">
      <div class="row row-content">
          <div class="col-md-12">
              <div class="headline-wrap">
                  <h1><span class="reveal-text">H1 TITLE</span></h1>
                  <h2><span class="reveal-text">H2 TITLE</span></h2>
              </div>
          </div>
      </div>
      <div class="row row-cta">
          <div class="col-md-12 cta-wrap">
              <a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
          </div>
      </div>
    </div>
  </div>
  <div class="item">
  <img src="https://i.vimeocdn.com/video/550760587.jpg?mw=1920&mh=1080&q=70" alt="" />
  <div class="inner">
      <div class="row row-content">
          <div class="col-md-12">
                  <div class="headline-wrap">
                  <h1><span class="reveal-text">H1 TITLE</span></h1>
                  <h2><span class="reveal-text">H2 TITLE</span></h2>
              </div>
          </div>
      </div>
      <div class="row row-cta">
          <div class="col-md-12 cta-wrap js-cta-wrap">
              <a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
          </div>
      </div>
    </div>
  </div>  
</div>

<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
  </body>
</html>

3个回答
10
设置旋转木马的属性为items: 1, stagePadding: 0，将body { margin: 0; }应用于文档，并删除你对.owl-stage进行的样式设置（没有任何作用），同时删除你在图片上设置的max-height，因为这会使它们失真并且已经指定了min-width: 100%。 

$('.owl-carousel').owlCarousel({
    stagePadding: 0,
    items: 1,
    loop:true,
    margin:0,
    singleItem:true,
    nav:true,
    navText: [
        "<i class='fa fa-caret-left'></i>",
        "<i class='fa fa-caret-right'></i>"
    ],
    dots:true
});
body {
  padding: 0;
  margin: 0;
  font-family: Merriweather;
}

.owl-carousel:after {
  content: "";
  display: block;
  position: absolute;
  width: 8%;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: 0;
  pointer-events: none;
  background: url() no-repeat center 50%;
  background-size: 100% auto;
}
.owl-item {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate(0) scale(1.0, 1.0);
}
.item {
  opacity: 0.4;
  transition: .4s ease all;
  transform: scale(.6);
}
.item img{
  display: block;
  min-width: 100%;
  width: auto;
  height: auto;
}
.active .item {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  transform: scale(1);
  max-height: 680px !important;
}

/* content and cta */
.inner {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  text-align: center;
}
/* END CTA Button*/

/* Title Animation */
.reveal-text,
.reveal-text:after {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-duration: 600ms;
          animation-duration: 600ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.reveal-text {
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  color:#ffe221;
  text-shadow: 1px 1px #000000;
  white-space: nowrap;
}
.reveal-text:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #8ce2ea;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  pointer-events: none;
}
.active .reveal-text{
    -webkit-animation-name: reveal-text;
          animation-name: reveal-text;
}
.active .reveal-text:after {
    -webkit-animation-name: revealer-text;
          animation-name: revealer-text;
}
/* Before animation */
@-webkit-keyframes reveal-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes reveal-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

/* After animation */
@-webkit-keyframes revealer-text {
  0%, 50% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  60%, 100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@keyframes revealer-text {
  0%, 50% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  60%, 100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
/* Title Animation END */

/* OWL-Carousel Navigation*/
.owl-nav div {
  position: absolute;
  top: 45%;
  color: #cdcbcd;
}
.owl-nav i {
  font-size: 52px;
}
.owl-nav .owl-prev {
  left: 5% !important;
}
.owl-nav .owl-next {
  right: 5% !important;;
}
.owl-prev:hover, .owl-next:hover{
  text-shadow: 2px 2px #000000;
  transform: translateX(10%);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.owl-prev:hover{
  text-shadow: -2px 2px #000000;
  transform: translateX(-10%);
}
.owl-theme .owl-dots .owl-dot span{
  width: 0;
}
.owl-dots {
  text-align: center;
  position: fixed;
  margin-top: 10px;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.owl-dot {
  border-radius: 50px;
  height: 10px;
  width: 10px;
  display: inline-block;
  background: rgba(127,127,127, 0.5);
  margin-left: 5px;
  margin-right: 5px;
}
.owl-dot.active {
  background: rgba(127,127,127, 1);
}
/* END OWL-Carousel Navigation*/

@media only screen and (max-width:768px) {
  #full-width{
    padding: 0;
  }
  .item{
    transform: scale(0);
  }
  .item img{
    height: 400px !important;
  }
  .active .item img{
    max-height: 400px;
  }
}
@media only screen and (max-width:420px) {
  .item img{
    height: 200px !important;
  }
  .active .item img{
    max-height: 200px;
  }
}
<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Tanya-UI-Kit-3 Full Page Width</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
  </head>
<body>
<div class="owl-carousel owl-theme owl-loaded owl-drag">
  <div class="item">
  <img src="https://bboyjplus.files.wordpress.com/2014/04/bboying-steps-2043304.jpg" alt="" />
  <div class="inner">
      <div class="row row-content">
          <div class="col-md-12">
              <div class="headline-wrap">
                  <h1><span class="reveal-text">H1 TITLE</span></h1>
                  <h2><span class="reveal-text">H2 TITLE</span></h2>
              </div>
          </div>
      </div>
      <div class="row row-cta">
          <div class="col-md-12 cta-wrap">
              <a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
          </div>
      </div>
    </div>
  </div>
  <div class="item">
  <img src="https://i.vimeocdn.com/video/550760587.jpg?mw=1920&mh=1080&q=70" alt="" />
  <div class="inner">
      <div class="row row-content">
          <div class="col-md-12">
                  <div class="headline-wrap">
                  <h1><span class="reveal-text">H1 TITLE</span></h1>
                  <h2><span class="reveal-text">H2 TITLE</span></h2>
              </div>
          </div>
      </div>
      <div class="row row-cta">
          <div class="col-md-12 cta-wrap js-cta-wrap">
              <a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
          </div>
      </div>
    </div>
  </div>  
</div>

<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
  </body>
</html>

谢谢，那个有效！我应该怎么做才能将所有图像设置为相同的高度（同时保持完整宽度）？ - Etep
1
@PeteKang请确保所有图像使用相同的纵横比，或将它们设置为背景图像。 - Michael Coker
1
@PeteKang 如果图像具有不同的宽高比，并且您强制设置全宽和特定高度，则图像将失真，我假设您不希望出现这种情况。 - Michael Coker
0

如果还有人在处理这个问题，可以在声明你的轮播器时使用jquery中的autoWidth: true，这样它会自动设置宽度并遵循你自己的宽度大小。请参阅Owl Carousel 2的文档：Owl Carousel Auto Width

0
我在升级到这个owl-carousel的第3版时遇到了同样的问题。经过几次尝试，我发现在CSS中添加一行代码对我很有帮助。
 .owl-carousel .owl-stage-outer{
    transform:translate3d(0,0,0)
  }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接