如何使用纯JS通过api使用数据进行轮播

问题描述

使用纯 javascript，我有一个 api，可以为我带来 30 张图片，这是有效的，所有图片都在我的页面中，但是我限制在页面中显示 2 个或最大媒体 768px 的 1 个，它们受到限制我的 div 的宽度。我还创建了一个需要传递到下一个或上一个图像的按钮，这是我的问题，我需要 javascript 中的一些函数来传递到下一个或上一个

const linkApi = "https://picsum.photos/v2/list";

const container = document.querySelector("#card-2-projectsList");
let contentHTML = '';

fetch(linkApi)
  .then(response => response.json())
  .then(data => {

    for (const results of data) {
      contentHTML += `
      <li class="card-2-listContent">
    <img class="card-2-projectimages" src="${results.download_url}">
    </li>`
    }
    container.innerHTML = contentHTML;
  })

.card-2-projects {
    width: 100%;
}

.card-2-projectsTitle {
    font-size: 16px;
    font-weight: bold;
}

.card-2-projectsCarousel {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-2-projectBtn {
    width: 10px;
    height: 40px;
    background-color: #C4C8CC;
    border: none;
    cursor: pointer;
    clip-path: polygon(0% 50%,100% 0%,100% 100%);
}
.card-2-projectBtn:last-child {
    transform: rotate(180deg);
}
.card-2-projectBtn:hover {
    background-color: #5A5789;
}



.card-2-projectsDivList {
    flex-grow: 1;
    overflow: hidden;
    max-width: 400px;
}

.card-2-projectsList {
    position: relative;
    left: 0;
    display: flex;
    transition: left .25s ease;
 
   
}

.card-2-listContent {
    height: 0;
    width: calc(100% - 20px);
    margin: 0 10px 9px;
    padding-bottom: 50%;
    background-color: white;
    display: block;
    position: relative;
    Box-shadow: 0px 3px 6px #2E2D2C66;
    cursor: pointer;
    flex-shrink: 0;
}



@media only screen and (min-width: 768px) {
    .card-2-listContent {
        width: calc(50% - 20px);
        padding-bottom: 30%;
    }
}

.card-2-projectimages {
    width: 100%;
    height: 100%;
    border: 2px solid white;
    position: absolute;
    opacity: 1;
    object-fit: cover;
}
.card-2-projectimages:hover {
opacity: 0.5;
}

<div class="card-2-projects">
                    <label class="card-2-projectsTitle">Your Projects:</label>
                    <div class="card-2-projectsCarousel">
                        <button class="card-2-projectBtn" onclick="someFunction(-1)">
                        </button>
                        <div class="card-2-projectsDivList">
                            <ul class="card-2-projectsList" id="card-2-projectsList">

                            </ul>
                        </div>
                        <button class="card-2-projectBtn" onclick="someFunction(0)">
                        </button>
                    </div>
                </div>

我的问题只是让左右两个按钮都工作

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）