Question

我正在尝试制作视图对齐中心的滑块。中心滑块应位于红线（div）的中心

这就是我尝试过的。 https://fiddle.jshell.net/4xgpgng1/1/

<style>
div.bxslider { margin:0 50%; text-align:center; }
.slide{  width: initial !important; margin: 0px 20px ;   }
.slide img { width: 130px;  }
</style>


<div style="position:absolute; width:140px; height:100px; border:1px solid red; margin:0 0 0 -70px; top:0;left:50%;z-index:2"></div>

<div class="bxslider">
    <div class="slide a1"><img src="http://placehold.it/1000x680/112233/ffffff?text=FooBar1" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/ee5678/ffffff?text=FooBar2" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/435ab6/ffffff?text=FooBar3" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/11cc22/ffffff?text=FooBar4" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/ffa500/ffffff?text=FooBar5" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/cc44ff/ffffff?text=FooBar6" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/112233/ffffff?text=FooBar1" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/ee5678/ffffff?text=FooBar2" /></div>  
</div>


<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({
    slideWidth: 130,
    minSlides: 12,
    maxSlides: 12,
    moveSlides: 1,
    pager: false,
    auto: false
  });
}); 
</script>

请帮忙

Answer 1

这可以解决您的问题：

.slide img {
  position: relative;
  left: calc(50% + 20px);
}

Updated fiddle

Answer 2

这可能对某人有所帮助。我通过将宽度设置为父容器

解决了类似的问题

.sliderWrapper {
  max-width: 640px;
  display: block;
  margin: 0 auto;
 }

Answer 3

HTML 代码：

<div class="img-container">
 <div class="imgGallery">
  <div><img src="assets/img/Ocean.jpg" title="Funky roots"></div>
  <div><img src="assets/img/Cliff.png" title="The long and winding road"></div>
  <div><img src="assets/img/Tumpak-sewu.jpg" title="Happy trees"></div>
 </div>
</div>

CSS 代码：

.img-container div {
  display: block;
  margin: 0 auto;
  text-align: center
}

TS 代码：

$('.imgGallery').bxSlider({
  mode: 'fade',
  captions: false,
  slideWidth: 500,
});

Answer 4

.bx-wrapper {
      max-width: 100% !important;
}

bxslider幻灯片对齐中心

4 个答案: