javascript - Vertical and horizontal slides in flexslider - Stack Overflow

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?

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?

• javascript
• html
• list
• flexslider

Share Follow edited May 17, 2013 at 14:04 Henrique Barcelos 7,90011 gold badge4444 silver badges6868 bronze badges asked May 17, 2013 at 14:02 santyassantyas 9611 gold badge22 silver badges1212 bronze badges 6

• See the docs: woothemes./flexslider – Henrique Barcelos Commented May 17, 2013 at 14:09
• If you mean to use multiple flexsliders, i just want a single query... thanks you – santyas Commented May 17, 2013 at 14:23
• It seems like you can't fade and slide at the same time... – Henrique Barcelos Commented May 17, 2013 at 14:30
• No, only fade. The first group of li, then the next and etc. I apologize for my english – santyas Commented May 17, 2013 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 Commented May 17, 2013 at 14:48

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 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.