Stack slider indent arrows


(Lisa Sandler) #1

I’m hoping for some code to add… unless I am missing something in settings… I want to make the arrows not overlap the images in the slider… or have them outside the slider. https://stacks4stacks.com/stackslider/
I have one on this page: https://www.lisasandlerphotography.com/client-products/albums-books/premium-photo-albums/


@willwood or anyone else if you can help.
thanks, Lisa


(Will Woodgate) #2

Stacks applies ‘overflow:hidden’ on all containers, so it is not feasible to pull elements outside of their container with negative margins or positioning. Otherwise the elements will simply be hidden from view.

What I think you will need to try instead is to apply padding to the left and right sides of the slider like this:

.bx-wrapper {
padding: 0 40px !important;
}

That will push the content in from the sides and provide enough space to display the arrows.


(Lisa Sandler) #3

@willwood, thank you. As usual, you have the perfect response and code.
Much appreciated.


(Lisa Sandler) #4

@willwood or anyone else…

Do you have some code to hide the nav arrows on iPhone sized-screens?
For example, slider on top of this page? https://lisasandlerphotography.com/details/happy-clients/

TIA


(Stuart) #5

Hi @LSPhoto

You could try:

@media only screen and (max-width: 500px) {    	
	.bx-controls.bx-has-controls-direction {
    	display: none;
	}
} 

I know you are not a programmer :wink: but just change the 500px to whichever mobile breakpoint suits your preferences.

You can get a list of common breakpoints here:

Hope it helps.


(Lisa Sandler) #6

Stuart-
Thank you, yes, I know enough to change the #s, just not the code itself. This works perfectly. The link you posted is really helpful. I’ve never seen that before. I’ll have to explore further :slight_smile:
Lisa