在 Wordpress 中自定义 Owl 轮播

Question

我正在使用 Morrison Hotel Wordpress 主题。它将 Owl 轮播考虑到中页轮播。

目前，我有一张照片居中，另外两张照片在两侧，如您在以下屏幕截图中所见：

Carousel screen cap

不过，我想要一张图片。当然，我希望图像继续滚动，但一张一张。

主题加载了 morrison-hotel.min.js 压缩版本，我在这个文件中找到了对 owl 轮播的调用：

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")}}})}}

如何更改它以执行我想要的操作？你有什么想法，或者任何线索吗？我是初学者所以对你来说显而易见的东西对我来说不一定显而易见，如果你能解释清楚那就太好了。谢谢

感谢您的宝贵时间和帮助。

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>

Answer 1

看起来 js 使用 t.data("cols") 作为变量来设置大于 768px 的设备上 'items' 的数量。您还可以看到它在较低宽度时设置为 1。这对我来说，意味着有一个可以设置的变量，但是查看说明视频（在 Themeforest 上找到主题），可能没有在您的主题中设置它的地方。

您可以尝试编辑 js 以将 items:1 设置为更宽的屏幕宽度：768:{items:1}

编辑：请注意，这可能会将您网站上的所有轮播更改为 1 个项目。

您是否联系过主题开发者，我的经验是他们通常很擅长提供这样的帮助？

在 Wordpress 中自定义 Owl 轮播

Customize Owl Carousel in Wordpress

javascript

wordpress

carousel