如何解决摆脱轮播堆栈顺序
我正在建立的在线网上商店面临挑战，将引导卡传递到地图功能中后，轮播往往会堆叠在一起，这并不是我真正想要的。我真的很感谢任何建议
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Online Shopping | Splendid</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<!-- Flickity Carousel CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- Font Awesome CDN -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<!-- Site Navigation Header -->
<header>
<nav class="navbar navbar-dark bg-dark navbar-expand" role="navigation">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto justify-content-between w-7">
<a class="navbar-brand" href="#">Splendid!</a>
<li class="nav-item pt-2">
<a href="#">
<i class="fas fa-home pr-1"></i>Home</a>
</li>
<li class="nav-item pt-2">
<a href="#">
<i class="fas fa-Boxes pr-1"></i>Collections</a>
</li>
<li class="nav-item pt-2">
<a href="#">
<i class="fas fa-shopping-cart pr-1"></i>Purchase</a>
</li>
<button class="d-md-block btn btn-danger navbar-btn d-none d-sm-block">Post An Ad</button>
</ul>
</div>
<!-- Navigation Right -->
<ul class="justify-content-between navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-item" href="#">
<i class='fas fa-envelope' style='color: #888888;'></i>
</a>
</li>
<li class="nav-item">
<a class="nav-item" href="#">
<i class='fas fa-user-circle' style='color:#888888;'></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Site Main Section -->
<main class="pb-5">
<!-- Search Section -->
<section class="jumbotron text-center rounded-0">
<div class="container">
<form>
<div class="btn-group">
<button class="btn button rounded-0 pl-0 inline" data-toggle="dropdown"> <i class="fas fa-caret-down"></i> Category</button>
<div class="dropdown-menu">
<a href="#home">Men</a>
<div class="dropdown-divider"></div>
<a href="#about">Women</a>
<div class="dropdown-divider"></div>
<a href="#contact">Jewelery</a>
</div>
<div class="div pl-1"><input id="searchBar" class="rounded-0" style="border: 0 none transparent" type="text" class="form-control" placeholder="Enter Product Name" name="productName"></div>
<div class="div pl-0 mr-2"><input class="rounded-0" style="border: 0 none transparent" type="text" class="form-control" placeholder="Enter Price" name="productPrice"></div>
<button class="btn button rounded-0">Search</button>
</div>
</form>
</div>
</section>
<!-- Category Section Section -->
<div class="category-section">
<div class="category-icon pl-4 pb-4 pt-5"><i class='fas fa-tshirt pr-3' style='font-size:20px;'></i> <span>Fashion</span> (Skirts,Gowns,Pants,Shirts.)</div>
<div class="carousel-wrapper">
<div class="carousel cat-carousel" data-flickity='{ "pageDots": false,"freeScroll": true,"contain": true,"watchCSS": true }'>
<!-- Item 1 -->
<div class="cat-carousel-cell item1" id="productsList">
<!-- <div class="card rounded-0">
<img src="https://picsum.photos/seed/picsum/150/150" />
<div class="card-body">
<h6 class="card-title"></h6>
<p class="card-text"><small class="text-muted"><b>New</b></small></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content=''>+</button>
<div id="popover-content" style="display: none;">
<ul class="list-group custom-popover">
<li class="list-group-item">Send Message</li>
<li class="list-group-item">Add To Collection</li>
<li class="list-group-item">More Details</li>
</ul>
</div>
</div>
<p class="text-muted pt-3"><b>$70</b></p>
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
</main>
<!-- Site footer -->
<footer class="site-footer border-top">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 about-content">
<h6 class="text-center">About</h6>
<p class="text-justify pt-1"><i>Splendid</i> is an Etiam dictum nunc at diam iaculis,eget efficitur mi maximus. Aliquam non aliquam tortor. Sed dapibus odio ut auctor ultricies. Sed viverra velit ligula,vitae dictum ipsum hendrerit id. Aenean congue ante nec ex placerat,ut bibendum sem volutpat. Aliquam hendrerit convallis velit eu soDales. Sed eget pharetra lacus,vitae laoreet elit.</p>
</div>
<div class="col-xs-6 col-md-3 category-content">
<h6>Categories</h6>
<hr>
<ul class="footer-links">
<li><a href="#">Accessories</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Women</a></li>
<li><a href="#">Kids</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">decorations</a></li>
</ul>
</div>
<div class="col-xs-6 col-md-3 navigation-content">
<h6>Navigation</h6>
<hr>
<ul class="footer-links">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Register</a></li>
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">copyright © 2020 All Rights Reserved by
<a href="#">Splendid</a>.
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a class="twitter" href="#"><i class="fab fa-twitter"></i></a></li>
<li><a class="dribbble" href="#"><i class="fab fa-dribbble"></i></a></li>
<li><a class="linkedin" href="#"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
const productsList = document.getElementById('productsList');
let splendidProducts = [];
const searchBar = document.getElementById('searchBar');
const loadProducts = async () => {
try {
const res = await fetch('https://fakestoreapi.com/products');
splendidProducts = await res.json();
displayProducts(splendidProducts);
} catch (err) {
console.error(err);
}
};
const displayProducts = (products) => {
const htmlString = products
.map((card) => {
return `
<div class="card rounded-0">
<img src="${card.image}" style="max-height: 100px;" />
<div class="card-body">
<h6 class="card-title">${card.title}</h6>
<p class="card-text"><small class="text-muted"><b>New</b></small></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content=''>+</button>
<div id="popover-content" style="display: none;">
<ul class="list-group custom-popover">
<li class="list-group-item">Send Message</li>
<li class="list-group-item">Add To Collection</li>
<li class="list-group-item">More Details</li>
</ul>
</div>
</div>
<p class="text-muted pt-3"><b>$${card.price}</b></p>
</div>
</div>
</div>
`;
})
.join('');
productsList.innerHTML = htmlString;
};
loadProducts();
</script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
我所使用的只是我在网上找到的一家假货商店的api，然后将其用于展示产品范围，轮播被认为可以使这些产品的展示更加独特。
到我的密码笔的链接可以在下面找到：
https://codepen.io/OluwaseunII/pen/QWNzqwv
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
