光滑的滑块导航在某个断点处显示的项目少于预期的项目
Posted
技术标签:
【中文标题】光滑的滑块导航在某个断点处显示的项目少于预期的项目【英文标题】：Slick Slider Navigation showing less items than supposed to at some breakpoint 【发布时间】：2019-09-21 07:45:16 【问题描述】：我已经构建了一个带有自定义导航的光滑滑块。
(function ($)
$('.slider-for').slick(
slidesToShow: 1,
arrows: false,
fade: true,
autoplay: true,
autoplaySpeed: 2000,
asNavFor: '.slider-nav',
dots: false,
customPaging: function(slick,index)
return '<a>'+'</a>';
,
responsive: [
breakpoint: 1024,
settings:
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
);
$('.slider-nav').slick(
infinite: true,
slidesToShow: 5,
asNavFor: '.slider-for',
focusOnSelect: true,
dots: false,
customPaging: function(slick,index)
return '<a>' + (index + 1) + '</a>';
,
responsive: [
breakpoint: 1024,
settings:
slidesToShow: 1,
slidesToScroll: 1,
centerMode: false,
arrows: false,
dots: false,
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
);
)(jQuery);@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,700");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
body
font-family: 'Playfair Display', serif;
#main-slider-wrap
margin-top: 100px;
background-color: #fff;
margin-bottom: 150px;
#main-slider-wrap .container
margin-top: 60px;
@media screen and (max-width: 768px)
#main-slider-wrap .container
margin-top: 40px;
#main-slider-wrap .slick-slide
opacity: 0.2;
#main-slider-wrap .slick-slide.slick-current
opacity: 1;
@media screen and (max-width: 768px)
#main-slider-wrap .slide-item
opacity: 1;
#main-slider-wrap .slide-item.slick-center
opacity: 1;
#main-slider-wrap .slide-item img
width: auto;
height: 44px;
cursor: pointer;
margin: 0 auto;
@media screen and (max-width: 768px)
#main-slider-wrap .slide-item img
height: 54px;
#main-slider-wrap .slick-dots
position: relative;
list-style: none;
text-align: center;
padding-left: 0;
@media screen and (max-width: 1080px)
#main-slider-wrap .slick-dots
margin-top: 100px;
#main-slider-wrap .slick-dots li
width: auto;
margin: 0;
margin-right: 18px;
height: 12px;
display: inline-block;
#main-slider-wrap .slick-dots li:last-child
margin-right: 0;
#main-slider-wrap .slick-dots li.slick-active a
background-color: #7AE1BF;
@media screen and (max-width: 480px)
#main-slider-wrap .slick-dots li.slick-active
border-bottom: none;
#main-slider-wrap .slick-dots li a
font-size: 12px;
cursor: pointer;
color: #001D3A;
text-transform: uppercase;
width: 12px;
display: block;
background-color: #EEEEEE;
height: 12px;
border-radius: 50%;
#main-slider-wrap .slick-dots li a:hover
text-decoration: none;
#main-slider-wrap .slider-for .text-center a
border-bottom: 1px solid;
#main-slider-wrap .slider-for h3
font-weight: 400;
font-size: 24px;
color: #000000;
letter-spacing: -0.15px;
text-align: center;
line-height: 32px;
margin-bottom: 40px;
height: 81px;
min-height: 81px;
@media screen and (max-width: 768px)
#main-slider-wrap .slider-for h3
margin-bottom: 20px;
height: auto;
min-height: auto;
#main-slider-wrap .slider-for a
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 16px;
color: #FF8672;
text-align: center;
line-height: 28px;
padding-bottom: 3px;
font-size: 16px;
#main-slider-wrap .slider-for a:hover
text-decoration: none;
#main-slider-wrap .slider-nav .slick-current h3
border-bottom: 3px solid #00DDBD;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://13779usreg20181102.com/us/sites/all/themes/krm/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 offset-md-1">
<div id="main-slider-wrap">
<div class="center">
<div class="slider-nav text-center">
<div class="slide-item">
<img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/DailyMail_logo_desktop.png?6710">
</div>
<div class="slide-item">
<img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/JCK_logo_desktop.png?6710">
</div>
<div class="slide-item">
<img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/NationalJeweler_logo_desktop.png?6710">
</div>
<div class="slide-item">
<img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/DigitalCommerce_logo_desktop.png?6710">
</div>
<div class="slide-item">
<img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/DPA_logo_desktop.png?6710">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8 offset-md-2">
<div class="slider-for">
<div class="text-center">
<h3>They're real and they're spectacular!</h3>
<a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank">Read article</a>
</div>
<div class="text-center">
<h3>A New Diamond Brand Helmed by Former Apple & Sleep Number Bed Execs</h3>
<a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank">Read article</a>
</div>
<div class="text-center">
<h3>Forget the 4 C’s. Meet the 3 S’s.</h3>
<a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank">Read article</a>
</div>
<div class="text-center">
<h3>Diamond startup targets millennials with sparkly diamonds.</h3>
<a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank">Read article</a>
</div>
<div class="text-center">
<h3>Sparkle Cut CEO interview.</h3>
<a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank">Read article</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>在 1024，我有它，所以它只显示一个。
出于某种原因，在某些断点处，顶部滑块 (slider-nav) 显示的项目少于 5 个？不知道为什么会这样？有任何 CSS 问题吗？提前致谢！
这一项仅显示 4 项
仅此仅显示 2
【问题讨论】：
【参考方案1】：不确定您是否以应有的方式使用平滑滑块。
我之前的选项不起作用，所以我回滚到这个答案。
幻灯片没有丢失，它们被 slick 滑块脚本隐藏，在 slick-track 容器上具有 css 转换内联样式。
也许有一个功能可以禁用宽屏的滑动效果，因为它会让你的幻灯片隐藏起来。
否则，你应该可以用 css 覆盖它：
.slick-slider .slick-track, .slick-slider .slick-list
-webkit-transform: translate3d(0, 0, 0) !important;
-moz-transform: translate3d(0, 0, 0) !important;
-ms-transform: translate3d(0, 0, 0) !important;
-o-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
此代码已在 primary.css 工作表中，但我添加了 !important，因为它无法控制元素样式。
此代码应放置在针对目标屏幕尺寸的媒体查询中，因为 translate3d 用于在移动视图中滑动元素（1 x 1 元素）。
【讨论】：
【参考方案2】：<?php if (count($images) < 5)
echo " .my-gallery.slider-nav.slick-vertical.slick-initialized.slick-slider .slick-list .slick-track -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)!important; ";
?>
在这里，我尝试了这个，我知道这不是永久的解决方案，但它对我来说非常适合我想做的任何事情。
【讨论】：
欢迎来到 Stack Overflow！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请编辑您的答案以添加解释并说明适用的限制和假设。以上是关于光滑的滑块导航在某个断点处显示的项目少于预期的项目的主要内容，如果未能解决你的问题，请参考以下文章