jquery - 修复 Flexslider 标题

Question

我正在开发 flexslider，一切正常，但问题出在 slider 移动时标题也移动我不希望标题不会随 slider 移动。我希望标题将留在同一个地方。任何人都可以帮助我这里可能是什么问题我也给出了绝对位置但没有工作。

jQuery('.flexslider').flexslider({
  //animationLoop: true,
  slideshowSpeed: "4000",
  slideshow: false,
  animation: "slide",
  animationSpeed: "500",
  direction: "vertical",
  reverse: true,
  smoothHeight: true,
  animationDuration: "2000",
  keyboard: "true",
  prevText: "Prev",
  nextText: "Next",
  start: function(slider) {
    $(".flex-caption").addClass("animated fadeInDown");
  },
  before: function(slider) {
    $(".flex-caption").removeClass("animated fadeInDown");
  },
  after: function(slider) {
    $(".flex-caption").addClass("animated fadeInDown");
  }

});

.flexslider {
  width: 700px;
  height: 400px;
  margin: 0 auto;
}

.flexslider .slides {
  height: 350px;
}

.slides li {
  height: 300px;
  position: relative;
}

.flex-direction-nav .flex-prev,
.flexslider:hover .flex-direction-nav .flex-prev {
  position: absolute;
  right: 120px;
  opacity: 1;
  left: 0;
  bottom: 0;
}

.flex-direction-nav .flex-next,
.flexslider:hover .flex-direction-nav .flex-next {
  position: absolute;
  right: 0;
  opacity: 1;
  bottom: 0;
}

.flex-direction-nav {
  position: absolute;
  bottom: 14px;
  right: -4%;
  height: 100px;
  width: 100px;
}

.flex-control-nav {
  bottom: 180px;
  right: 10%;
  position: absolute;
  width: fit-content;
}

.flex-control-nav li {
  display: block;
  margin: 15px 0;
}

.flex-caption {
  color: #fff;
  position: absolute;
  padding: 20px;
  background-color: red;
  position: absolute;
  right: 0;
  bottom: 0;
  top: unset;
}

.caption-wrap {
  display: block;
  width: 200px;
  height: 56px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  top: 50px;
}

.flexslider .slides img {
  position: absolute;
  width: 600px
}

.flex-control-paging li a {
  width: 5px;
  height: 5px;
}

.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(255, 21, 21, 0.9);
  cursor: default;
  box-shadow: 0 0 0px 6px rgb(0, 0, 0);
  border-radius: 0;
}

@keyframes fade-in-down {
  0% {
    top: 0px;
  }
  25% {
    top: 25%;
  }
  50% {
    top: 50%;
  }
  75% {
    top: 70%;
  }
  100% {
    top: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/flexslider.css" rel="stylesheet" />

<section class="slider">
  <div class="flexslider">
    <ul class="slides">
      <li>
        <img src="https://preview.ibb.co/kA0HcU/a.jpg" />
        <span class="caption-wrap">
        <p class="flex-caption">Adventurer Brownia</p>
          </span>
      </li>
      <li>
        <img src="https://preview.ibb.co/kA0HcU/a.jpg" />
        <span class="caption-wrap">
        <p class="flex-caption">AdventurerCheesecakb</p>
        </span>
      </li>
      <li>
        <img src="https://preview.ibb.co/kA0HcU/a.jpg" />
        <span class="caption-wrap">
        <p class="flex-caption">Cheesecake Brownic</p>
          </span>
      </li>
    </ul>

  </div>
</section>

Answer 1

问题:您想停止 flex-caption 的动画

Solution :

1. Remove all <span class="caption-wrap"> from li

2. Apply it before <ul class="slides">

3. Apply z-index:999 to .caption-wrap class

请检查以下代码:

jQuery('.flexslider').flexslider({
    //animationLoop: true,
    slideshowSpeed: "4000",
    slideshow: false,
    animation: "slide",
    animationSpeed: "500",
    direction: "vertical",
    reverse: true,
    smoothHeight: true,
    animationDuration: "2000",
    keyboard: "true",
    prevText: "Prev",
    nextText: "Next",
    start: function (slider) {
        $(".flex-caption").addClass("animated");
    },
    before: function (slider) {
        $(".flex-caption").removeClass("animated");
    },
    after: function (slider) {
        $(".flex-caption").addClass("animated");
    }

});

.flexslider .slides {
  height: 350px;
}

.slides li {
  height: 300px;
  position: relative;
}

.flex-direction-nav .flex-prev,
.flexslider:hover .flex-direction-nav .flex-prev {
  position: absolute;
  right: 120px;
  opacity: 1;
  left: 0;
  bottom: 0;
}

.flex-direction-nav .flex-next,
.flexslider:hover .flex-direction-nav .flex-next {
  position: absolute;
  right: 0;
  opacity: 1;
  bottom: 0;
}

.flex-direction-nav {
  position: absolute;
  bottom: 14px;
  right: -4%;
  height: 100px;
  width: 100px;
}

.flex-control-nav {
  bottom: 180px;
  right: 10%;
  position: absolute;
  width: fit-content;
}

.flex-control-nav li {
  display: block;
  margin: 15px 0;
}

.flex-caption {
  color: #fff;
  position: absolute;
  padding: 20px;
  background-color: red;
  position: absolute;
  right: 0;
  bottom: 0;
  top: unset;
}

.caption-wrap {
  display: block;
  width: 200px;
  height: 56px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  top: 50px;
  z-index:999;
}

.flexslider .slides img {
  position: absolute;
  width: 600px
}

.flex-control-paging li a {
  width: 5px;
  height: 5px;
}

.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(255, 21, 21, 0.9);
  cursor: default;
  box-shadow: 0 0 0px 6px rgb(0, 0, 0);
  border-radius: 0;
}

@keyframes fade-in-down {
  0% {
    top: 0px;
  }
  25% {
    top: 25%;
  }
  50% {
    top: 50%;
  }
  75% {
    top: 70%;
  }
  100% {
    top: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/flexslider.css" rel="stylesheet" />


<section class="slider">
    <div class="flexslider">
        <span class="caption-wrap">
            <p class="flex-caption">Adventurer Brownia</p>
        </span>
        <ul class="slides">
            <li>
                <img src="https://preview.ibb.co/kA0HcU/a.jpg" />
            </li>
            <li>
                <img src="https://preview.ibb.co/kA0HcU/a.jpg" />
            </li>
            <li>
                <img src="https://preview.ibb.co/kA0HcU/a.jpg" />
            </li>
        </ul>
    </div>
</section>