移动视图图像上的滑块未显示
Posted
技术标签:
【中文标题】移动视图图像上的滑块未显示【英文标题】：Slider on mobile view images not showing 【发布时间】：2020-12-12 08:37:02 【问题描述】：这是我从 codepen 获得的滑块代码，我对其进行了一些小改动，但在代码更改前后，此滑块不会在任何移动视图上显示/加载图像，我不不知道怎么解决。。 请帮忙！！
我的 codepen 链接
https://codepen.io/guenon/pen/GRZrqgq
一些 CSS 链接
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
一些 JS 链接
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js
jQuery(function($)
$('.flickfeed').on('init', function()
var currentfirst = $(this).find('.slick-active').first();
$(currentfirst).addClass('firster');
// console.log('thishere');
var currentlast = $(this).find('.slick-active').last();
$(currentlast).addClass('laster');
);
function getSliderSettings()
return
dots: false,
infinite: true,
speed: 300,
autoplay: true,
slidesToShow: 6.17,
slidesToScroll: 2,
responsive: [
breakpoint: 1024,
settings:
slidesToShow: 2.25,
slidesToScroll: 2
,
breakpoint: 600,
settings:
slidesToShow: 2,
slidesToScroll: 1
,
breakpoint: 480,
settings:
slidesToShow: 1,
slidesToScroll: 1
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
$('.flickfeed').slick(getSliderSettings());
$( ".slick-slide" ).mouseenter(function()
if ($(this).hasClass("firster"))
// console.log('firster');
var hoverslide = $(this);
$(hoverslide).nextAll().addClass('furthernextslides');
// $(hoverslide).prevAll().addClass('prevslides');
else if ($(this).hasClass("laster"))
var hoverslide = $(this);
$(hoverslide).prevAll().addClass('furtherprevslides');
else
var hoverslide = $(this);
$(hoverslide).nextAll().addClass('nextslides');
$(hoverslide).prevAll().addClass('prevslides');
);
$( ".slick-slide" ).mouseleave(function()
$(this).parent().find( ".slick-slide" ).removeClass('nextslides');
$(this).parent().find( ".slick-slide" ).removeClass('prevslides');
$(this).parent().find( ".slick-slide" ).removeClass('furthernextslides');
$(this).parent().find( ".slick-slide" ).removeClass('furtherprevslides');
);
// on slide change, find the new first slide-active
$('.flickfeed').on('afterChange', function(event, currentSlide, nextSlide)
var currentfirst = $(this).find('.slick-active').first();
$(this).find( ".slick-slide" ).removeClass('firster');
$(currentfirst).addClass('firster');
var currentlast = $(this).find('.slick-active').last();
$(this).find( ".slick-slide" ).removeClass('laster');
$(currentlast).addClass('laster');
);
// on slide init, find the new first slide-active
);body
background: #141414;
color: #eee;
.slick-track
display: flex !important;
padding: 40px 3px;
.slick-slide
margin: 1px;
height: inherit !important;
> div height: 100% !important;
button.slick-arrow
font-size: 0;
line-height: 0;
position: absolute;
top: 0;
display: block;
height: 61.8%;
top: 18%;
background: rgba(0,0,0,.5);
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: 10;
width: 2.5vw;
background-repeat: no-repeat;
background-position: center center;
button.slick-arrow.slick-next
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' /%3E%3C/svg%3E");
right: 0px;
button.slick-arrow.slick-prev
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' /%3E%3C/svg%3E");
left: 0px;
button.slick-disabled
opacity: 0!important;
.flickfeed
opacity:0;
.slick-initialized
opacity:1;
transition:opacity .3s ease-out;
.flix-parents overflow: hidden;
.flix-parents
position: relative;
z-index: 5;
// height: 500px;
.flixer
position: relative;
z-index: 5;
height: 500px;
.video-list-slider
background: 0 0;
border: none;
border-radius: 0;
overflow: visible;
.slick-list
overflow: visible;
.flickfeed .slick-slide .card
border-radius: 0px;
@include anislow;
//animation-delay: 0.5s;
padding-top: 55%; background-size: cover; background-repeat: no-repeat; border:0;
.slick-slide
// transition-delay: 0.5s;
@include anislow;
&:hover
// animation-delay: 0.5s;
transform: scale(1.5); z-index: 3;
.prevslides
transform: translateX(-3.95vw);
.nextslides
transform: translateX(3.95vw);
.furthernextslides
transform: translateX(7.9vw);
.furtherprevslides
transform: translateX(-7.9vw);
.firster transform-origin: center left!important;
.laster transform-origin: center right!important;
.flickfeed .card position: relative; overflow: hidden;
.back position: absolute; height: 100%; width: 100%;
// background-image: linear-gradient(rgba(0,0,0,0),#000);
// background-color: #222;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0));
background-color: transparent;
top: 100%; @include anislow;
h1, p margin: 0; color: #fff;
&:hover .backtop: 1px;
.back .h4 font-size: 14px; font-weight: 700; margin-bottom: 5px;
.back p font-size: 12px; oapcity: 0.9;
button.more position: absolute;
bottom: 10px; width: 100%; height: 10%;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");
left: 0px;
background-repeat: no-repeat;
background-position: center center;
color: transparent; font-size: 0px;
background-color: transparent; border: 0; outline: 0;
<section class="py-5 flix-parents">
<div class="flickfeed video-list-slider pl-5">
<article class="card" style="background-image: url('https://images.unsplash.com/photo-1593488239201-b6932a52f60b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
</article>
<article class="card" style="background-image: url('https://images.unsplash.com/photo-1593462414355-1adfd9d3a65a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
</article>
<article class="card" style="background-image: url('https://images.unsplash.com/photo-1593811167573-aec47a12a91b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
</article>
<article class="card" style="background-image: url('https://images.unsplash.com/photo-1593203859719-437110bd5d91?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
</article>
<article class="card" style="background-image: url('https://images.unsplash.com/photo-1592727995117-4cdc7ee6fcb4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
</article>
<article class="card" style="background-image: url('https://images.unsplash.com/photo-1592981669578-022a13f5c0a2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
</article>
<article class="card" style="background-image: url('https://images.unsplash.com/photo-1594038658121-219eda06322c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
</article>
<article class="card" style="background-image: url('https://images.unsplash.com/photo-1591971997606-690b401a6f12?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
</article>
<article class="card" style="background-image: url('https://images.unsplash.com/photo-1593874105671-d745ff7ce8ba?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
</article>
<article class="card" style="background-image: url('https://images.unsplash.com/photo-1592312986148-0286379c890d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
</article>
</div>
</section> 【问题讨论】：
你能创建一个codepen演示吗？ 是的，我有@RayeesAC，你想要链接还是别的什么？？ 是的，这对于检查代码来说太复杂了。顺便说一句谢谢:) @RayeesAC codepen.io/guenon/pen/GRZrqgq 请告诉我链接是否可以访问。 【参考方案1】：请试试这个，
Codepen 演示：https://codepen.io/Rayeesac/pen/rNejyvM
$(".flickfeed").on("init", function ()
var currentfirst = $(this).find(".slick-active").first();
$(currentfirst).addClass("firster");
var currentlast = $(this).find(".slick-active").last();
$(currentlast).addClass("laster");
);
$(".flickfeed").slick(
dots: false,
infinite: true,
speed: 300,
autoplay: true,
slidesToShow: 6.17,
slidesToScroll: 2,
responsive: [
breakpoint: 1024,
settings:
slidesToShow: 2.25,
slidesToScroll: 2,
,
,
breakpoint: 600,
settings:
slidesToShow: 2,
slidesToScroll: 1,
,
,
breakpoint: 480,
settings:
slidesToShow: 1,
slidesToScroll: 1,
,
,
],
);
$(".slick-slide").mouseenter(function ()
if ($(this).hasClass("firster"))
var hoverslide = $(this);
$(hoverslide).nextAll().addClass("furthernextslides");
else if ($(this).hasClass("laster"))
var hoverslide = $(this);
$(hoverslide).prevAll().addClass("furtherprevslides");
else
var hoverslide = $(this);
$(hoverslide).nextAll().addClass("nextslides");
$(hoverslide).prevAll().addClass("prevslides");
);
$(".slick-slide").mouseleave(function ()
$(this).parent().find(".slick-slide").removeClass("nextslides");
$(this).parent().find(".slick-slide").removeClass("prevslides");
$(this).parent().find(".slick-slide").removeClass("furthernextslides");
$(this).parent().find(".slick-slide").removeClass("furtherprevslides");
);
//on slide change, find the new first slide-active
$(".flickfeed").on("afterChange", function (event, slick, currentSlide, nextSlide)
var currentfirst = $(this).find(".slick-active").first();
$(this).find(".slick-slide").removeClass("firster");
$(currentfirst).addClass("firster");
var currentlast = $(this).find(".slick-active").last();
$(this).find(".slick-slide").removeClass("laster");
$(currentlast).addClass("laster");
);body
background: #141414 !important;
color: #eee;
.slick-slide img
height: 150px;
.slick-track
display: flex !important;
padding: 40px 3px;
position: absolute;
top: 0;
left: 0;
.slick-slide
margin: 1px;
height: inherit !important;
.slick-slide > div
height: 100% !important;
button.slick-arrow.slick-prev
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' /%3E%3C/svg%3E");
left: 0px !important;
button.slick-arrow.slick-next
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' /%3E%3C/svg%3E");
right: 0px !important;
button.slick-disabled
opacity: 0 !important;
button.slick-arrow
font-size: 0;
line-height: 0;
position: absolute;
display: block;
height: 61.8%;
top: 15%;
background: rgba(0, 0, 0, 0.5);
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: 10;
width: 2.5vw;
background-repeat: no-repeat;
background-position: center center;
.flickfeed
opacity: 0;
.slick-initialized
opacity: 1;
transition: opacity 0.3s ease-out;
.flix-parents
overflow: hidden;
.flix-parents
position: relative;
z-index: 5;
.flixer
position: relative;
z-index: 5;
height: 500px;
.slick-list
overflow: visible;
.slick-slide:hover
transform: scale(1.5) !important;
z-index: 3;
.prevslides
transform: translateX(-3.95vw);
.nextslides
transform: translateX(3.95vw);
.furthernextslides
transform: translateX(7.9vw);
.furtherprevslides
transform: translateX(-7.9vw);
.firster
transform-origin: center left !important;
.laster
transform-origin: center right !important;
.slick-list
display: flex;
justify-content: center;
align-items: center;
.flickfeed .slick-slide .card
background-size: cover;
background-repeat: no-repeat;
border: 0;
.flickfeed .slick-slide
transform: scale(1);
position: relative;
.flickfeed .slick-active:first-child .card
transform-origin: center left;
.flickfeed .slick-track
height: auto;
.flickfeed .slick-list
overflow-y: visible;
height: 255px;
overflow-x: hidden;
@media only screen and (max-width: 640px)
button.slick-arrow
width: 5vw;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous"></script>
<section class="py-5 flix-parents">
<div class="flickfeed video-list-slider">
<img class="card" src="https://images.unsplash.com/photo-1593488239201-b6932a52f60b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
<img class="card" src="https://images.unsplash.com/photo-1593462414355-1adfd9d3a65a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
<img class="card" src="https://images.unsplash.com/photo-1593811167573-aec47a12a91b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
<img class="card" src="https://images.unsplash.com/photo-1593203859719-437110bd5d91?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
<img class="card" src="https://images.unsplash.com/photo-1592727995117-4cdc7ee6fcb4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
<img class="card" src="https://images.unsplash.com/photo-1592981669578-022a13f5c0a2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
<img class="card" src="https://images.unsplash.com/photo-1594038658121-219eda06322c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
<img class="card" src="https://images.unsplash.com/photo-1591971997606-690b401a6f12?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
<img class="card" src="https://images.unsplash.com/photo-1593874105671-d745ff7ce8ba?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
<img class="card" src="https://images.unsplash.com/photo-1592312986148-0286379c890d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
</div>
</section>【讨论】：
请试试这个 sn-p 和 codepen 演示。这太复杂了我更改了太多代码。顺便说一句，抱歉耽搁了.. 太棒了..它按我的意愿工作..非常感谢..以上是关于移动视图图像上的滑块未显示的主要内容，如果未能解决你的问题，请参考以下文章