Owl Carousel Transform Text Settings

Question

So I have an owl carousel on a friend's website that has a setting turned on that enlarges previous client names in the center as they scroll past the user on the carousel. I'm trying to turn this customisation off as the original developer has implemented it quite badly.

Here is the code from owl-theme.css

     /**
     * Owl Carousel v2.2.1
     * Copyright 2013-2017 David Deutsch
     * Licensed under  ()
     */
    .owl-theme .owl-dots,
    .owl-theme .owl-nav {
        text-align: center;
        -webkit-tap-highlight-color: transparent
    }
    
    .owl-theme .owl-nav {
        margin-top: 10px
    }
    
    .owl-theme .owl-nav [class*=owl-] {
        color: #FFFFFF;
        font-size: 14px;
        margin: 5px;
        padding: 4px 7px;
        ;
        display: inline-block;
        cursor: pointer;
        border-radius: 3px
    }
    
    .owl-theme .owl-nav [class*=owl-]:hover {
        color: #FFF;
        text-decoration: none
    }
    
    .owl-theme .owl-nav .disabled {
        opacity: .5;
        cursor: default
    }
    
    .owl-theme .owl-nav.disabled + .owl-dots {
        margin-top: 10px
    }
    
    .owl-theme .owl-dots .owl-dot {
        display: inline-block;
        zoom: 0
    }
    
    .owl-theme .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        display: block;
        -webkit-backface-visibility: visible;
        transition: opacity .2s ease;
        border-radius: 30px
    }

And here is owl.carousel.css

  /* 
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
  z-index: 0;
}
.owl-carousel .owl-animated-out {
  z-index: 0;
}
.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* 
 *  Owl Carousel - Auto Height Plugin
 */
.owl-height {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

/* 
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}
.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
  display: none;
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}
.owl-carousel.owl-text-select-on .owl-item {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
.owl-carousel .owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/* 
 *  Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-item img {
  transform-style: preserve-3d;
}

/* 
 *  Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}
.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transition: scale 100ms ease;
  -moz-transition: scale 100ms ease;
  -ms-transition: scale 100ms ease;
  -o-transition: scale 100ms ease;
  transition: scale 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
  -webkit-transition: scale(1.3, 1.3);
  -moz-transition: scale(1.3, 1.3);
  -ms-transition: scale(1.3, 1.3);
  -o-transition: scale(1.3, 1.3);
  transition: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}
.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
}

Thank you so much!

Look it up: https://stackoverflow.com/questions/44605729/inspect-element-without-right-clicking-in-chrome#:~:text=You%20can%20press%20Ctrl%20%2B%20Shift,selected%20in%20the%20developer%20panel. — prettyInPink, Mar 23 '22 at 07:30
It's going to be very difficult to know the answer without seeing the .js and .css files you have listed. Any chance you can edit the post and include that code? For reading and working out the problem, the not-minified `owl-carousel.js` would be better. — Cutey from Cute Code, Mar 23 '22 at 07:52
Thank you. I've just added the CSS above. I'm usually fairly good with inspecting using Inspector and finding which classes to target, but I've not used Owl Carousel before and it's tricky to find what is having this effect. — cocktailsanddreams, Mar 23 '22 at 10:12
As I said you will need to inspect the element, to detect where the styles are coming from. Those are not default styles from this plugin. — prettyInPink, Mar 23 '22 at 13:17
If you have set ```center: true``` in your settings for the carousel, you must be looking for styles which contain the following classes ```.owl-item.active.center```. — prettyInPink, Mar 23 '22 at 13:19

score 0 · Answer 1 · answered Apr 02 '22 at 22:02

0

Find initialization script and disable animateOut and animateIn options. There is an example:

$('.owl-carousel').owlCarousel({
    animateOut: 'animationName', //REMOVE THIS STRING
    animateIn: 'animationName',  //AND THIS STRING
    ...
});

answered Apr 02 '22 at 22:02

Aleksandr Abramov

501
1
5
10

Owl Carousel Transform Text Settings

1 Answers1