Кастомные кнопки bxslider

470

30 января 2017, 16:26

Не получается настроить свои кнопки для переключения слайдов в bxslider, а точнее иконки с FontAwesome. Необходимо их сделать по центру слайда с отступами от краёв 20px, не могу понять как. Пробовал как-то с position:absolute их позиционировать, но при уменьшении экрана всё равно слетали. Помогите разобраться.

js и css самого bxlider дефолтный:

$(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>

И простенькая разметка в sass:

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

Answer 1

You are welcome!

Использую reset.css. Смотреть на 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>