Question

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

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

这是轮播获取图像的方式。文件名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

我举一个例子，但是我使用了猫头鹰旋转木马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>"],

});

要确定正确的位置，我们需要设置箭头的位置。通过设置其样式。

类似的东西

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

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

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

1 个答案: