为什么我的 SlickJS 轮播从我的页面上消失了？
问题描述 投票：0回答：1
我想使用 slick.js 来轮播我的评论（不需要 slick 的样式，所以我不将其包含在 html 标题中）。当我尝试时，评论容器消失了。如何修复它？我做错了什么？
我希望结果如图所示：
我的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slick test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Customer Reviews Section -->
<section class="reviews" aria-labelledby="reviews-heading">
<div class="reviews-header" >
<h2 id="reviews-heading">Our Happy Customers</h2>
<div class="arrows-container">
<button><img src="./assets/images/arrow-left.svg" alt="left arrow" class="slick-prev" /></button>
<button><img src="./assets/images/arrow-right.svg" alt="right arrow" class="slick-next"/></button>
</div>
</div>
<div class="reviews-container">
<div>
<article class="reviews-item">
<div class="rating">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
</div>
<h3>Moora S. <span class="verified"><img src="./assets/images/verified.svg"></span></h3>
<p>"Shopping at Shop.co has been a game-changer for me. The fit and quality of the clothes are unmatched, and their customer service is always helpful!"</p>
</article>
</div>
<div>
<article class="reviews-item">
<div class="rating">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
</div>
<h3>Sarah M. <span class="verified"><img src="./assets/images/verified.svg"></span></h3>
<p>"I'm blown away by the quality and style of the clothes I received from Shop.co. From casual wear to elegant dresses, every piece I've bought has exceeded my expectations."</p>
</article>
</div>
<div>
<article class="reviews-item">
<div class="rating">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
</div>
<h3>Alex K. <span class="verified"><img src="./assets/images/verified.svg"></span></h3>
<p>"Finding clothes that align with my personal style used to be a challenge until I discovered Shop.co. The range of options they offer is truly remarkable, catering to a variety of tastes and occasions."</p>
</article>
</div>
<div>
<article class="reviews-item">
<div class="rating">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg"></div>
<h3>James L. <span class="verified"><img src="./assets/images/verified.svg"></span></h3>
<p>"As someone who's always on the lookout for unique fashion pieces, I'm thrilled to have stumbled upon Shop.co. The selection of clothes is not only diverse but also on-point with the latest trends."</p>
</article>
</div>
<div>
<article class="reviews-item">
<div class="rating">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg"></div>
<h3>Moora S. <span class="verified"><img src="./assets/images/verified.svg"></span></h3>
<p>"Shopping at Shop.co has been a game-changer for me. The fit and quality of the clothes are unmatched, and their customer service is always helpful!"</p>
</article>
</div>
</div>
</section>
<footer class="footer">
<div class="newsletter">
<h2>Stay up to date about our latest offers</h2>
<form action="#" aria-label="Subscribe to Newsletter">
<label for="email" class="sr-only">Enter your email address</label>
<input type="email" id="email" placeholder="Enter your email address" required>
<button type="submit">Subscribe to Newsletter</button>
</form>
</div>
<div class="footer-content">
<div class="brand">
<h3>SHOP.CO</h3>
<p>We have clothes that suit your style and which you're proud to wear. From women to men.</p>
<div class="social">
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="links">
<div>
<h4>Company</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Career</a></li>
</ul>
</div>
<div>
<h4>Help</h4>
<ul>
<li><a href="#">Customer Support</a></li>
<li><a href="#">Delivery Details</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div>
<h4>FAQ</h4>
<ul>
<li><a href="#">Account</a></li>
<li><a href="#">Manage Deliveries</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">Payments</a></li>
</ul>
</div>
<div>
<h4>Resources</h4>
<ul>
<li><a href="#">Free eBooks</a></li>
<li><a href="#">Development Tutorial</a></li>
<li><a href="#">How to - Blog</a></li>
<li><a href="#">YouTube Playlist</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© Shop.co 2000-2023, All Rights Reserved</p>
<div class="payment-options">
<img src="visa-logo.png" alt="Visa">
<img src="paypal-logo.png" alt="PayPal">
<img src="apple-pay-logo.png" alt="Apple Pay">
<img src="google-pay-logo.png" alt="Google Pay">
</div>
</div>
</footer>
<!-- Include jQuery (required for Slick.js) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Slick JS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
<!-- Link to my External JavaScript -->
<script src=".//reviews-slider.js"></script>
</body>
</html>
我的 CSS 代码
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
}
/* Customer Reviews Section */
.reviews {
display: flex;
flex-direction: column;
align-items: center;
}
.reviews-header{
display: flex;
justify-content: space-between;
align-items: baseline;
width: 100%;
padding: 0 6.25rem;
}
.reviews-container{
display: flex;
gap:20px;
}
.reviews-item{
display: flex;
flex-direction: column;
/* Fixed width of 400px pixels */ ;
width: 450px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 20px;
padding: 28px 32px;
}
.reviews-item p {
font-size: 1rem;
line-height: 22px;
color: rgba(0, 0, 0, 0.6);
}
.reviews-item h3 {
font-size: 1.25rem;
font-weight: 700;
line-height: 22px;
}
.nav-btn {
background-color: #000; /* Button color */
color: #fff;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
margin: 0 5px;
font-size: 16px;
}
.nav-btn:hover {
background-color: #444; /* Darker color on hover */
}
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
color: #333;
}
.footer {
background-color: #f5f5f5;
padding: 20px 0;
}
.newsletter {
background-color: #000;
color: #fff;
padding: 30px 15px;
text-align: center;
}
.newsletter h2 {
font-size: 24px;
margin-bottom: 15px;
}
.newsletter form {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.newsletter input[type="email"] {
padding: 10px;
width: 300px;
border: none;
border-radius: 5px;
font-size: 16px;
}
.newsletter button {
padding: 10px 20px;
background-color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 30px 15px;
}
.footer-content .brand {
flex: 1 1 250px;
text-align: left;
}
.footer-content .brand h3 {
font-size: 20px;
margin-bottom: 10px;
}
.footer-content .brand p {
font-size: 14px;
margin-bottom: 15px;
}
.social {
display: flex;
gap: 10px;
}
.social a {
font-size: 18px;
}
.links {
display: flex;
flex: 2 1 600px;
justify-content: space-around;
}
.links div {
text-align: left;
}
.links h4 {
margin-bottom: 10px;
}
.links ul {
list-style: none;
}
.links ul li {
margin-bottom: 8px;
}
.links ul li a {
color: #333;
text-decoration: none;
}
.links ul li a:hover {
text-decoration: underline;
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px 0;
border-top: 1px solid #ddd;
align-items: center;
text-align: center;
}
.footer-bottom p {
flex: 1;
}
.payment-options {
display: flex;
justify-content: center;
gap: 10px;
}
.payment-options img {
width: 50px;
}
/* Responsive Design */
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
align-items: center;
}
.links {
flex-direction: column;
align-items: center;
}
.newsletter form {
flex-direction: column;
}
.newsletter input[type="email"] {
width: 100%;
}
.footer-bottom {
flex-direction: column;
}
.payment-options {
margin-top: 10px;
}
.reviews-container {
flex-direction: column; /* Stack reviews vertically on small screens */
}
.review {
margin: 10px 0; /* Reduce margin for stacked layout */
}
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
我的Javascript代码
// reviews carousel
$(document).ready(function () {
$(".reviews-container").slick({
slidesToShow: 3, // Number of items visible at once
slidesToScroll: 1, // Number of items scrolled per click
arrows: true, // Enable navigation arrows
prevArrow: $(".slick-prev"), // Use your custom prev arrow
nextArrow: $(".slick-next"), // Use your custom next arrow
responsive: [
{
breakpoint: 768, // Responsive breakpoint
settings: {
slidesToShow: 2, // Adjust slidesToShow on smaller screens
},
},
],
});
});
1个回答
0
投票
投票
要解决此问题，您需要将高度 100% 添加到光滑轮播中的 3 个元素。
- 之前将“article”更改为“h3”
- 在 css 代码末尾添加以下代码，将会再次出现：
/* Solutions */
.slick-list,
.slick-track,
.slick-slide h3 {
height: 100%;
}注意：要继续使用“article”而不是“h3”，您可以更改解决方案的 CSS 代码以适应它。
最新问题
- 如何修改JavaFX中的ChoiceBox复选标记？
- 在pygame中实时播放带有alpha通道和同步音频的两个混合视频？
- 如何在cypher-shell中使用环境变量NEO4J_PASSWORD
- ASP Classic IPN 侦听器可以工作，但现在不行了
- 如何实际使用 cv2.estimateAffine3D 在 python 中对齐 3d 点？
- 如何在 R 中生成具有跨多个组的 FDR 校正 P 值的分层汇总表
- 我无法使用 Exact Alarm 进行颤振本地通知
- Azure OpenAI Studio Playground：在向任何函数提交输出时，我的助手总是返回未定义的错误
- 如何对Bull.js与Redis服务器的连接实现完整而非部分的TLS保护？
- Nuget 资源从 https 更改为 http
- 不同值时如何在同一行返回结果
- 我可以将 boost::intrusive::rbtree 与 stateful_value_traits 一起使用吗？
- 确定next.js中的客户端/服务器组件
- 按照Ieee-754单精度格式实现浮点加法器但移位错误
- 如何在Python中通过OR-Tools使用sorted()和min()函数？
- 来自 openai python SDK 的 AsyncAzureOpenAI 客户端支持自定义快速 API 端点
- 如果我想使用过去/未来数百万年的日期和时间，我该怎么做？
- 使用 docker-compose 进行 LangGraph 部署
- 如何使用 WebDriver Sampler (JMeter) 中的 JMeter 属性 props.get props.put
- 从 winit 获取 windows-rs HWND？
© www.soinside.com 2019 - 2024. All rights reserved.