CODEWITHSUNDEEP
jquerybxslider
qinHaiXiang
qinHaiXiang

Reputation: 6419

How to control the vertical direction of the slider in Bxslider?

I am using the BxSlider which is a Jquery plugin on my web page. I set the slide mode to "vertical",but the default slide direction is moving from bottom to top,but I want to change it to move from top to bottom. But I could not figure it out.Any advice would be greatly appreciated

Upvotes: 1

Views: 4169

Answers (3)

HBH
HBH

Reputation: 1

You can set direction of auto show slide transitions (autoDirection: 'prev')

$('.bxslider').bxSlider({  
    mode: 'vertical',  
    slideMargin:20,  
    minSlides: 4,  
    maxSlides: 4,  
    moveSlides: 1,  
    auto: true,  
    autoDirection: 'prev' /* <- */
});

Upvotes: 0

Bryce Wilson
Bryce Wilson

Reputation: 51

You can set the positioning of the slider arrows using positioning. For example we set the slider 'arrow' positioning to absolute, prev arrow top, next arrow bottom.

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

For this you have to change the core code of this plugin

In Plugin

var setSlidePosition = function(){
    // if last slide, not infinite loop, and number of children is larger than specified maxSlides
    if(slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop){
        if (slider.settings.mode == 'horizontal'){
            // get the last child's position
            var lastChild = slider.children.last();
            var position = lastChild.position();
            // set the left position
            setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.width())), 'reset', 0);
        }else if(slider.settings.mode == 'vertical'){
            // get the last showing index's position
            var lastShowingIndex = slider.children.length - slider.settings.minSlides;
            var position = slider.children.eq(lastShowingIndex).position();
            // set the top position
            setPositionProperty(-position.top, 'reset', 0);//Change this line
        }
    // if not last slide
    }else{
        // get the position of the first showing slide
        var position = slider.children.eq(slider.active.index * getMoveBy()).position();
        // check for last slide
        if (slider.active.index == getPagerQty() - 1) slider.active.last = true;
        // set the repective position
        if (position != undefined){
            if (slider.settings.mode == 'horizontal') setPositionProperty(-position.left, 'reset', 0);
            else if (slider.settings.mode == 'vertical') setPositionProperty(-position.top, 'reset', 0);
        }
    }
}

Change line:

setPositionProperty(-position.top, 'reset', 0);

To

setPositionProperty(position.top, 'reset', 0);

Then Try

Upvotes: 0

Related Questions