带Javascript函数的引导旋转木马，用于播放和暂停（JQUERY）

我通过了课程，我按照视频和说明做了所有事情，但是当你点击按钮（暂停符号）时，它不会变为播放符号。但有一点是肯定的

我该怎么办

Javascript/CSS/HTML

$（文档）.ready（函数（）{
$（#carousel'）。carousel（{interval:2000}）；
$（“#旋转木马按钮”）。单击（函数（）{
if（$（“#旋转按钮”）.children（“span”）.hasClass（'fa-pause'））{
$（“旋转木马”）。旋转木马（“暂停”）；
$（“#旋转按钮”）.children（“span”）.removeClass（“fa-pause”）；
$（“#旋转按钮”）.children（“span”）.addClass（“fa-play”）；
}
else if（$（“#旋转木马按钮”）.children（“span”）.hasClass（“fa-play”））{
$（“旋转木马”）。旋转木马（“循环”）；
$（“#旋转按钮”）。儿童（“span”）。移除类（“fa-play”）；
$（“#旋转按钮”）.children（“span”）.addClass（“fa-pause”）；
}
});
});

正文{
背景色：#FAEBD7
}
琼伯伦先生{
填充：70px 30px 70px 30px；
保证金：0px自动；
背景#8A2BE2；
颜色：花白色；
}
.导航栏内部{
背景：透明；
}
.主要信息{
边缘底部：100px；
}
M.左{
左边距：10px；
}
.关于{
边缘底部：50px；
左边距：120像素；
}
.行标题{
保证金：0px自动；
填充：0px；
边界：1px；
左边距：30px；
}
/*类，用于分离粘在一起的两种形式*/
.表格{
边缘底部：10px；
}
.行内容{
保证金：0px自动；
填充：50px 0px 50px 0px；
边界底部：1倍脊；
最小高度：400px；
}
.公司{
边缘顶部：150px；
边际下限：50px
}
.页脚{
背景色：#D1C4E9；
保证金：0px自动；
填充：20px 0px 20px 0px；
}
.见面{
边际下限：100px
}
.选项卡内容{
左边框：1px实心#ddd；
右边框：1px实心#ddd；
边框底部：1px实心#ddd；
填充：10px；
}
旋转木马{
背景：#512DA8；
}
.传送带项目{
高度：300px；
}
.旋转木马项目img{
位置：绝对位置；
排名：0；
左：0；
最小高度：300px；
}
1.底价准备金{
边缘底部：10px；
}
#旋转按钮{
右：0px；
位置：绝对位置；
底部：0px；
z指数：2；
}

HTML
Ristorante Con Fusion：关于我们






Uthappizza HOT$4.99
印度乌萨帕姆（煎饼）和
意大利披萨，上面撒着樱桃橄榄，成熟的藤蔓
樱桃番茄、维达利亚洋葱、甘特辣椒和
水牛皮涅尔
纽约周末大自助酒店
以令人垂涎欲滴的组合为特色，可选择五种不同的沙拉、六种诱人的开胃菜、六种主菜和五种精选甜点。自由流动的泡沫饮料和软饮料。每人只需19.99美元
索马亚酒店
行政总厨
屡获殊荣的三星级米其林，拥有广泛的国际经验，他与世界卫生组织在烹饪工作中密切合作，擅长创造令人垂涎欲滴的印度-意大利融合体验



我们迷人的烹饪创意
Uthappizza HOT$4.99
印度乌萨帕姆（煎饼）和
意大利披萨，上面撒着樱桃橄榄，成熟的藤蔓
樱桃番茄、维达利亚洋葱、甘特辣椒和
水牛皮涅尔
本月的促销活动
                <div class="btn group" id="carouselButton">
                <button class="btn btn-danger btn-sm" id="carouselButton">
                    <span id="carousel-button-icon" class="fa fa-pause"></span>
                </button>
            </div>

<div class="btn group" >
                <button class="btn btn-danger btn-sm" id="carouselButton">
                    <span id="carousel-button-icon" class="fa fa-pause"></span>
                </button>
            </div>