Slider on mobile view images not showing

Question

this is my slider code I got from codepen, I did some minor changes on it, but before and after changes in code, this slider not showing/loading images on any mobile view, I don't know how to solved it.. please help!!

My codepen link

https://codepen.io/guenon/pen/GRZrqgq

Some CSS link

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

Some JS links

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;
}

Rayees AC · Accepted Answer

Please try this instead,

Codepen demo : 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;
 }
}

Slider on mobile view images not showing

Answers (1)

Related Questions