Индикатор слайда bxslider [требует правки]

449

04 января 2017, 01:23

Как переместить индикаторы текущего слайдера на само изображение, а не под ним? Пример на скриншоте:

Answer 1

bxSlider позиционирует индикаторы абсолютно со свойством bottom: -30px;. А вам нужно какое-нибудь положительное значение для этого свойства. Например:

.bx-wrapper .bx-pager {
  bottom: 20px;
}

Получится:

$(document).ready(function(){ 
  $('.bxslider').bxSlider(); 
});

<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" /> 
 
<style> 
  .bx-wrapper .bx-pager { 
    bottom: 20px; 
  } 
  .bx-wrapper img { 
    height: auto; 
    width: 100%; 
  } 
</style> 
 
<ul class="bxslider"> 
  <li><img src="//placehold.it/900x300/c69/f9c/?text=1" alt=""></li> 
  <li><img src="//placehold.it/900x300/9c6/cf9/?text=2" alt=""></li> 
  <li><img src="//placehold.it/900x300/69c/9cf/?text=3" alt=""></li> 
</ul> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>