重新定位猫头鹰旋转木马内的导航按钮答案

【问题标题】：Reposition nav buttons inside owl carousel重新定位猫头鹰旋转木马内的导航按钮
【发布时间】：2018-03-20 16:53:46
【问题描述】：

我正在使用 owl carousel，我想用箭头更改默认导航按钮“prev next”，并将它们放置在 carousel 的右侧和左侧。看图：

这里是js代码：

< script >
  $(document).ready(function() {
    $('.owl-carousel').owlCarousel({
      autoplay: true,
      autoplayTimeout: 3000,
      smartSpeed: 900,
      autoplayHoverPause: false,
      loop: true,
      margin: 30,
      nav: false,
      dotsEach: true,
      touchDrag: true,
      dotData: true,
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 1
        },
        1000: {
          items: 1

        }
      }

    })
  }) <
  /script>

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

请使用代码 sn-p 功能在Minimal, Complete, and Verifiable example 的问题中发布相关的 HTML 和 CSS。不要发布代码图像（不知道您的代码是否有代码，因为我看不到它）或指向您网站的链接，这会使问题对未来的用户无用，网站更改和/或可能包含不安全的材料、垃圾邮件或更糟（我们不知道）Why not to upload Images of Code when asking a Question

标签： javascript jquery html css owl-carousel

【解决方案1】：

将以下代码放入您的 css (style.css)：

.owl-nav .owl-prev,
.owl-nav .owl-next {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
}

.owl-nav .owl-next {
    left: auto;
    right: 0;
}

理论上应该可以的

【讨论】：