【发布时间】：2021-02-18 13:52:05
【问题描述】：
我的卡片轮播无法正常工作。我还在学习 JS，但我很肯定这就是问题所在，我不知道如何解决它。每当我单击此轮播的按钮/箭头时，它不会滑动，而是重新加载整个页面。我检查了所有内容，但显然我一直缺少一些东西。这是JS中的代码：
(function($) {
"use strict";
$('.next').click(function(){ $('.carousel').carousel('next');return false; });
$('.prev').click(function(){ $('.carousel').carousel('prev');return false; });
})(jQuery);
HTML：
<section class="container pt-3">
<div class="row">
<div class="col-lg-12">
<h1>Vesti</h1>
</div>
</div>
</section>
<section class="carousel slide" data-ride="carousel" id="postsCarousel">
<div class="container">
<div class="row">
<div class="col-12 text-md-right lead">
<a class="btn btn-secondary-outline prev" href=""><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-secondary-outline next" href=""><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container pt-0 mt-2">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-deck">
<div class="card h-100">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="slike/img1.jpg" alt="Carousel 1">
</div>
<div class="card-body pt-2">
<h6 class="small text-wide p-b-2">Lorem</h6>
<h2>
<a href="">Lorem Ipsum</a>
</h2>
</div>
</div>
<div class="card h-100">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="slike/img2.jpg" alt="Carousel 2">
</div>
<div class="card-body pt-2">
<h6 class="small text-wide p-b-2">Lorem</h6>
<h2>
<a href="">Lorem Ipsum</a>
</h2>
</div>
</div>
<div class="card h-100">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="slike/img3.jpg" alt="Carousel 3">
</div>
<div class="card-body pt-2">
<h6 class="small text-wide p-b-2">Lorem</h6>
<h2>
<a href="">Lorem Ipsum</a>
</h2>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card-deck">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="slike/img4.png" alt="Carousel 4">
</div>
<div class="card-body pt-2">
<h6 class="small text-wide p-b-2">Category 2</h6>
<h2>
<a href="">Lorem Ipsum</a>
</h2>
</div>
</div>
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="slike/img5.jpg" alt="Carousel 5">
</div>
<div class="card-body pt-2">
<h6 class="small text-wide p-b-2"><span class="pull-xs-right">12.04</span> Category
1</h6>
<h2>
<a href="">Lorem Ipsum</a>
</h2>
</div>
</div>
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="slike/img6.jpg" alt="Carousel 6">
</div>
<div class="card-body pt-2">
<h6 class="small text-wide p-b-2">Category 3</h6>
<h2>
<a href="">Lorem Ipsum</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
【问题讨论】：
标签： javascript html css bootstrap-4