jquery - flexcaption的定位——Flexslider
问题描述
我正在使用Woothemes - Flexslider 制作滑块。我只实现了我想要的一半。我将 Direction-nav(下一个和上一个箭头)和 control-nav(点)放置在所需的位置。我真正想要的是我希望图像和标题从顶部滑入。问题在于标题固定在图像上。所以,它随着图像向下滑动。我希望标题位于幻灯片右下角的绝对位置,并且它应该在指定高度内更改,例如100px
.
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) {
$('body').removeClass('loading');
},
before: function() {
$('.flex-caption').addClass("animated fadeInDown");
},
after: function(slider) {
$('.flex-caption').removeClass("animated fadeInDown");
},
});
.flexslider {
width: 700px;
height: 400px;
margin: 0 auto;
}
.flexslider .slides {
height: 350px;
}
.slides li {
height: 300px;
//overflow: hidden;
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;
}
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>
这是Codepen 链接。
这是我的灵感(一些自定义滑块),他有他的字幕,所以字幕滑动动画没有任何问题。
任何修改,建议和答案将不胜感激
解决方案
推荐阅读
- sql - SQL Server 中动态创建的表 JOIN
- jquery - jquery mobile/bootstrap bundle - 试图调用方法'bindRemove'
- azure-data-lake - 将关系数据中间存储到 Azure Data Lake
- python-3.x - 我想实时查看热图数据
- android - 暗模式:useColorScheme() 在 Android 上总是返回光
- python - Django:为文件创建端点
- c# - 反序列化的 JSON 类型“Newtonsoft.Json.Linq.JArray”与预期类型“Newtonsoft.Json.Linq.JObject”不兼容
- c++ - 说服构造函数将对象移动到父构造函数
- excel - Excel VBA:如何在个人工作簿中使用与类模块的早期绑定
- arrays - 用数组填充数组不像我预期的那样工作