Search code examples
javascriptwordpresscarousel

Customize Owl Carousel in Wordpress

I am using the Morrison Hotel Wordpress theme. it takes Owl Carousel into account for the mid-page carousel.

Currently, I have one photo centered but 2 others on the sides, as you can see in the following screenshot:

Carousel screen cap

However, I would like to have a single image. Of course, I want the images to continue scrolling but one by one.

The theme loads the morrison-hotel.min.js compressed version and I found in this file the call to owl carousel:

carousel:function(){if(jQuery().owlCarousel){var t=e(".morrison-hotel-carousel");t.owlCarousel({center:t.data("center"),loop:!0,autoplay:!0,nav:!1,responsive:{0:{items:1},768:{items:t.data("cols")}}})}}

How do I change it to do what I want? Do you have an idea, or any clues please? I am a beginner so what seems obvious to you will not necessarily be obvious to me, if you can explain it clearly that would be great. Thank you

Thank you for your time and help.

carousel:function(){if(jQuery().owlCarousel){var t=e(".morrison-hotel-carousel");t.owlCarousel({center:t.data("center"),loop:!0,autoplay:!0,nav:!1,responsive:{0:{items:1},768:{items:t.data("cols")}}})}}
#page-carousel .owl-controls {
  display: none;
}

#page-carousel .has-booking-form .owl-controls {
  bottom: 4.5em;
}

#page-carousel img {
  filter: grayscale(0);
  transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#page-carousel .owl-item:hover img {
  filter: grayscale(1);
}

.no-js #page-carousel .morrison-hotel-carousel {
  overflow: hidden;
}

.no-js #page-carousel .morrison-hotel-carousel > div {
  display: none;
}

.no-js #page-carousel .morrison-hotel-carousel > div:nth-child(-n+3) {
  display: table-cell;
}

.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-item {
  position: relative;
  min-height: 1px;
  float: left;
  /*-webkit-backface-visibility: hidden;*/
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
  display: none;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
  cursor: pointer;
  cursor: hand;
  -webkit-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-drag .owl-item {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel.owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.owl-carousel.owl-rtl {
  direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
  float: right;
}

.owl-carousel .owl-controls {
  position: absolute;
  bottom: 2em;
  left: 0;
  right: 0;
  z-index: 5;
}

.owl-carousel .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.owl-carousel .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.owl-carousel .owl-dots .owl-dot span {
  width: 11px;
  height: 11px;
  margin: 5px 7px;
  background: #fff;
  display: block;
  -webkit-backface-visibility: visible;
  transition-duration: 0.2s;
  transition-property: opacity, background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 100%;
}

.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
  background: #c19c78;
}

/* No Js */

.no-js .owl-carousel {
  display: block;
}
<div id="page-carousel" wfd-id="76">
    <div class="owl-carousel morrison-hotel-carousel owl-theme owl-center owl-loaded" data-cols="2" data-center="true" wfd-id="77">
        <div class="owl-stage-outer" wfd-id="103">
            <div class="owl-stage" style="transition: all 0.25s ease 0s; width: 6013px; transform: translate3d(-1503px, 0px, 0px);" wfd-id="104">
                <div class="owl-item cloned" style="width: 429.5px; margin-right: 0px;" wfd-id="131">
                    <div wfd-id="132">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item cloned" style="width: 429.5px; margin-right: 0px;" wfd-id="129"><div wfd-id="130">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 429.5px; margin-right: 0px;" wfd-id="127"><div wfd-id="128">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 429.5px; margin-right: 0px;" wfd-id="125"><div wfd-id="126">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item active center" style="width: 429.5px; margin-right: 0px;" wfd-id="123"><div wfd-id="124">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180325_111721-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180325_111721-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180325_111721-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180325_111721-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180325_111721-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item active" style="width: 429.5px; margin-right: 0px;" wfd-id="121"><div wfd-id="122">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180623_092543-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180623_092543-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180623_092543-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180623_092543-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180623_092543-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 429.5px; margin-right: 0px;" wfd-id="119"><div wfd-id="120">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_142800-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_142800-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_142800-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_142800-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_142800-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 429.5px; margin-right: 0px;" wfd-id="117"><div wfd-id="118">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 429.5px; margin-right: 0px;" wfd-id="115"><div wfd-id="116">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103255-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103255-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103255-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103255-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103255-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 429.5px; margin-right: 0px;" wfd-id="113"><div wfd-id="114">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_151156-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_151156-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_151156-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_151156-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_151156-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 429.5px; margin-right: 0px;" wfd-id="111"><div wfd-id="112">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20171012_145725-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item" style="width: 429.5px; margin-right: 0px;" wfd-id="109"><div wfd-id="110">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/DSCF2250-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item cloned" style="width: 429.5px; margin-right: 0px;" wfd-id="107"><div wfd-id="108">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_103809-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div></div><div class="owl-item cloned" style="width: 429.5px; margin-right: 0px;" wfd-id="105"><div wfd-id="106">
                        <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-815x500.jpg" width="815" height="500" srcset="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-815x500.jpg 815w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-1140x699.jpg 1140w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-480x294.jpg 480w, https://hotel-restaurant-la-borie.fr/wp-content/uploads/2018/06/20180622_104005-320x196.jpg 320w" sizes="(max-width: 815px) 100vw, 815px" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="owl-controls" wfd-id="78">
            <div class="owl-nav" wfd-id="100">
                <div class="owl-prev" style="display: none;" wfd-id="102">prev</div>
                <div class="owl-next" style="display: none;" wfd-id="101">next</div>
            </div>
            <div class="owl-dots" style="" wfd-id="79">
                <div class="owl-dot" wfd-id="98">
                    <span wfd-id="99"></span></div>
                    <div class="owl-dot" wfd-id="96"><span wfd-id="97"></span></div>
                    <div class="owl-dot active" wfd-id="94"><span wfd-id="95"></span></div>
                    <div class="owl-dot" wfd-id="92"><span wfd-id="93"></span></div>
                    <div class="owl-dot" wfd-id="90"><span wfd-id="91"></span></div>
                    <div class="owl-dot" wfd-id="88"><span wfd-id="89"></span></div>
                    <div class="owl-dot" wfd-id="86"><span wfd-id="87"></span></div>
                    <div class="owl-dot" wfd-id="84"><span wfd-id="85"></span></div>
                    <div class="owl-dot" wfd-id="82"><span wfd-id="83"></span></div>
                    <div class="owl-dot" wfd-id="80"><span wfd-id="81"></span></div>
                </div>
            </div>
        </div>
    </div>

Solution

  • Looks like the js is using t.data("cols") as a variable to set the number of 'items' on devices greater than 768px. You can also see that it's set to 1 at lower widths. This to me, implies that there is a variable that can be set but looking at the instruction videos (found the theme on Themeforest), there may not be a place to set this in your theme.

    You could try edit the js to set items:1 for the wider screen width: 768:{items:1}

    Edit: Be careful here, this will likely change ALL carousels on your site to 1 item.

    Have you reached out to the theme developer, my experience is they're usually pretty good with providing assistance like this?