CODEWITHSUNDEEP
jqueryflexslider
scorpio1441
scorpio1441

Reputation: 3098

FlexSlider 2: captions over image are shifting nav controls

Trying to configure FlexSlider same way it shows on the homepage of FlexSlider website. =)

http://www.woothemes.com/flexslider/

Which has captions over image using transparent background.

The following code works, except for the nav controls - they are shifted all the way down.

http://jsfiddle.net/aMDLP/1/

CSS:

#homepage-images img {
    display: block;
    height: 350px;
}

#homepage-images li {
    position: relative;
}

#homepage-images .flex-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 10px;
    color: white;
    background-color: rgba(0,0,0,0.5);
}

HTML:

<div id='homepage'>
  <div id='homepage-images' class='flexslider'>
    <ul class='slides'>
      <li><img src='content/homepage/images/1.jpg' alt=''><p class='flex-caption'>Some captions</p></li>
      <li><img src='content/homepage/images/2.jpg' alt=''><p class='flex-caption'>Some more captions</p></li>
    </ul>
  </div>
</div>

JS:

$(document).ready(function() {
    $('#homepage-images').flexslider({
        animation: 'slide',
        slideshowSpeed: 3000,
        controlsContainer: ".flex-container",
    });
});

Upvotes: 0

Views: 12399

Answers (1)

isherwood
isherwood

Reputation: 61114

You've set all LI elements to position: relative. Use more specific selectors:

http://jsfiddle.net/isherwood/aMDLP/2/

#homepage-images .slides li {
    position: relative;
}

Upvotes: 3

Related Questions