📌  相关文章
📜  Glide.js (1)

📅  最后修改于: 2023-12-03 14:41:31.627000             🧑  作者: Mango

Glide.js

Glide.js is a lightweight and responsive jQuery slider library that provides a fast, smooth and customizable slider that works with all modern web browsers. It supports features like lazy loading, touch and mouse dragging, keyboard navigation, dynamic resizing, and many more.

Installation

You can install Glide.js by including the libraries into your HTML file by following the below steps.

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>My Slider</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.css" integrity="sha512-lrJ1n/4hrO05CItxH4jC1lXPIOZ7c53aD6TbNLwJy9WDo+5nVDGsd9pQy4t9t+m0pSB/VVZldcJcAnzVP9mIZg==" crossorigin="anonymous" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.theme.css" integrity="sha512-qbpDbXoH6uQ3xOjf+rUcJ8ZKMcd0pmscGm3eQ/JtZz+fsKT4x9H04Wi6LHrCvlal73hhCp8RHJlIdC9bTZ0d4A==" crossorigin="anonymous" />
</head>
<body>
   <div class="glide">
      <ul class="glide__track"></ul>
   </div>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBanTM1c/rX8mLEI7I9I5KA" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js" integrity="sha512-OJSPk7OGd3hHkwRrtrJNVkys8AByuwpAAQ2xUsc4nh2C9duTBvH9+JitGLy7wqpLb3HmiIUmIDaOTFS/r6OPug==" crossorigin="anonymous"></script>
   <script>
      $(document).ready(function(){
         $('.glide').glide({
            type: 'carousel',
            startAt: 0,
            perView: 3
         });
      });
   </script>
</body>
</html>
Usage

After installing the required libraries, you can easily create a slider by setting up the HTML markup in the following manner.

<div class="glide">
   <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
         <li class="glide__slide"><img src="https://source.unsplash.com/random/200x150" alt=""></li>
         <li class="glide__slide"><img src="https://source.unsplash.com/random/200x150" alt=""></li>
         <li class="glide__slide"><img src="https://source.unsplash.com/random/200x150" alt=""></li>
         <li class="glide__slide"><img src="https://source.unsplash.com/random/200x150" alt=""></li>
      </ul>
   </div>
   
   <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
   </div>
   
   <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0"></button>
      <button class="glide__bullet" data-glide-dir="=1"></button>
      <button class="glide__bullet" data-glide-dir="=2"></button>
      <button class="glide__bullet" data-glide-dir="=3"></button>
   </div>
</div>
Features

Glide.js offers a number of features, some of which are as follows:

  • Customizable design with a variety of themes available.
  • Lazy loading of images improves page speed and provides a better user experience.
  • Supports touch and mouse dragging and a variety of touch gestures.
  • Keyboard navigation is supported for easy accessibility.
  • Responsive design automatically adjusts the size of the slider to fit any screen size.
  • Automatic resizing of the slider to fit the window size.
  • Supports adding custom CSS and JS for additional functionality.
Conclusion

Glide.js offers a fast, smooth, and customizable solution for implementing a slider on your website. It offers a range of features that make it highly adaptable to a variety of use cases, including support for touch gestures, lazy loading, and keyboard navigation.