Flexslider - стрелка навигации скрывается до наведения

В настоящее время используется Flexslider и хотелось бы иметь возможность скрывать стрелки навигации, которые в настоящее время появляются справа и слева от изображения, но затем они появляются, когда пользователь наводит курсор на изображение. Я помню, что это было адресовано на старом сайте - muffin, но не могу найти его на woothemes. Кто-нибудь знает, как изменить/изменить/добавить информацию для этого? Заранее спасибо.


javascript flexslider
person laura    schedule 13.03.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете изменить стрелки в css. Если вы хотите, чтобы стрелки всегда были видны, измените прозрачность. В настоящее время для него установлено значение 0, что делает его невидимым до наведения курсора (непрозрачность наведения установлена ​​на 1, что означает, что он полностью виден). Итак, вы хотите просто сделать его видимым так:

.flex-direction-nav a {opacity: 1;}

Если вы затем захотите изменить расположение стрелки, вам нужно будет просто изменить поле. В настоящее время установлено значение -20px. Если вы хотите, чтобы он отображался за рамками, вам нужно сделать что-то вроде этого:

.flex-direction-nav a {margin: -40px 0 0;}

Если бы вы сделали оба, ваш css выглядел бы так:

.flex-direction-nav a {opacity: 1; margin: -40px 0 0;}

Это сделало бы ваши стрелки всегда видимыми и появляющимися за пределами изображения (справа и слева от изображения, а не поверх изображения).

person lflores    schedule 01.08.2013

arrow_upward
0
arrow_downward

Вероятно, вы можете сделать это с помощью jQuery. В моем случае я использую FlexSlider для Drupal, поэтому я не могу обещать, что у вас будут такие же селекторы CSS, но я надеюсь, что этот код может дать общее представление :)

$(document).ready(function(){$("div.flexslider").hover(function() {
                            $("a.prev").show();
                            $("a.next").show();
                        },
                        function() {
                            $("a.prev").hide();
                            $("a.next").hide();
                        });})

Удачи!

P.S. Я забыл упомянуть, что вы должны установить селекторы тегов a в вашем CSS для display:none; по умолчанию.

person elshae    schedule 16.04.2012