如何在 Owl 轮播中创建导航箭头

Question

我正在努力实现 Owl 轮播的最基本功能。在我的轮播中，用户只能通过 select 浏览幻灯片并按住一张图片并拖动。它没有向用户提示他们实际上可以浏览和拖动更多图像。我只想放置一个上一个/下一个箭头，以便人们可以单击箭头并在轮播中查看更多图像。但我很难做到这一点，可能是因为旋转木马的实现方式很复杂。

我的网站在 Wordpress 上，但 Owl 轮播插件尚未使用。它是手动实施的。轮播中的图像是从数据库中获取的。

这就是轮播获取图像的方式。文件名shortcode.php

function carousel_register( $atts, $content = null ) {

extract(shortcode_atts(array(
  'group_id' => ''
), $atts));

if(isset($group_id)){
    $to_add = '?g='.$group_id[0];
}else{
    $to_add = '';
}



$output = '<section id="carousel" class=""><div class="container" align="center"><h2>Simply Choose Your Agent</h2><div id="agents-carousel" class="agents-carousel">';

foreach ($data_json['data'] as $k => $v) {

        if ($v['onlinestatus'] == 1) {
            $online = "Online";
        }
        if ($v['onlinestatus'] == 0) {
            $online = "Offline";
        }

        $name = preg_replace("/[^A-Za-z0-9]/", "", $v['display_name']);

        $output .= '<div class="item"><a href="'.get_site_url().'/'.strtolower($v['display_name']).'"><div class="image-carousel"><img src="'.get_site_url().'/profile-image/medium/'.$v['id_user'].'/'.$name.'.png"></div></a></div>';
}
$output .='</div><div class="cta"><a href="'.get_site_url().'/our-readers/">discover all readers</a></div></div></section>';
return $output;

   }


add_shortcode( 'carousel', 'carousel_register' );

有将近 25 张图片，仅显示其中 5 张。可以通过抓住它们来拖动它们。我只想添加导航箭头和点。

.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
 .owl-carousel{
    display: none;
    position: relative;
    width: 100%;
   -ms-touch-action: pan-y;}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
   -webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -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;}
   .owl-carousel .owl-item{
    float: left;}
.owl-controls .owl-page, .owl-controls .owl-buttons div{
    cursor: pointer;}
.owl-controls {
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.grabbing {
    cursor:url(grabbing.png) 8 8, move;}
.owl-carousel .owl-wrapper, .owl-carousel .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);}

页眉中引用了 css 文件，页脚中引用了 javascript 文件。

编辑：我在 javascript 文件中为导航设置了值 0。现在箭头已经出现了。但是它们出现在旋转木马的中央。如何将它们放在正确的位置，即旋转木马左侧的上一个箭头和旋转木马右侧的下一个箭头。

a.fn.owlCarousel.options = {
    items: 5,
    itemsCustom: !1,
    itemsDesktop: [ 1199, 4 ],
    itemsDesktopSmall: [ 979, 3 ],
    itemsTablet: [ 768, 2 ],
    itemsTabletSmall: !1,
    itemsMobile: [ 479, 1 ],
    singleItem: !1,
    itemsScaleUp: !1,
    slideSpeed: 200,
    paginationSpeed: 800,
    rewindSpeed: 1e3,
    autoPlay: !0,
    stopOnHover: !1,
    navigation: !0,
    navigationText: [ "prev", "next" ],
    rewindNav: !0,
    scrollPerPage: !1,
    pagination: !0,
    paginationNumbers: !1,
    responsive: !0,
    responsiveRefreshRate: 200,
    responsiveBaseWidth: b,
    baseClass: "owl-carousel",
    theme: "owl-theme",
    lazyLoad: !1,
    lazyFollow: !0,
    lazyEffect: "fade",
    autoHeight: !1,
    jsonPath: !1,
    jsonSuccess: !1,
    dragBeforeAnimFinish: !0,
    mouseDrag: !0,
    touchDrag: !0,
    addClassActive: !1,
    transitionStyle: !1,
    beforeUpdate: !1,
    afterUpdate: !1,
    beforeInit: !1,
    afterInit: !1,
    beforeMove: !1,
    afterMove: !1,
    afterAction: !1,
    startDragging: !1,
    afterLazyLoad: !1
};

Answer 1

我给你举个例子，但我用的是 owl carousal 2

这里

var heroSlider = $('#header-slider');
heroSlider.owlCarousel({    
    margin:0,
    autoplay:true,
    autoplayTimeout:4000,
    smartSpeed:2000,
    dots:true,
    loop:true,      
    responsiveClass:true,
    items:1,
    rtl: true,
    nav: true,
     navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],

});

为了正确的位置，我们需要设置 arrows.By 样式的位置。

像这样

.owl-prev {
    left: 0;
    position: absolute;
}

.owl-next {
    position: absolute;
    right: 0;
}

如何在 Owl 轮播中创建导航箭头

How to create navigation arrow in Owl carousel

javascript

css

wordpress

jquery

owl-carousel