Vertical and horizontal slides in flexslider

Question

im trying to implement flexslider slides with vertical and simultaneous li by slide like carousel with fade effect but i cant find the correct behavior. My code:

<div class="flexslider">
<ul class="slides">
    <?php
    while ($reg = mysql_fetch_array($sql)){
        echo "<li> //VERTICAL
                <span>".$reg['title']."</span>
                <ul class=\"work\"> //HORIZONTAL
                    <li>
                        <img src=\"".$reg['title']."/images/01.jpg\" />
                    </li>
                    <li>
                        <img src=\"".$reg['title']."/images/02.jpg\" />
                    </li>
                    <li>
                        <img src=\"".$reg['title']."/images/03.jpg\" />
                    </li>
                </ul>
            </li>";
    }
    ?> 
</ul>

and the JS

<script type="text/javascript"> 
$(window).load(function() {     
    $('.flexslider').flexslider({
        animation: "fade",
        animationLoop: false
    });
});
</script>

The example

What am I doing wrong?

If you mean to use multiple flexsliders, i just want a single query... thanks you — santyas, May 17 '13 at 14:23
No, only fade. The first group of li, then the next and etc. I apologize for my english — santyas, May 17 '13 at 14:45
You want each `ul` to be an horizontal carrousel and the `ul` set to be a vertical carrousel, is this it? — Henrique Barcelos, May 17 '13 at 14:48
Only the first ul with class .slides, this contains li (each of the instances). And these have their ul-li (without effect) only horizontal images. — santyas, May 17 '13 at 14:59

score 3 · Answer 1 · answered May 17 '13 at 15:04

3

As far as I understood, you want something like this:

$('.flexslider').flexslider({
    animation: "fade",
    direction: "vertical",
    animationLoop: false
});

If the inner images aren't animated, this should do it.

answered May 17 '13 at 15:04

Henrique Barcelos

7,670
1
41
66

Thank you but with fade effect all li are hidden by css of flexslider, i tried to edit the default css (auto display and margin-right) but the appearance is ugly. I think its not possible... in the url update an image that represents what i want. – santyas May 17 '13 at 15:33
You want more than one `li` to be displayed at once? – Henrique Barcelos May 17 '13 at 15:36
Try to upload your current HTML+JS to some place and post the link. – Henrique Barcelos May 17 '13 at 15:37
Exactly, 3 li. Next then 3 more, and etc. OK, in minutes – santyas May 17 '13 at 15:42
Here http://macrinicomunicacion.com/test/2013/flexslider_stackoverflow.zip Thank you – santyas May 17 '13 at 16:06
No, not on a zip, a place from I can access it from my browser. Like, get the generated HTML and put somewhere, or use jsfiddle. – Henrique Barcelos May 17 '13 at 16:19
Hello again, i apologize for delay. Here we go http://jsfiddle.net/santyas/dpJTL/ thank you! – santyas May 21 '13 at 15:50

Vertical and horizontal slides in flexslider

1 Answers1