CODEWITHSUNDEEP
jqueryflexslider
luqo33
luqo33

Reputation: 8361

Flexslider: how to adjust .flex-viewport to show several images instead of one?

I need to implement a Flexslider on a site and adjust its behaviour so that the slider is rotating vertically and is always showing six pictures instead of one.

There is no problem making Flexslider rotate vertically. However, I cannot make it display more than one picture.

I have noticed that .flex-viewport div is added to as a wrapper for all slides when in Flexslider is in "slide" mode.

The .flex-viewport has the height attribute added dynamically by JavaScript that is equal to the height of an image being displayed.

What is the way to make .flex-viewport show not one but several images.

Below is the effect I want to achieve. Thank you for help!

enter image description here

Upvotes: 0

Views: 1615

Answers (1)

luqo33
luqo33

Reputation: 8361

Sometimes not getting an answer straight aways is a good thing. This forced me to find my own solution.

Below I am pasting a code snippet that I used to dynamically generate the height of Flexslider'a .flex-viewport so that it is always equal to a selected element (.flexslider in my case).

The solution makes the vertical slider (and .flex-viewport) fully responsive as it adjusts its height on "ready", "load" and "resize" resize events. The vertical slider will always display 4 pictures.

I hope that it will help somebody.

jQuery(document).ready(function() {
    setTimeout(
    function() 
    {
        adjustLeaderHeight();

    }, 1000);

});

jQuery(window).load(function() {
    adjustLeaderHeight();

});

jQuery(window).resize(function() {
    adjustLeaderHeight();

});


/*
 * Function that adjusts the height of the rotating leader on the home page
 */
function adjustLeaderHeight() {
    var targetHeight = jQuery('.flexslider').css('height');
    targetHeight = parseInt(targetHeight, 10);
    jQuery('.flex-viewport').attr('style', 'height:' + targetHeight + 'px' + ' !important;' + '        overflow: hidden; position: relative');   
    jQuery('.rotating-leader img').attr('style', 'height: ' + targetHeight / 4 + 'px' + ' !important');
}

enter image description here

Upvotes: 1

Related Questions