Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Full Width - Owl Carousel 2 issue

Tags:

html

css

owl-carousel

owl-carousel-2

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>
like image 211
Etep Avatar asked Mar 20 '17 17:03

Etep

People also ask

How do I make my owl carousel full width?

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. Thanks that worked!

How do I change the size of the picture on Owl carousel?

You have to give the width and height attributes to the img markup. Also, it will need to be display: block in order to ignores owl-carousel's 100% width. You could also include a wrapper around it, will work better.

How do you make owl carousel dynamically?

To use Owl Carousel, you'll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element . Class "owl-carousel" is mandatory to apply proper styles that come from owl.

1 Answers

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>
like image 147
Michael Coker Avatar answered Oct 18 '22 23:10

Michael Coker
Sign in to Comment

Related questions

AngularJS - animate div using changing scope variable
Black text - white when on black background [closed]
How to make two column to repeat for one item in the list?
Getting the title attribute using javascript
Rmarkdown : embed html file to ioslides
Total amount in ng-repeat
JavaScript: How to create unordered list from array?
Changing select option displayed text after it is selected but return when changing the selection
Show button only when view is responsive mobile size
Create a Custom Element with different sub-types
How can I disable HTML5 form validation in Angular2 apps?
Listen to serve response JavaScript
Fixed navigation bar but dropdown menu not visible anymore
Javascript - PHP's Substr() alternative on JavaScript
Carousel bootstrap 4 not working
Path to Images not Working in Angular 2
CSS translate with percentage causes blurred image
XPath for selecting all text nodes
d3 bar chart y axis ticks and grid lines above max value
Using * with :not in css

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!