Tạo Slider gối đầu nhau Slick Slider từ A-Á

Sáng tạo từ trong lao động là có thật các công ạ, cứ va vấp nhiều lại thấy mấy cái hay ho cái slider dạng này thì nhiều rồi mà công nhận là nhìn nó cuốn hút hơn mấy kiểu basic của Flatsome.

Sau này có thời gian tôi sẽ code 1 cái plugin slide kiểu này để dùng cho tiện còn giờ thì thôi cứ ăn sẵn đã cho nhanh.

Code thì anh em xem ở đây nhé thay đổi slidesToShow: 3, thành lẻ 1.2, 1.5 để nó gối đầu nhau nhé, gối ý gối nhiều tùy anh em còn chưa làm được thì đọc tiếp xuống dưới

See the Pen Simple Slick Slider Demo by Vijay Bapodara (@vone8) on CodePen.

Anh em nào mà lowcode thì ăn sẵn tại đây nhé bê y nguyên là được nhé js nó đẩy lên cdn hết rồi không cần phải tải về làm gì nặng hosting.

function nguyenson_info() {
    ?>
        <script>
          // your javscript code goes here
        </script>
    <?php
}
add_action('wp_head', 'nguyenson_info');

JS

WordPress thì anh em hook vào wp_head luôn nhé cho dễ kiểm soát cách hook thế nào tìm lại bài hook nhé.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css' type='text/css' media='all' />
<script type="text/javascript">
        $(document).ready(function(){
            $(".slick-slider").slick({
            slidesToShow: 1.2,
            infinite:false,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 2000
                // dots: false, Boolean
                // arrows: false, Boolean
            });
        });
</script>

HTML

<div class="slick-slider">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
</div>

CSS

.slick-slider .element{
  height:100px;
  width:100px;
  background-color:#000;
  color:#fff;
  border-radius:5px;
  display:inline-block;
  margin:0px 10px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  font-size:20px;
}
.slick-slider .slick-disabled {
  opacity : 0; 
  pointer-events:none;
}

Xấu đẹp gì anh em tự CSS nhé, còn muốn thêm các option khác thì tìm hiểu thêm về slick-slider nhé <3