1

I am using the following modules: Flexslider module (version flexslider 2.2), FlexSlider Views Slideshow Module and Views, in Drupal 7.

I build the slideshow, and define the Direction Nav (prev / next).

when I looked at the demo of the flexslider, I saw that these is a transition to the arrows when they are appearing and disappearing- it looks they are coming from the sides when I hover, and they going out when I stop hover.

unfortunately, I don't see any transition on my slider, and the the arrow just appear and disappear.

When I checked, I notice that the problem is that when I stop hovering, and then immediately hover again, I see that the transition is in fact happening, but it's only visible if I hover immediately again.

Does someone know what is the problem and can you help me solve this issue?

here is the direction nav code:

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }        

/* Direction Nav */
    .flex-direction-nav {*height: 0;}
    .flex-direction-nav a  { display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
    .flex-direction-nav .flex-prev { left: -50px; }
    .flex-direction-nav .flex-next { right: -50px; text-align: right; }
    .flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
    .flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
    .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
    .flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; }
    .flex-direction-nav a.flex-next:before  { content: '\f002'; }
5
  • How is it a Drupal question? Flexslider is not a Drupal theme, no .info file in it's zipball.
    – Mołot
    Dec 17, 2013 at 12:33
  • I am using only Drupal Modules. And the problem is that this transition not working only in Drupal, and maybe (I am not sure) because of the integration with views. (I edited the question - please find the links there).
    – EB84
    Dec 17, 2013 at 13:12
  • So you tested and it works with pure HTML+JS+CSS Flexslider OK and only fails with Drupal?
    – Mołot
    Dec 17, 2013 at 13:13
  • 1
    Exactly. The demo working perfectly (this is how I discover I supposed to have this transition). On Drupal, the transition has the problem I described in my question.
    – EB84
    Dec 17, 2013 at 13:15
  • 1
    This question appears to be off-topic because it is about a bug in an module.
    – Letharion
    Dec 27, 2013 at 16:03

1 Answer 1

1

I see the same issue sometimes. When I look at my local direction anchors, they are display:none by default, but the WooThemes example they are display:block. Also, obviously, the opacity and left/right css3 transitions don't work.

In Chrome you can test the :hover selector on the .flexslider element.

I have seen this work properly in some sites.

It looks like there's a responsive breakpoint at 860px that you need to consider, so I placed these styles at min-width:861px. If you make these styles the default, the arrows will always be visible under 860px. This is why I put the styles at 861 and above.

Anyway, my approach to 'fixing' this was to simply reinforce the display, opacity, left/right, and transition settings in my theme CSS. Not sure if all of this is necessary, but it does work :)

/** Media Queries: min 861 only Flexslider
------------------------------*/
@media (min-width: 861px) {
    .flex-direction-nav .flex-prev {
        -webkit-transition-property:left, opacity;
        -moz-transition-property:left, opacity;
        -o-transition-property:left, opacity;
        transition-property:left, opacity;
        -webkit-transition-duration:0.3s;
        -moz-transition-duration:0.3s;
        -o-transition-duration:0.3s;
        transition-duration:0.3s
    }
    .flex-direction-nav .flex-next {
        -webkit-transition-property:right, opacity;
        -moz-transition-property:right, opacity;
        -o-transition-property:right, opacity;
        transition-property:right, opacity;
        -webkit-transition-duration:0.3s;
        -moz-transition-duration:0.3s;
        -o-transition-duration:0.3s;
        transition-duration:0.3s
    }
    div.flexslider .flex-direction-nav a {
        display:block
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.