固定Flexslider字幕 [英] Flexslider caption to be fixed
本文介绍了固定Flexslider字幕的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用flexslider，但一切正常，但是问题出在这里，当滑块同时移动字幕时，我也不想移动字幕.我希望字幕会留在原处.任何人都可以帮我这个问题，我也给我绝对的位置，但没有用.
I'm working on flexslider everything is working fine but the problem is here when the slider is move caption also moving I don't want to be caption will not move with the slider. I want caption will be staying in the same place. Can anyone help me what might be the issue here I gave position absolute also but not working.
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>
推荐答案
问题:您要停止flex-caption
解决方案:
Solution :
-
从
li
在<ul class="slides">
将z-index:999应用于.caption-wrap类
请检查以下代码:
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>
这篇关于固定Flexslider字幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
