unsplash实现轮播图

unsplash实现轮播图

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

html

 <nz-carousel nzAutoPlay>
            <div class="d-flex flex-column" style="display: block;"  nz-carousel-content *ngFor="let item of data">
                <img src="{{item.urls.regular}}" />
                <!-- &dpr=2&auto=enhance&w=500&h=300&fit=crop -->
                <div class="d-flex flex-row justify-content-end text-white" style="position:fixed;top:0;padding: 5px;">
                    <a className="credit" class="text-white" target="_blank" href="https://unsplash.com/@{{item.user.username}}">
                        unsplash.com@{{item.user.name}}
                    </a>
                </div>
                
            </div>
          </nz-carousel>

 fetch("https://api.unsplash.com/users/sleepyping/likes?client_id=g6VRw6WHrCQZz85CM1QaZDABiWxla_S8JjEC0HIlovc&ar=9:3&fit=fill&fill=solid&fill-color=orange"
        ,{headers:{"Accept-Version": "v1","content_filter":"high"}})
        .then((res) => {
          const data = res.json();
          return data;
        })
        .then((data) => {
          console.log(data);
          this.data = data;
        //   for (let i = 0; i < data.length; i++) {
        //     let container = document.querySelector(".container");
        //     let img = document.createElement("img");
        //     img.setAttribute("src", data[i].urls.small);
        //     container.append(img);
        //   }
        });

https://unsplash.com/@sleepyping