Как сделать видными кнопку next и prev в Owl carusel?

Question

[sanke46]

Ребята вот сижу не могу настроить нормально Owl carusel !!!!
Задача поставить : next и prev ;
Подключил next и prev в jquery коде , но без успешно. Помогите найти ошибку или поправить меня

Вот сайт на котором все это делаю : test.apple-access.ru/seo

var carousel = $("#product-item");
  carousel.owlCarousel({
    navigation:true,
       navText: ["<img src='img/close.png'>","<img src='img/close.png'>"]
  });

var carousel = $("#partner");
  carousel.owlCarousel({
    navigation:true,
    navText: ["<img src='img/close.png'>","<img src='img/close.png'>"]
  });

Answer 1

[Сергей Тряпкин]

Откройте в браузере консоль и посмотрите что он там пишет.
И попробуйте не писать вот так.

Comments

[sanke46]

я убрал , эту ошибку но проблема не ушла , там почему то стоит display none ;
не получается проказать его через CSS

[Сергей Тряпкин]

Да, прошу прощения, увидел это и забыл про картинки :)

[Сергей Тряпкин]

Попробуйте использовать кастомные евенты.
Как вариант решение вашей проблемы.
owlgraphic.com/owlcarousel/demos/custom.html

Answer 2

[Пётр Попов]

А почему Вы пишете navText? На странице плагина (раздел "Customizing") такого свойства нет. Но есть navigationText. Попробуйте его.

Answer 3

[freeman0204]

Я не знаю откуда вы взяли то что написано выше. Я посмотрел на сайте слайдера классы и прописал свои стили. Убедитесь что в самом скрипте есть строка navigation: true

#owl-one .owl-prev {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAfCAYAAADupU20AAAAn0lEQVQ4T7XVwRGAIAwEQOjLvxXYhH+rsg1nbMvw0AEJJHciM/dkow8uMYSwSU7JIYFPlBuTZJcsDJKAdGjkBmgkByjkDcCIBkBIC3AjPcCFWICJeIAu4gWaCAKoCApUCAMUCAskZJXMLPC8XgYonj4KVL2BAGrpeIFmY3mAbt1ZgNmVv/WBOfleIMM70T1Z+wL4ckKGbCZqcv4Ln7bzBd6XO0k8LxCWAAAAAElFTkSuQmCC);
width: 16px;
height: 31px;
position: absolute;
right: 20px;
top: calc(50% - 16px);
}

#owl-one .owl-next {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAfCAYAAADupU20AAAAoElEQVQ4T6XUuw2AMAxFUTIWEmuwGktQUdIzGHYRlK/t90CKRHMPkZCdFv7ZJF0T2Wt8ytkZ4IsFeFCgivX2CNDFCDCMo8A0jgBm7AFubAGheAaE4xEAxS0AxyVAxRmg4wxc8nLLOZjJ1Fn4fQP9MI2U00gh7TjDyGgfQMhsoYQRayOFEG+luYgHuL84AphIFJgiCDBEUKBDGKBCWCAj6wuqmjmCScdd/QAAAABJRU5ErkJggg==) no-repeat;
width: 16px;
height: 31px;
position: absolute;
left: 20px;
top: calc(50% - 16px);
}