如何解决Angular 11 幻灯片中的 Fancybox 自动启动
我正在 Angular 11 中处理fancybox 画廊图像。我已经设法使用fancybox 查看我的图像,但我希望幻灯片自动播放。我该怎么做?有没有办法通过添加像 autostart="true" 这样的 html 属性来做到这一点?
这是我的故事提要实现。
<div class="stories-Feed">
<div class="columns is-multiline">
<div class="column is-4 is-half-tablet" *ngFor="let story of stories | orderBy : '-createdDate'">
<!--Feed item-->
<div class="story-Feed-item" id="story-item">
<a href="{{story.imageUrl}}" title="{{story.description}}" data-demo-href="{{story.imageUrl}}"
data-fancybox="images" attr.data-caption="{{story.description}}">
<img class="featured-image" src="{{story.imageUrl}}" data-demo-src="{{story.imageUrl}}"
alt="{{story.description}}" data-caption="{{story.description}}">
</a>
<a class="item-Meta">
<div class="user-info">
<div class="small-avatar">
<img class="avatar" src="{{story.createdByUserPhoto}}"
data-demo-src="{{story.createdByUserPhoto}}" data-user-popover="10" alt=""
title="{{story.createdByUserName}}">
</div>
<span>{{story.createdByUserName}}</span>
</div>
<div class="item-stats">
<div class="stat-item">
<mat-icon>favorite_border</mat-icon>
<span>99</span>
</div>
<div class="stat-item">
<mat-icon>chat_bubble_outline</mat-icon>
<span>23</span>
</div>
</div>
</a>
</div>
</div>
</div>
import { Component,Input,OnInit } from '@angular/core';
declare var jQuery: any
/* Models */
import { Story } from '../../../models/story/story';
@Component({
selector: 'app-story-Feed',templateUrl: './story-Feed.component.html',styleUrls: ['./story-Feed.component.scss']
})
export class StoryFeedComponent implements OnInit {
constructor() { }
@input() stories: Story[];
ngOnInit() {
jQuery('[data-fancybox="images"],[data-fancybox="gallery"]').fancybox({
slideShow : {
autoStart : true
}
});
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。