title: Slider on mobile view images not showing
body: <p>this is my slider code I got from codepen, <strong>I did some minor changes on it, but before and after changes in code, this slider not showing/loading images on any mobile view,</strong> I don't know how to solved it..
  please help!!</p>
  <p><strong>My codepen link</strong></p>
  <p><a href="https://codepen.io/guenon/pen/GRZrqgq" rel="nofollow noreferrer">https://codepen.io/guenon/pen/GRZrqgq</a></p>
  <p><strong>Some CSS link</strong></p>
  <p><a href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css</a></p>
  <p><a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css</a></p>
  <p><strong>Some JS links</strong></p>
  <p><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js</a></p>
  <p><a href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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
     
      
      
   
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background: #141414;
      color: #eee;
  }
  
  .slick-track
  {
      display: flex !important;
    padding: 40px 3px;
  }
  
  .slick-slide 
  {
      margin: 1px;
      height: inherit !important;
      
      &gt; 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;
      &amp;: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;}
      }
      &amp;: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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="py-5 flix-parents"&gt;
       
         &lt;div class="flickfeed video-list-slider pl-5"&gt;
  
                   
                   &lt;article class="card" style="background-image: url('https://images.unsplash.com/photo-1593488239201-b6932a52f60b?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ');"&gt;
     
  &lt;/article&gt;
                   
                   &lt;article class="card" style="background-image: url('https://images.unsplash.com/photo-1593462414355-1adfd9d3a65a?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ');"&gt;
     
  &lt;/article&gt;
                   
                   &lt;article class="card" style="background-image: url('https://images.unsplash.com/photo-1593811167573-aec47a12a91b?ixlib=rb-1.2.1&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ');"&gt;
      
  &lt;/article&gt;
                   
                   &lt;article class="card" style="background-image: url('https://images.unsplash.com/photo-1593203859719-437110bd5d91?ixlib=rb-1.2.1&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ');"&gt;
      
  &lt;/article&gt;
                   
                   &lt;article class="card" style="background-image: url('https://images.unsplash.com/photo-1592727995117-4cdc7ee6fcb4?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ');"&gt;
  &lt;/article&gt;
                   
                   &lt;article class="card" style="background-image: url('https://images.unsplash.com/photo-1592981669578-022a13f5c0a2?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ');"&gt;
      
  &lt;/article&gt;
                   
                   &lt;article class="card" style="background-image: url('https://images.unsplash.com/photo-1594038658121-219eda06322c?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ');"&gt;
      
  &lt;/article&gt;
                   
                   &lt;article class="card" style="background-image: url('https://images.unsplash.com/photo-1591971997606-690b401a6f12?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ');"&gt;
      
  &lt;/article&gt;
                   
                   &lt;article class="card" style="background-image: url('https://images.unsplash.com/photo-1593874105671-d745ff7ce8ba?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ');"&gt;
      
  &lt;/article&gt;
                   
                   &lt;article class="card" style="background-image: url('https://images.unsplash.com/photo-1592312986148-0286379c890d?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ');"&gt;
  &lt;/article&gt;
                   
                   
           &lt;/div&gt;
        &lt;/section&gt; </code></pre>
  </div>
  </div>
  </p>