微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Angular 11 幻灯片中的 Fancybox 自动启动

如何解决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
  }
 });
 }
}

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。