Question

I’m currently working on a site that uses a slider at some point, but instead of the regular arrows that are inside the slider (left and right arrows, for slider navigation) I need to get the left one attached to the left of the screen regardless of screen size and the same with the right arrow. It only works with my screen size currently (1366×768) and the code is

.bx-prev {
margin-left:-16.2%;
position:absolute;
margin-top:-200px;
}

.bx-next{
margin-left:86.2%;
position:absolute;
margin-top:-200px;
}

Any help would be appreciated. Also if it could be done best in Javascript/jQuery, I’m also open to that.

Answer 1

You need to add position:relative to the parent element then you can use position:absolute; in related to the parent element

.bx-prev {

position:absolute;
top:200px;
left: 0px;
    height:10px;
    width:10px;
    background:lime;
}

.bx-next{
    top:200px;
 height:10px;
    width:10px;
    background:lime;
position:absolute;

right: 0px;
}
.slider{
position:relative;
    width:500px;
        height:500px;
    background:red;
}   

<div class="slider">
    <div class="bx-next"></div>
    <div class="bx-prev"></div>
</div>

sample