Как создать навигационную стрелку в карусели Сова - PullRequest
Новая
       24

Как создать навигационную стрелку в карусели Сова

0 голосов
/ 15 марта 2019

Я изо всех сил пытаюсь реализовать самые основные функции Owl Carousel. В моей карусели пользователь может только просматривать слайды, выделив и удерживая одно изображение и перетаскивая его. это не дает пользователю никаких намеков на то, что есть больше изображений, которые они могут просматривать и перетаскивать. Все, что я хочу, это поставить стрелку «предыдущий / следующий», чтобы люди могли щелкнуть стрелку и просмотреть другие изображения в карусели. Но я изо всех сил пытаюсь сделать это, вероятно, потому, что карусель реализована сложным образом.

Мой сайт на 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 - в нижнем колонтитуле.

Редактировать: я установил значение 0 для навигации в файле JavaScript. Теперь стрелка появилась. Но они появились в центре карусели. Как разместить их в правильном месте, то есть предыдущая стрелка на левой стороне карусели и следующая стрелка на правой стороне карусели. 

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
};

1 Ответ

1 голос
/ 15 марта 2019

Я приведу вам пример, но я использовал сову карусель 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;
}
...