自举4-滑块梯度效应对部分下一滑块的影响
自举4-滑块梯度效应对部分下一滑块的影响
提问于 2020-04-27 07:53:51
我目前正在使用引导-4和slick.js开发一个响应性的旋转木马。当中心模式被启用时，它将显示部分下一张幻灯片.我想在下一张部分幻灯片上加一个梯度。我已经看过文档，但不知道如何实现这一点。
下面是指向科德芬的链接
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.typekit.net/div7rpa.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
integrity="sha256-DHF4zGyjT7GOMPBwpeehwoey18z8uiz98G4PRu2lV0A="
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
integrity="sha256-4hqlsNP9KM6+2eA8VUT0kk4RsMRTeS7QGHIM+MZ5sLY="
crossorigin="anonymous"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI="
crossorigin="anonymous"/>
<script type="text/javascript">
$(document).ready(function() {
$('.whatsNextSlick').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint:767,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite:true,
centerMode: true,
centerPadding: '20%'
}
}
// {
// breakpoint:980,
// settings: {
// slidesToShow: 2,
// slidesToScroll: 1,
// infinite:true
//
// }
//
//
// }
]
});
});
</script>
<style type="text/css">
.whats-next-container{
background-color: rgba(188,161,204,0.1);
}
.whats-next-container .insideContainer{
background-color:#FFFFFF;
max-width:290px;
}
.whats-next-container .leftContent img{
float:left;
clear:left;
margin-right:14px;
}
.whats-next-container .rightContent {
height:159px;
}
.whats-next-container .rightContent h4{
padding-top: 14px;
padding-right:20px;
}
.whats-next-container .rightContent h4 {
padding-top: 14px;
padding-right: 20px;
font-family: Beausite Fit Regular;
line-height: 22px;
font-size: 17.5px !important;
letter-spacing: -0.48px;
text-align: left;
color: #41173F;
}
.whats-next-container .rightContent a.whatsNextLink{
display:flex !important;
margin-bottom:20px;
margin-top:30px;
border:0px;
}
.whatsNextSlick .slick-prev,
.whatsNextSlick .slick-next{
background:transparent;
border-radius:0;
}
.whatsNextSlick .slick-prev {
left: -25px;
}
.whatsNextSlick .slick-next {
right: -25px;
}
.whatsNextSlick .slick-prev,
.whatsNextSlick .slick-next {
width: 30px;
height: 30px;
}
.slick-prev:before {
content: '‹';
}
.slick-next:before {
content: '›';
}
.slick-next:before,
.slick-prev:before {
font-family: proxima-nova, sans-serif !important;
color: #333;
font-size: 30px;
}
@media(max-width: 767px) {
.slick-list {
padding-left: 0px!important;
}
.whatsNextSlick .slick-prev, .whatsNextSlick .slick-next {
background: transparent !important;
top: 0;
box-shadow: none;
width:30px;
height:30px;
border-radius: 0;
}
.whatsNextSlick .slick-prev{
right: 30px;
left: unset;
}
}
/* @media(max-width: 360px) and (min-width:320px)*/
@media only screen and (max-width:320px)
{
.whatsNextSlick .leftContent img{
/* width:40%*/
height:159px;
}
.whats-next-container .rightContent h4 {
padding-top: 5px;
padding-right: 5px;
font-family: Beausite Fit Regular;
line-height: 17px;
font-size: 14px !important;
letter-spacing: -0.48px;
text-align: left;
color: #41173F;
}
.whats-next-container .rightContent a.whatsNextLink {
display: flex !important;
margin-bottom: 0px;
margin-top: 15px;
border: 0px;
}
}
@media(max-width: 375px) and (min-width:360px) {
.whatsNextSlick .leftContent img{
/* width:40%*/
height:159px;
}
.whats-next-container .rightContent h4 {
padding-top: 10px;
padding-right: 11px;
font-family: Beausite Fit Regular;
line-height: 17px;
font-size: 17.5px !important;
letter-spacing: -0.48px;
text-align: left;
color: #41173F;
}
.whats-next-container .rightContent a.whatsNextLink {
display: flex !important;
margin-bottom: 0px;
margin-top: 15px;
border: 0px;
}
}
@media(max-width:980px) and (min-width:900px) {
.whats-next-container .rightContent h4 {
padding-top: 6px;
padding-right: 5px;
font-family: Beausite Fit Regular;
line-height: 18px;
font-size: 15.5px !important;
letter-spacing: -0.48px;
text-align: left;
color: #41173F;
}
.whats-next-container .rightContent a.whatsNextLink {
display: flex !important;
margin-bottom: 20px;
margin-top: 16px;
border: 0px;
}
.whats-next-container .leftContent img {
float: left;
clear: left;
margin-right: 10px;
}
}
</style>
</head>
<body>
<!-- What's Next Carousel -->
<div class="container-fluid whats-next-container">
<div class="container">
<div class="row">
<div class="col-md-12 d-block d-sm-flex">
<div class="col-md-3 col-sm-12 d-flex flex-column align-items-center justify-content-center">
<h3>What's Next</h3>
</div>
<div class="col-md-9 col-sm-12 mb-4 mt-4">
<div class="whatsNextSlick">
<div class="slide1Container">
<div class="insideContainer">
<div class="leftContainer">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause"/>
<img src="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause" />
</picture>
</div>
</div>
<div class="rightContainer">
<div class="rightContent">
<!-- <p class="heading">Our Mother's Day Gift Guide is out now!</p>-->
<h4>Our Mother's Day Gift Guide is out now!</h4>
<a href="#" class="btn-primary cta body-font whatsNextLink" >Browse Catalogue ›</a>
</div>
</div>
</div>
</div>
<div class="slide1Container">
<div class="insideContainer">
<div class="leftContainer">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause"/>
<img src="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause" />
</picture>
</div>
</div>
<div class="rightContainer">
<div class="rightContent">
<h4>Our Mother's Day Gift Guide is out now!</h4>
<a href="#" class="btn-primary cta body-font whatsNextLink">Browse Catalogue ›</a>
</div>
</div>
</div>
</div>
<div class="slide1Container">
<div class="insideContainer">
<div class="leftContainer">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause"/>
<img src="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause" />
</picture>
</div>
</div>
<div class="rightContainer">
<div class="rightContent">
<h4>Our Mother's Day Gift Guide is out now!</h4>
<a href="#" class="btn-primary cta body-font whatsNextLink">Browse Catalogue ›</a>
</div>
</div>
</div>
</div>
<div class="slide1Container">
<div class="insideContainer">
<div class="leftContainer">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause"/>
<img src="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause" />
</picture>
</div>
</div>
<div class="rightContainer">
<div class="rightContent">
<h4>Our Mother's Day Gift Guide is out now!</h4>
<a href="#" class="btn-primary cta body-font whatsNextLink">Browse Catalogue ›</a>
</div>
</div>
</div>
</div>
<div class="slide1Container">
<div class="insideContainer">
<div class="leftContainer">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause"/>
<img src="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause" />
</picture>
</div>
</div>
<div class="rightContainer">
<div class="rightContent">
<h4>Our Mother's Day Gift Guide is out now!</h4>
<a href="#" class="btn-primary cta body-font whatsNextLink">Browse Catalogue ›</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>有人能指点我吗？谢谢,
回答 1
Stack Overflow用户
发布于 2020-04-27 15:21:05
首先，在将CSS类与slick.js文档进行比较时，我发现：
这里，您可以看到Slick.js中心模式旋转木马正在将中心幻灯片设置为当前幻灯片
现在，在你的CodePen里 (我在本地文件上进行了测试)，您的偏移量在左侧移动(当前是在旋转木马左侧显示的第一张幻灯片.(对于居中模式来说不是这样中心)。
为我做了什么:
我首先将JS代码is. 来自Slick.js中心模式 粘贴为。
为什么？为了得到正确的行为和一个干净的代码。 您的JS是自定义的，例如，将
centerMode: true从代码的主要部分中删除。
2.绘制所需内容的可视化表示，以便针对要编辑的内容(CSS，JS ?)。
这里我已经画出了在进行图形定制之前，您应该在头脑中使用什么样的视觉表示 当skick.js在文档加载后加载其类时，创建梯度的最佳方法是将梯度置于即将到来的内容之下。 因此，我添加了这些insertBefore和insertBefore来包装滑块。
$( "<div style='height:100%;width:100%;background-image: linear-gradient(to right, #000000, #2e2e2e, #585858, #878787, #b9b9b9, #b9b9b9, #b9b9b9, #b9b9b9, #878787, #585858, #2e2e2e, #000000);position:absolute;'>" ).insertBefore( "div.slick-slider" );
$( "</div>" ).insertAfter( "div.slick-slider" );编辑1:基本上是覆盖div。我可以添加包装jQuery函数tho
在此之后，自定义slick-slide slick-center 和slick-center类。
.slick-slide {
opacity: .4;
}
.slick-center {
display: block;
max-width: 10% !important;
max-height:20% !important;
opacity: 1;设置不透明度是为了让下面的渐变出现。 在此发现：https://stackoverflow.com/a/30951516/13407155
4.最后，这里有一个工作解决方案 在CodePen上
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61454062
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号