0

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?

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.

  • I hide 'pause' like that but for control elements (previous, pause, next) I can't find any parent class or id that is related with slide image, control elements are separated...slideshow API probably can help but I have no clue how to do that... – mixerowsky Jul 13 '13 at 15:22
  • Oops sorry about that. The API allows you to write your own custom function to control some aspects of the slideshow. Time allowing I might script one for you as a starter. Let me look at the CSS classes and see what they got :-) – Bernard Nandwa Jul 13 '13 at 15:47
  • you can see on this page...thanks – mixerowsky Jul 13 '13 at 16:32
0

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?

  • Smell code, I've never use views slideshow before, but guess this issue may help you. – Oleg Sherbakov Jul 14 '13 at 22:17
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.