Full Width - Owl Carousel 2 issue

html css owl-carousel owl-carousel-2

44,867

Set items: 1, stagePadding: 0 on the carousel, body { margin: 0; }, removed your styling for .owl-stage (didn't do anything), and removed the max-height you had set on the images, which would distort them with min-width: 100% specified.

$('.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>

44,867

Author by

Etep

Just trying to learn here

Updated on June 16, 2020

Comments

Etep almost 4 years

Attempting to create a full-width owl-carousel but I keep seeing this on .owl-stage when I inspect-element on chrome:

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

Initially I tried to just overwrite padding on .owl-stage, but the padding stayed the same.

I also tried setting min-width for all images to 100% and 100vw, but that hasn't worked either.

Is there anyway to adjust the padding on .owl-stage?

This is my code:

$('.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>