- Materialize轮播图的实现
- 掌握 Materialize CSS:创建响应式网页设计
- 使用 Materialize CSS 框架中的颜色:详解与示例
- 使用 Materialize CSS 框架中的网格系统:详解与示例
- Materialize CSS 框架中的 Helpers(辅助类) 使用指南
- 使用 Materialize CSS 框架中的 Media 类:详解与示例
- Materialize CSS 中 Sass 的使用:详细指南与示例
- Materialize CSS 框架中 Shadow(阴影)的使用详解与示例
- Materialize CSS 框架中 Table 的使用详解与示例
- Materialize CSS 框架中 CSS Transitions 的使用详解
- Materialize CSS 框架中的 Typography 使用详解
- Materialize CSS 框架中 Badges 的使用详解
- Materialize CSS 框架中 Buttons 的使用详解
- Materialize CSS 框架中 Breadcrumbs 的使用详解
- Materialize CSS 框架中 Cards 的使用详解
- Materialize CSS 框架中 Collections 的使用详解
- Materialize CSS 框架中 Floating Action Button 的使用详解
- Materialize CSS 框架中 Footer 的使用详解
- Materialize CSS 框架中 Icons 的使用详解
- Materialize CSS 框架中 Navbar 的使用详解
- Materialize CSS 框架中 Pagination 的使用详解
- Preloader(预加载组件)
- Materialize CSS 框架中的 Carousel 使用指南
- Materialize CSS 框架中的 Collapsible 使用指南
- Materialize CSS 框架中的 Dropdown 使用指南
- Materialize CSS 框架中的 Feature Discovery 使用指南
- Materialize CSS 框架中的 Media 使用指南
- Materialize CSS 框架中的 Javascript Media 使用指南
- Materialize CSS 框架中的 Materialboxed 使用指南
- Materialize CSS 框架中的 Slider 和 Fullscreen Slider 使用指南
- Materialize CSS 框架中的 Modals 使用指南
- Materialize CSS 框架中的 Parallax 使用指南
- Materialize CSS 框架中的 Pushpin 使用指南
- Materialize CSS 框架中的 Scrollspy 使用指南
- Materialize CSS 框架中的 Sidenav 使用指南
- Materialize CSS 框架中的 Tabs 使用指南
- Materialize CSS 框架中的 Toasts 使用指南
- 使用 Materialize CSS 框架中的 Tooltips
- 使用 Materialize CSS 框架中的 Waves 效果
- 使用 Materialize CSS 框架中的 Form Autocomplete
- 使用 Materialize CSS 框架中的 Form Checkboxes
- 使用 Materialize CSS 框架中的 Form Chips
- 使用 Materialize CSS 框架中的 Form Pickers
- 使用 Materialize CSS 框架中的 Form Radio Buttons
- Materialize CSS 框架中的 Form Range 组件使用指南
- Materialize CSS 框架中的 Form Select 组件使用指南
- Materialize CSS 框架中 Form Switches 的使用指南
- Materialize CSS 框架中 Form Text Inputs 的使用指南
- Materialize CSS 框架中的 Auto Init 使用指南
Materialize轮播图的实现
class Materialize,轮播背景
在使用Vue开发时,我们不希望引入JQuery,引入JQuery会加大前端资源大小,我们可以不使用JQuery来使用Materializecss框架
html代码如下:
<div class="carousel carousel-slider center">
<div class="carousel-fixed-item center">
<a class="btn waves-effect white grey-text darken-text-2">按钮</a>
</div>
<div class="carousel-item red white-text" href="#one!">
<h2>第一个面板</h2>
<p class="white-text">这是第一个面板</p>
</div>
<div class="carousel-item amber white-text" href="#two!">
<h2>第二个面板</h2>
<p class="white-text">这是第二个面板</p>
</div>
<div class="carousel-item green white-text" href="#three!">
<h2>第三个面板</h2>
<p class="white-text">这是第三个面板</p>
</div>
<div class="carousel-item blue white-text" href="#four!">
<h2>第四个面板</h2>
<p class="white-text">这是第四个面板</p>
</div>
</div>
使用js代码初始化
document.addEventListener("DOMContentLoaded", function() {
const elems = document.querySelectorAll(".carousel")
var instance = M.Carousel.init(elems, {
fullWidth: true,
indicators: true
});
// 实现自动轮播效果
const timer = setInterval(function() {
instance[0].next();
}, 4000)
});
chat评论区
评论列表
{{ item.user.nickname || item.user.username }}