Make the arrows not appear if first or last item

[jase7777]

It's a little misleading if there are arrows on the first or last item. People click but there are no more to display anyway. Any way to hide arrows if there are no more items to cycle?

[Mottie]

Good point... I just updated the plugin to version 2.1.4 with a new disabled option which contains the css class added to the arrow. Please note that this class is only added when the wrap option is false, when it is true, the arrows will rewind/fast forward the slides.

[jase7777]

Oh cool thanks. The site I'm working on uses dynamic content to fill moving boxes...sometimes there is only one item though so looping or fast forwarding / rewinding still gives the illusion that it's not doing anything. If the arrows weren't there at all on these items it would be better, but since this was not how it was intended to be used I can fully understand if you choose not to make it so.

Anyway I appreciate the work you have done and very fast reply. Thank you.

[Mottie]

If you want to completely hide the arrows, just add this css:

a.mb-scrollButtons {
  display: none;
}

Hmmm, it should hide both arrow buttons if there is only one panel. Is there something else you needed changed to make this better work for you?

[jase7777]

Oh I didn't even need to add that CSS. I updated to the latest version and it all looks and works beautifully.

Thank you so much!

[tengallen]

how to use arrow instead of pointer for left and right panel?

I still don't know how to modify css....

[Mottie]

@tengallen Look in the movingboxes.css file for these lines:

/*** Slider panel ***/
.mb-slider .mb-panel {
width: 350px; /* default, this is overridden by script settings */
margin: 5px 0;
padding: 5px;
display: block;
cursor: pointer;
float: left;
list-style: none;
}

/* Cursor to arrow over current panel, pointer for all others,
change .current class name using plugin option, currentPanel : 'current' */
.mb-slider .mb-panel.current {
cursor: auto;
}

It is opposite of what you think. The top part makes ALL panels have a cursor:pointer set, but the second panel used only on the current or middle panel has the cursor set to auto to make the cursor back into an arrow. If you only want arrows, then just change cursor:pointer to cursor:auto or completely remove it from the css.

[tengallen]

got it and thanks for your promptly reply...

If I only have 3 images and all of them are shown in slider panel completed. No other images to slide anymore... I could hide scroll button and buildNav but don't know how to make right / left image unclickable.

thanks for reply

[Mottie]

I guess I'm confused... if you have all slides showing and don't want the scrolling to work, then why even use the plugin?

[tengallen]

never mind. is it possible to make right / left image unclickable in slider panel?? I wish to slide images by scrollButtons only.

[Mottie]

The easiest method, without modifying the plugin, would be to add this line of code in the initialized callback (demo)

$('#slider').movingBoxes({

    initialized: function(e, slider, tar){
        slider.$el.undelegate('.mb-panel', 'click')
    }

});

[tengallen]

awesome!!!! many thanks.