移动视图图像上的滑块未显示答案

【问题标题】：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 .back{top: 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
请告诉我链接是否可以访问。

标签： javascript html css slider

【解决方案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 演示。这太复杂了我更改了太多代码。顺便说一句，抱歉耽搁了..
太棒了..它按我的意愿工作..非常感谢..