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

Итак, у меня есть совиная карусель, которая содержит три изображения. Я также добавил пользовательские навигационные стрелки (.png изображения) на левой и правой сторонах. Однако эти стрелки в настоящее время бесполезны, потому что я не могу найти способ заставить их переключаться между изображениями моей совиной карусели. Я искал бесконечно и не могу найти решение. Есть идеи?

7 31
html css3 jquery carousel

7 ответов:

Вам нужно включить навигацию и отредактировать navigationText:

> предполагая, что это version 1.3.2

owlgraphic.com/owlcarousel/#customizing

Примечание : похоже, что сайт для Owl 1.3 теперь не работает, поэтому вот раздвоенный пример Codepen.

$("#owl-example").owlCarousel({
  navigation: true,
  navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

> предполагая, что это version 2:

Https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav 

$("#owl-example").owlCarousel({
  nav: true,
  navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

Личное предложение: используйте Слик над Сова

83

Я сделал это с помощью css, т. е.: добавление классов для стрелок, но вы также можете использовать изображения.

Ниже приведен пример с fontAwesome:

JS: 

owl.owlCarousel({
    ...
    // should be empty otherwise you'll still see prev and next text,
    // which is defined in js
    navText : ["",""],
    rewindNav : true,
    ...
});

CSS 

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    font-family: 'fontAwesome';

}
.owl-carousel .owl-nav .owl-prev:before{
    // fa-chevron-left
    content: "\f053";
    margin-right:10px;
}
.owl-carousel .owl-nav .owl-next:after{
    //fa-chevron-right
    content: "\f054";
    margin-right:10px;
}

Использование изображений: 

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    //width, height
    width:30px;
    height:30px;
    ...
}
.owl-carousel .owl-nav .owl-prev{
    background: url('left-icon.png') no-repeat;
}
.owl-carousel .owl-nav .owl-next{
    background: url('right-icon.png') no-repeat;
}

Может быть, кто-то найдет это полезным :)

9

Создайте свою пользовательскую навигацию и дайте им классы, которые вы хотите, тогда вы готовы идти. все очень просто.

Давайте рассмотрим пример: 

<div class="owl-carousel">
      <div class="single_img"><img src="1.png" alt=""></div>
      <div class="single_img"><img src="2.png" alt=""></div>
      <div class="single_img"><img src="3.png" alt=""></div>
      <div class="single_img"><img src="4.png" alt=""></div>
</div>
		
<div class="slider_nav">
	<button class="am-next">Next</button>
	<button class="am-prev">Previous</button>
</div>

В вашем файле js вы можете сделать следующее: 

 $(".owl-carousel").owlCarousel({
    // you can use jQuery selector
    navText: [$('.am-next'),$('.am-prev')]
 
});
4

В owl carousel 2 Вы можете использовать Font-awesome иконки или любые пользовательские изображения в navText опции, как это: 

$(".category-wrapper").owlCarousel({
     items: 4,
     loop: true,
     margin: 30,
     nav: true,
     smartSpeed: 900,
     navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
});
2

Следующий код работает для меня насовиной карусели .

Https://github.com/OwlFonk/OwlCarousel 

$(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    navigation: true,
    navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});

Для OwlCarousel2

Https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html 

 $(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    nav: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
2

Мое решение -

NavigationText: ["", ""]

Полный код приведен ниже: 

    var owl1 = $("#main-demo");
    owl1.owlCarousel({
        navigation: true, // Show next and prev buttons
        slideSpeed: 300,
        pagination:false,
        singleItem: true, transitionStyle: "fade",
        navigationText: ["", ""]
    });// Custom Navigation Events

    owl1.trigger('owl.play', 4500);
1

Вы можете использовать комбинацию JS и SCSS/Fontawesome для кнопок Prev / Next.

В вашем JS (сюда входят только классы screenreader / accessibility с Zurb Foundation):

$('.whatever-carousel').owlCarousel({
    ... ...
    navText: ["<span class='show-for-sr'>Previous</span>","<span class='show-for-sr'>Next</span>"]
    ... ...
})

В вашем SCSS это: 

.owl-theme {

    .owl-nav {
        .owl-prev,
        .owl-next {
            font-family: FontAwesome;
            //border-radius: 50%;
            //padding: whatever-to-get-a-circle;
            transition: all, .2s, ease;
        }
        .owl-prev {
            &::before {
                content: "\f104";
            }
        }
        .owl-next {
            &::before {
                content: "\f105";
            }
        }
    }
}

Для семейства шрифтов FontAwesome я использую код вставки в заголовке документа: 

<script src="//use.fontawesome.com/123456whatever.js"></script>

Есть различные способы включить FA, strokes/folks, но я нахожу, что это довольно быстро, и поскольку я использую webpack, я могу почти жить с этим 1 дополнительным вызовом сервера js.

И чтобы обновить это - есть также эта опция JS для немного более сложных стрелок, все еще имея в виду доступность: 

$('.whatever-carousel').owlCarousel({
    navText: ["<span class=\"fa-stack fa-lg\" aria-hidden=\"true\"><span class=\"show-for-sr\">Previous</span><i class=\"fa fa-circle fa-stack-2x\"></i><i class=\"fa fa-chevron-left fa-stack-1x fa-inverse\" aria-hidden=\"true\"></i></span>","<span class=\"fa-stack fa-lg\" aria-hidden=\"true\"><span class=\"show-for-sr\">Next</span><i class=\"fa fa-circle fa-stack-2x\"></i><i class=\"fa fa-chevron-right fa-stack-1x fa-inverse\" aria-hidden=\"true\"></i></span>"]
})

Множество экранирующих там, используйте одиночные кавычки вместо этого, если это предпочтительно.

А в SCSS просто закомментируйте:: перед attrs: 

.owl-prev {
        //&::before { content: "\f104"; }
    }
    .owl-next {
        //&::before { content: "\f105"; }
    }
1