我在项目中使用angular2-materialize。
我的旋转木马在桌面上运行良好,但在移动设备中不会滑动。
我已经尝试了文档中的所有示例,但我得到了相同的结果:适用于桌面设备,但不适用于移动设备。
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
declare var jQuery: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
/* Materialize CSS Plugins */
ngOnInit() {
jQuery(document).ready(function() {
//Initialize collapse button
jQuery(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
jQuery('.collapsible').collapsible();
//Initialize carousel
jQuery('.carousel').carousel({
dist:0,
shift:0,
padding:20,
});
});
}
}
横幅carousel.component.html
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
</div>