Я работаю над flexslider, все работает нормально, но проблема здесь, когда ползунок перемещается, заголовок также перемещается, я не хочу, чтобы заголовок не перемещался с помощью ползунка. Я хочу, чтобы подпись оставалась на том же месте. Может ли кто-нибудь помочь мне, в чем может быть проблема, я также дал абсолютную позицию, но не работал.
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>@ Судхаршан Наир, я пытаюсь, но не получаю
Можете ли вы запустить свой сниппет снова?
может быть невозможно, но вы можете использовать ползунок swiper
возможный точный дубликат: stackoverflow.com/questions/52511265/…

Проблема: вы хотите остановить анимацию для flex-caption
Solution :
Remove all
<span class = "caption-wrap">fromliApply it before
<ul class = "slides">Apply
z-index:999to.caption-wrapclass
Пожалуйста, проверьте код ниже:
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>Каждый слайд имеет различный текст содержания.
Вы можете удалить код функций
start,beforeиafter