全宽 - 猫头鹰旋转木马2期

时间：2017-03-20 17:25:22

标签： html css owl-carousel owl-carousel-2

尝试创建全角猫头鹰旋转木马，但是当我 inspect-element 时，我会继续在 .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>

2 个答案:

答案 0 :(得分：4)

在轮播上items: 1, stagePadding: 0设置body { margin: 0; }，移除.owl-stage的样式（没有做任何事情），并删除您设置的max-height图像会使指定的min-width: 100%扭曲它们。

＆＃13;
＆＃13; 
$('.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
});
＆＃13; 
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;
  }
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

当我升级到该猫头鹰轮播的第3版时，遇到了同样的问题。 经过几次试验后，我发现在CSS中添加一行对我有用。

 .owl-carousel .owl-stage-outer{
    transform:translate3d(0,0,0)
  }
相关问题
最新问题