使用 Materialise CSS 的轮播

Materialize CSS 是由 Google 创建和设计的 UI 组件库。它是一种将成功设计的经典原则与创新和技术相结合的设计语言。

特征：

• 响应式前端 CSS 框架。
• 它独立于浏览器。
• 可扩展。
• 它可以免费使用。
• 它的重点是不同的动作和组件。
• 需要使用 jQuery JavaScript 库。

在本文中，我们将使用 Materialise CSS 创建一个 3D 轮播，这非常有趣且易于设计。 Materialise CSS carousel 是一个强大且通用的组件。它具有触控功能，可在移动设备上流畅使用。

句法：

用于初始化的 jQuery/JavaScript：

Javascript

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
});
    
$(document).ready(function(){
    $('.carousel').carousel();
});

示例 1：使用上面的代码片段，我们可以通过提供图像的来源和这些图像的超链接（如果需要）来轻松创建轮播。让我们看看下面的例子。

HTML

  

    
    
    
  
    
    
  
    
    
    
      
    
        $(document).ready(function () {
            $('.carousel').carousel();
        });
    
  
    
        body {
            margin: 0;
            padding: 0;
            background-color: coral;
        }
  
        a {
            height: 900px;
            width: 650px;
        }
  
        .carousel {
            height: 800px;
            perspective: 950px;
            transform: translateY(-100px);
        }
  
        .carousel carousel-item {
            width: 7050px;
        }
  
        img {
            width: 100%;
            height: 200px;
        }
  
        h4 {
            margin: 0;
            padding: 0;
            background: #fff;
            color: #000;
            box-sizing: border-box;
            padding: 10px 5px;
            font-weight: bold;
            font-size: 20px;
            text-align: center;
        }
    

  

    
        
            
                
            
            Responsive image gallery
        
          
        
            
                
            
            Tab image gallery
        
  
        
            
                
            
            Building header of a website
        
  
        
            
                
            
            image slider
        
  
        
            
                
            
            image lightbox gallery
        
    

  

输出：

全角滑块：同样，我们也可以通过将 jQuery fullWidth选项设置为true来创建全角滑块。我们还可以在滑块底部显示指标。该滑块也兼容触摸。

为了创建这种类型的滑块，我们有一个名为“ carousel carousel-slider ”的类，在这个div中，我们放置用于创建滑块的图像，如下所示。

jQuery 脚本将如下所示进行更改。

Javascript

$('.carousel.carousel-slider').carousel({
    fullWidth: true
});

示例 2：

HTML

  

    
    
    
  
    
    
  
    
    
    
  
    
        $(document).ready(function () {
            $('.carousel.carousel-slider').carousel(
                {
                    fullWidth: true,
                    indicators: true
                }
            );
        });
    

  

    
        
            First Panel
            
        
  
        
            Second Panel
            
        
  
        
            Third Panel
            
        
  
        
            Fourth Panel
            
        
    

  

输出：