I am currently working on a project involving an image slider and I am facing a challenge with the "previous" and "next" arrows. My goal is to have each arrow occupy half of the slider area, but adjusting padding or margins tends to change their position once they are in place.
After some research, I came across a possible solution using the :before pseudo selector as mentioned here. While this method works adequately, I am eager to hear alternative suggestions from fellow developers since the current approach feels somewhat makeshift.
In utilizing this technique, I aim to divide the slider box evenly between the two arrows while maintaining responsiveness to different window widths. However, achieving this has proven to be quite challenging.
Feel free to explore this fiddle and resize your browser window for testing purposes.
http://jsfiddle.net/amoeboar/avqjnfwt/1/
The objective is to ensure that each clickable region occupies precisely half of the slider window without causing any displacement of the arrows.
.prev:before{
position:absolute;
content:'';
top: -40%;
right: -235%;
left: -40%;
bottom: -120%;
outline:1px solid red;
z-index:40;
}
This implementation, however, does not yield the desired outcome. The usage of negative percentages appears unconventional, and resizing the window fails to maintain the intended shape and size of the clickable areas. Ideally, I would like the left and right arrows to each fill half of the bounding box consistently.
If anyone has any recommendations or insights, I would greatly appreciate your input!