问题描述
我正在处理html / css的noobie挑战,但似乎无法使轮播进入下一张幻灯片。据我所知,引导程序已链接(因为当我删除链接时,它会完全转换页面。)知道会发生什么吗?
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Coding Bootcamp Testimonials Slider</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="css.css">
</head>
<body>
<!--Layer 0-->
<div class="level-0">
<div class="quote">
<img class="quote-image" src="images\pattern-quotes.svg" alt="">
</div>
<div class="curve">
<img class="curve-image" src="images\pattern-curve.svg" alt="">
</div>
<div class="bg">
<img class="bg-image" src="images\pattern-bg.svg" alt="">
</div>
</div>
<!--layer 1-->
<div class="level-1">
<div id="testimonials" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>
“ I’ve been interested in coding for a while but never taken the jump,until Now.
I Couldn’t recommend this course enough. I’m Now in the job of my dreams and so
excited about the future. ”
Tanya Sinclair UX Engineer
</p>
<img class="image" src="images\image-tanya.jpg" alt="">
</div>
<div class="carousel-item">
<p>
“ If you want to lay the best foundation possible I’d recommend taking this course.
The depth the instructors go into is incredible. I Now feel so confident about
starting up as a professional developer. ”
John Tarkpor Junior Front-end Developer
</p>
<img class="image" src="images\image-john.jpg" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#testimonials" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="carousel-control-next" href="#testimonials" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Aaron McDonald</a>.
</div>
</body>
</html>
提前感谢您的帮助!
解决方法
不太清楚你的意思是...
删除链接,它会完全转换页面。
但是使用您提供的代码,通过添加Bootstrap 4's javascript files,您的轮播会很好用。
在下面的演示中忽略我的css
和其他html
,但是在代码中包含javascript会使轮播进入下一张幻灯片。
BODY {
background: black !important;
color: white !important;
}
.carousel-control-prev {
left: -15% !important;
}
.carousel-control-next {
right: -15% !important;
}
<div class="row justify-content-center p-4">
<div class="col-8">
<!--layer 1-->
<div class="level-1">
<div id="testimonials" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>
“ I’ve been interested in coding for a while but never taken the jump,until now. I couldn’t recommend this course enough. I’m now in the job of my dreams and so excited about the future. ” Tanya Sinclair UX Engineer
</p>
<img class="image" src="images\image-tanya.jpg" alt="">
</div>
<div class="carousel-item">
<p>
“ If you want to lay the best foundation possible I’d recommend taking this course. The depth the instructors go into is incredible. I now feel so confident about starting up as a professional developer. ” John Tarkpor Junior Front-end Developer
</p>
<img class="image" src="images\image-john.jpg" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#testimonials" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testimonials" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Aaron McDonald</a>.
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
,
只需在代码中添加以下几行,即可正常运行。缺少Javascript。
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>