I can not customize my buttons to switch slides in bxslider, or rather the icons from FontAwesome. It is necessary to make them in the center of the slide with indents from the edges of 20px, I can not understand how. I tried to position them somehow with position: absolute, but when the screen was reduced, they still flew. Help me to understand.

bslider default js and css itself:

$(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, controls: true, pager: false, nextText: '<i class="fa fa-angle-right"></i>', prevText: '<i class="fa fa-angle-left"></i>' }); });

Html:

 <div class="banner__top"> <ul class="bxslider"> <li><a href="#"><img src="img/100-banner.png" alt="slider" /></a></li> <li><a href="#"><img src="img/100-banner.png" alt="slider" /></a></li> <li><a href="#"><img src="img/100-banner.png" alt="slider" /></a></li> <li><a href="#"><img src="img/100-banner.png" alt="slider" /></a></li> </ul> </div>

And a simple markup in sass:

 &__top margin: bottom: 10px img width: 100% height: 300px ul margin: 0

    1 answer 1

    I use reset.css . Watch Codepen

     $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, controls: true, pager: false, nextText: '<i class="fa fa-angle-right"></i>', prevText: '<i class="fa fa-angle-left"></i>' }); }); 
     .banner__top { position: relative; max-width: 850px; } .banner__top ul.bxslider li img { width: 100%; } .banner__top .bx-controls-direction .fa:before { font-size: 40px; position: absolute; top: 50%; transform: translateY(-75%); } .banner__top .bx-controls-direction .bx-prev .fa:before { left: 0; margin-left: 20px; } .banner__top .bx-controls-direction .bx-next .fa:before { right: 0; margin-right: 20px; } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="banner__top"> <ul class="bxslider"> <li><a href="#"><img src="https://placehold.it/850x300" alt="slider" /></a></li> <li><a href="#"><img src="https://placehold.it/850x300" alt="slider" /></a></li> <li><a href="#"><img src="https://placehold.it/850x300" alt="slider" /></a></li> <li><a href="#"><img src="https://placehold.it/850x300" alt="slider" /></a></li> <li><a href="#"><img src="https://placehold.it/850x300" alt="slider" /></a></li> <li><a href="#"><img src="https://placehold.it/850x300" alt="slider" /></a></li> </ul> </div>