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 (将#修改为@）

angular angular fancybox