Question

我有一个图像滑块，我完全更改了它的Jquery以使用更少的代码，我无法弄清楚为什么我的cycle-pager没有出现。

您可以在原始滑块上看到图片底部/中心的cycle-pager：http://realtorcatch.com/slider3

另外，我觉得这个新滑块没有平滑过渡。有什么办法可以让它更顺畅，或者只是让它变得更好吗？

$(".slider_img").filter(":gt(0)").each(function() {
  $(this).hide();
});
$(".image_text").filter(":gt(0)").each(function() {
  $(this).hide();
});

current = 0;
limit = $(".slider_img").length;

$(".cycle-prev").click(function() {

  current--;

  if (current < 0) {
    current = 2;
  }

  $($(".slider_img").hide().get(current)).fadeIn(1000);
  $($(".image_text").hide().get(current)).fadeIn(1000);
});

$(".cycle-next").click(function() {
  current++;

  if (current >= 3) {
    current = 0;
  }

  $($(".slider_img").hide().get(current)).fadeIn(1000);
  $($(".image_text").hide().get(current)).fadeIn(1000);

});

setInterval(function() {
  $(".cycle-next").click();
}, 5000);

* {
  padding: 0;
  margin: 0;
}
body {
  font-family: Sans-Serif;
}
.slider_img {
  max-width: 100%;
  /*height: 60vh;*/
  /*height: 100vh;*/
}
.cycle-slideshow {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
}
.image_text {
  text-align: center;
  font-size: 3em;
  color: #FFF;
  position: absolute;
  top: 40%;
  z-index: 1000;
  left: 35%;
}
.cycle-prev,
.cycle-next {
  font-size: 200%;
  color: #FFF;
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  z-index: 999;
  cursor: pointer;
}
.cycle-prev {
  left: 10%;
}
.cycle-next {
  right: 10%;
}
.cycle-pager {
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  bottom: 20px;
  z-index: 999;
  cursor: pointer;
}
.cycle-pager span {
  text-indent: 100%;
  white-space: nowrap;
  width: 12px;
  height: 12px;
  display: inline-block;
  border: 1px solid #FFF;
  border-radius: 50%;
  margin: 0 10px;
  overflow: hidden;
}
.cycle-pager .cycle-pager-active {
  background-color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="cycle-slideshow">
  <span class="image_text">Travelling has never been easier</span>
  <span class="image_text">The Beach</span>
  <span class="image_text">Space is amazing</span>
  <span class="cycle-prev">&#9001;</span>
  <span class="cycle-next">&#9002;</span>
  <span class="cycle-pager"></span>
  <img class="slider_img" src="http://realtorcatch.com/images/subway2.jpg" alt="subway">
  <img class="slider_img" src="http://realtorcatch.com/images/beach2.jpg" alt="beach">
  <img class="slider_img" src="http://realtorcatch.com/images/space2.jpg" alt="space">
</div>

Answer 1

以下代码在视图中显示，但它不可见，因为：

<span class="cycle-pager"></span>

以上是状态，即使在渲染完成后也是如此。您需要设置一些值以使其可见：

$(".cycle-pager").text("Something...");

您的JavaScript中没有任何内容，$(".cycle-pager").html()或$(".cycle-pager").text()。

<强>更新

我能想出的唯一近乎完美的回答是：

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

.slide {position: relative;}
.slide img {display: block; max-width: 100%;}
.slide span {position: absolute; left: 0; top: 65%; text-align: center; width: 100%;}
.bx-controls.bx-has-controls-direction.bx-has-pager {margin-top: -50px;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>

<div class="slider">
  <div class="slide">
    <img src="http://placehold.it/3000x1500&text=FooBar1">
    <span>My Text for "FooBar1"!</span>
  </div>
  <div class="slide">
    <img src="http://placehold.it/3000x1500&text=FooBar2">
    <span>My Text for "FooBar2"!</span>
  </div>
  <div class="slide">
    <img src="http://placehold.it/3000x1500&text=FooBar3">
    <span>My Text for "FooBar3"!</span>
  </div>
  <div class="slide">
    <img src="http://placehold.it/3000x1500&text=FooBar4">
    <span>My Text for "FooBar4"!</span>
  </div>
  <div class="slide">
    <img src="http://placehold.it/3000x1500&text=FooBar5">
    <span>My Text for "FooBar5"!</span>
  </div>
  <div class="slide">
    <img src="http://placehold.it/3000x1500&text=FooBar6">
    <span>My Text for "FooBar6"!</span>
  </div>
  <div class="slide">
    <img src="http://placehold.it/3000x1500&text=FooBar7">
    <span>My Text for "FooBar7"!</span>
  </div>
  <div class="slide">
    <img src="http://placehold.it/3000x1500&text=FooBar8">
    <span>My Text for "FooBar8"!</span>
  </div>
  <div class="slide">
    <img src="http://placehold.it/3000x1500&text=FooBar9">
    <span>My Text for "FooBar9"!</span>
  </div>
  <div class="slide">
    <img src="http://placehold.it/3000x1500&text=FooBar10">
    <span>My Text for "FooBar10"!</span>
  </div>
</div>

Answer 2

.cycle-pager {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    bottom: 20px;
    z-index: 999;
    cursor: pointer;
height:110px;

}
.cycle-pager span {
    text-indent: 100%;
    white-space: nowrap;
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin: 0 10px;
    overflow: hidden;
position:relative;
color:#fff;


}

http://codepen.io/markware/pen/wMJGgq

您在绝对.cycle-pager范围内缺少高度

跨度未显示在图像滑块中

2 个答案: