Hide 'previous' on first and 'next' on last image in views slideshow

Question

I create slideshow using Views Slideshow module, controls are enabled (previous, next), I enable and 'End slideshow after last slide' in settings.

Now, how I can hide 'previous' text on first image in slide and 'next' text on the last image in slide?

Answer 1

Easiest way out is to use css. Hide the control when you don't need it.The particular element can be found by a simple inspection. Hope it helps.

display:none;

Another alternative is to use the slideshow API to customise the behaviour. You can start here.

Answer 2

I resolve problem using jQuery, there is code that I use in my case:

jQuery(document).ready(function($){

function Left() {
    if ($('#views_slideshow_cycle_div_slide-block_1_0').css('display') == 'block') {
    $("#views_slideshow_controls_text_previous_slide-block_1").css({"visibility": "hidden"});
}
else {
$("#views_slideshow_controls_text_previous_slide-block_1").css({"visibility": "visible"});
}
};

function Right() {
    if ($('#views_slideshow_cycle_div_slide-block_1_2').css('display') == 'block') {
    $("#views_slideshow_controls_text_next_slide-block_1").css({"visibility": "hidden"});
}
else {
$("#views_slideshow_controls_text_next_slide-block_1").css({"visibility": "visible"});
}
};

window.setInterval(function(){
    Left();
    Right();
}, 10);

});     

Because 'previous' is visible until page is fully loaded and then disappear, I add to css:

#views_slideshow_controls_text_previous_slide-block_1 {
   visibility: hidden;
}

There is one problem, in example above 'block_1' is views slideshow block, number after '_0' tell that is first slide item and '_2' tell that is third item, so you must change '_2' every time when is number of slide items is changed. For me that code resolve problem because I have only three images in slide and that wasn't ever change.

Maybe someone have better solution or can help fix this problem?

Answer 3

In case someone is still looking for it's solution then here it is. First you need to add json2 library with json2.js file inside it. This will give jQuery Cycle Custom Options in your slideshow settings. There under the Advanced options select after and under Advanced option value add following script:

var index = options.currSlide;
    $('#prev')[index == 0 ? 'hide' : 'show']();
    $('#next')[index == options.slideCount - 1 ? 'hide' : 'show']();

Here prev and next are your ids. Update Advanced options and you are good to go.