В Woothemes Flexslider 2 отсутствуют навигационные кнопки направления

Я пытался найти ответ относительно «невидимых навигационных функций» для flexslider v2.0, но я не нашел ничего, что отвечало бы на мой точный вопрос в Интернете. Может быть, это потому, что добавление базового слайдера на вашу страницу должно быть легкой задачей. знак равно

В любом случае, я надеюсь, что кто-нибудь сможет пролить свет на причину, по которой мой ползунок не показывает элементы управления «следующий» и «предыдущий».

Я выполнил три шага, предоставленных woothemes, а также добавил файл bg_direction_nav.png в папку «Изображения».

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

Вот css:

.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 1; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 1 !important; right: 5px;}
.flexslider:hover .flex-prev {opacity: 1 !important; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

Пожалуйста, дайте мне знать, если я должен предоставить что-нибудь еще.


person Jovan Laurencio    schedule 20.04.2013    source источник


Ответы (2)


Та же проблема. Обнаружено, что они заменили графический файл .png файлом шрифта. Итак, скопируйте каталог шрифтов, включенный в загрузку, на свой сервер. Переназначить путь в CSS. Мне пришлось добавить '/' к src:url('fonts/flexslider-icon.eot'); перед 'шрифтами...' Итак: src:url('/fonts/flexslider-icon.eot'); Теперь работает как шарм.

person user2969747    schedule 09.11.2013

При вызове JS попробуйте directionNav: true

$('#mainslider').flexslider({  
 directionNav: true
});
person hurrahfox    schedule 21.05.2013