Flexslider 2 vertical thumbnail navigation

问题

I am developing a site using the Flexslider 2. I am trying to get the thumbnail nav to work vertically instead of its default horizontal navigation.

The problem at the moment is it works but I am finding there are a lot of bugs in the vertical nav working.

Has anyone tried this yet?

Any help would be much appreciated.

Cheers, Mark

回答1:

This doesn't really seem to be working in Flexslider as of 1/9/13, however I've gotten it to work for the most part. It seems that it's only designed to have 1 item in the slider at a time (which for many of us, doesn't quite cut it); maxItem and minItem don't work for vertical sliders yet.

The first step, is of course, to make sure that the direction is set to vertical, in the params:

direction: "vertical",

Now, .flex-viewport will automatically have its height set to whatever height your <li> elements are set to... But you can force it with something like:

.flex-viewport { height: 650px !important;}

Just set it to whatever size is needed to accommodate as many slides as you need to show in the carousel. Then style the rest as needed. But yes, there are still bugs... I've seen these recommended but can vouch for neither:

http://caroufredsel.dev7studios.com/
jquery.vticker.1.4

回答2:

You can do this with some CSS rejigging. Not sure about doing this responsive all the way down, but for a large size this might be a good starting place. You'll also want to put a clearfix on .flexslider.

.flex-viewport {width:80.5% !important;float:left;}
.flex-control-thumbs {width:19% !important;float:right;margin:0 !important;}
.flex-control-thumbs li {width:auto !important;}

回答3:

the solution is to rotate current horizontal navigation.
simply add this style to navigation <ul>(default '.flex-direction-nav')

.flex-direction-nav{
    /*ROTATION*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -o-transform: rotate(90deg);

    /*POSITIONING*/
    display: inline-block;
    vertical-align: text-top;
    text-indent: 0px;
    width: 51%;
    margin-top: -24%;
}

to reverse sliding direction change "90" to "-90".
Not sure for all browsers

回答4:

You can actually set your direction to vertical first, like so:

direction: "vertical",

And the force no float on the #carousel li (and add a bit of margin bottom to separate the thumbnails):

#carousel li {
    float: none!important;
    margin-bottom: 10px;
}

回答5:

I've raised a PR which goes some way to resolve these bugs. It isn't fully tested but it might be a good starting point. https://github.com/woothemes/FlexSlider/pull/1235

You must specify the itemWidth option correctly.

来源：https://stackoverflow.com/questions/11940549/flexslider-2-vertical-thumbnail-navigation

标签

jquery

slideshow

carousel

flexslider