Binding Flexslider to outside div?

Question

I was wondering if it's possible to bind Flexslider events with outside divs? I'm looking specifically for a way to bind an outside

or to change based on what picture is being viewed (a description to be precise.)

Is this possible?

Thanks in advance.

Answer 1

You can do it in this way:

HTML:

<div id="slider" class="flexslider">
    <ul class="slides">
        <li>
            <img src="slide-1.jpg" /><!-- Your image/slide -->
            <span>Description 1</span><!-- Your description -->
        </li>
        <li>
            <img src="slide-2.jpg" /><!-- Your image/slide -->
            <span>Description 2</span><!-- Your description -->
        </li>
    </ul>
</div>

CSS:

.slides {
    position: relative;
}

.slides li span {
    width: 500px;
    height: 40px;
    position: absolute;
    bottom: - 50px;
}

You can position the slide li span(description) where ever you want. Just change the positions of the element. If you want to place your description in relative to the bodythen remove position: relatviefrom the .slides.

Fiddle Example