javascript - Slick CSS carouselslider vertical instead of horizontal

I am trying to get slick slider as an auto scrolling carousel working in a webpage I am building. What I am trying to achieve is this effect, a horizontal line of images that scrolls slowly all the time.

When I run my code, however, the images load in a vertical stack, with no scrolling at all. I have copied the slick folder into the same folder as my index.html. What is it that I am missing here?

I have this in my CSS:

html,
body {
  height: 100%
}

.slider {
  width: 300px;
  margin: 2px auto;
  text-align: center;
  padding: 10px;
  color: white;
  .parent-slide {
    padding: 15px;
  }
  img {
    display: block;
    margin: auto;
  }
}

.slider:before,
.slider:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100px;
  top: 0;
  height: 100%;
  pointer-events: none;
  /*makes the linkes behind clickable.*/
}

.slider:before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.slider:after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

and this in my HTML:

<body>
  <div class="slider">
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 0,
        speed: 2200,
        arrows: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        cssEase: 'linear'
      });
    });
  </script>
</body>

When I run my code, however, the images load in a vertical stack, with no scrolling at all. I have copied the slick folder into the same folder as my index.html. What is it that I am missing here?

I have this in my CSS:

html,
body {
  height: 100%
}

.slider {
  width: 300px;
  margin: 2px auto;
  text-align: center;
  padding: 10px;
  color: white;
  .parent-slide {
    padding: 15px;
  }
  img {
    display: block;
    margin: auto;
  }
}

.slider:before,
.slider:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100px;
  top: 0;
  height: 100%;
  pointer-events: none;
  /*makes the linkes behind clickable.*/
}

.slider:before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.slider:after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

and this in my HTML:

<body>
  <div class="slider">
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
    <div class="slide">
      <img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 0,
        speed: 2200,
        arrows: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        cssEase: 'linear'
      });
    });
  </script>
</body>

Share Improve this question edited Jul 3, 2018 at 19:26 user7637745 9852 gold badges14 silver badges27 bronze badges asked Jul 3, 2018 at 17:40 anti 3,1458 gold badges48 silver badges91 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

If I understand your question right, the problem is only that in the example you showed the CSS is written in LESS.

LESS Less (sometimes stylized as LESS) is a dynamic preprocessor style sheet language that can be piled into Cascading Style Sheets (CSS) and run on the client side or server side. — https://en.wikipedia/wiki/Less_(stylesheet_language)

The problem in your code is the cascade written code:

.slider{
  /* .. */
  .parent-slide{padding:15px;}
  img{display: block;margin:auto;}
}

This kind of code is not supported by CSS.

Here is the example with normal CSS:

window.onload=function(){
  $('.slider').slick({
  autoplay:true,
  autoplaySpeed: 0,
  speed: 2200,
  arrows:false,
  centerMode:true, 
  slidesToShow:5,
  slidesToScroll:3,
  cssEase: 'linear'
  });
};

body {
  background: #000;
}
.slider {
  width: 100%;
  margin: 2px auto;
  text-align: center;
  padding: 10px;
  color: white;
}
.slider .parent-slide {
  padding: 15px;
}
.slider img {
  display: block;
  margin: auto;
}
.slider:before,
.slider:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100px;
  top: 0;
  height: 100%;
  pointer-events: none;
  /*makes the links behind clickable.*/
}
.slider:before {
  left: 0;
  background: linear-gradient(to right, #000000, rgba(0, 0, 0, 0));
}
.slider:after {
  right: 0;
  background: linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
}

<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://cdn.jsdelivr/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet prefetch" href="https://cdn.jsdelivr/jquery.slick/1.5.0/slick-theme.css">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/jquery.slick/1.5.0/slick.min.js"></script>
<div class="slider">
  <div class="slide">
    <img src="https://loremflickr./300/300" alt="" class="img-responsive" />
  </div>
   <div class="slide">
    <img src="https://placekitten./300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://placeimg./300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://placebear./300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://stevensegallery./300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://picsum.photos/300/300" alt="" class="img-responsive" />
  </div>
   <div class="slide">
    <img src="https://loremflickr./300/300" alt="" class="img-responsive" />
  </div>
   <div class="slide">
    <img src="https://placecage./300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://placeimg./300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://placebear./300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://stevensegallery./300/300" alt="" class="img-responsive" />
  </div>
  <div class="slide">
    <img src="https://picsum.photos/300/300" alt="" class="img-responsive" />
  </div>
</div>

It always helps to look at the real source code with your Web Developer Inspector.

To see how the code has to be implemented into an HTML file see the follow code and paste it into an empty HTML file: https://pastebin./uKXzf86g

The problem is with the $(document).ready(function(){ used in the html page. Somehow it is not considering that to utilise the slick properties set.

If you try like below in your html file, it will definitely work!

<script type="text/javascript">
window.onload=function(){
   $('.slider').slick({
       autoplay:true,
       autoplaySpeed: 0,
       speed: 2200,
       arrows:true,
       centerMode:true, 
       slidesToShow:3,
       slidesToScroll:1,
       cssEase: 'linear'
   });
};
</script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Slick CSS carouselslider vertical instead of horizontal - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)