Nội dung

Hướng dẫn thêm slick vào website wordpress

3 năm trước, Code theme wordpress, Hướng dẫn làm theme wordpess, Phát triển website, Wordpress, 1229 Lượt xem

Slick là 1 slide khá đẹp mà netweb cũng hay ứng dụng cho các dự án của mình, hôm nay netweb sẽ làm 1 bài hướng dẫn các bạn cách add slick vào website của mình nhé.

Truy cập tải slick
Slick trên github

Tính năng cốt lõi của slick

  • Đáp ứng đầy đủ. Cân với hộp đựng của nó.
  • Cài đặt riêng biệt cho mỗi điểm ngắt
  • Sử dụng CSS3 khi có sẵn. Đầy đủ chức năng khi không.
  • Đã bật vuốt. Hoặc bị vô hiệu hóa, nếu bạn thích.
  • Kéo chuột trên màn hình
  • Vòng lặp vô hạn.
  • Hoàn toàn có thể truy cập bằng phím mũi tên
  • Thêm, xóa, lọc và bỏ lọc các trang trình bày
  • Tự động phát, dấu chấm, mũi tên, lệnh gọi lại, v.v.

Tải slick theo hình dưới

Sau khi tải slick về chúng ta sẽ được 1 file và xả nén ra được 1 thư mục như hình dưới

Các bạn copy slick vào thư mục theme của bạn nhé: \wp-content\themes\bdsdainghia

add css trên thẻ </head>

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick.css">
 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick-theme.css">

Html slick slider

<section class="regular slider">
    <div>
      <img src="https://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="https://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="https://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src="https://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src="https://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="https://placehold.it/350x300?text=6">
    </div>
  </section>

Add js dưới footer 

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
 <script src="<?php echo get_template_directory_uri(); ?>/slick/slick.js" type="text/javascript" charset="utf-8"></script>

 <script type="text/javascript">
    $(document).on('ready', function() {
  
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
 
    });
</script>

Script responsive mobile slick 2 cột

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/slick/slick.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(document).on('ready', function() {

        $(".regular").slick({
            dots: false,
            infinite: true,
            slidesToShow: 6,
            slidesToScroll: 6,
            responsive: 
            [   {
                    breakpoint: 800,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },

            ]
        });

    });
</script>
Kết quả sau add hết html + js + css

Chúc các bạn thành công

Code mẫu block đối tác

<div id="doitac">
    <div class="container">


        <div class="container wow fadeInUp">
            <section class="regular slider">
                <?php
                $the_press = new WP_Query(array('post_type' => 'doi_tac', 'posts_per_page' => 50, 'paged' => get_query_var('paged')));
                // The Loop
                while ($the_press->have_posts()) : $the_press->the_post();
                ?>
                    <div class="kh-item"><a href="#" rel="nofollow"><img src="<?php echo get_the_post_thumbnail_url(); ?>" alt=""></a></div>
                <?php endwhile; ?>
                <?php wp_reset_postdata(); ?>
            </section>
        </div>


        <style>
            .slick-prev:before,
            .slick-next:before {
                font-family: 'slick';
                font-size: 30px;
                line-height: 1;
                opacity: .75;
                color: #003c58 !important;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            .kh-item {
                padding-left: 13px;
                padding-right: 1px;
            }
        </style>


    </div>

</div>


<style>
    #doitac {
        background: #ececec;
        padding: 15px 0px;
    }
</style>

Bài viết mới cập nhập

  • Hướng dẫn Plugin floating contact

    Hướng dẫn Plugin floating contact

    10 tháng trước, 337 Lượt xem

    Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

  • Backup Yandex Mail

    Backup Yandex Mail

    12 tháng trước, 228 Lượt xem

    Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo
,

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)