我正在创建自己的网站，并且是一个不错的初学者。我在一页中设置了3个卡片项目，以便在总共3页的旋转木马中旋转(click here to view)。这些卡项目代表项目，共有9个。卡上方是单选按钮。我已经设置好所有东西，当我使用“ data-ride =” carousel“时，它可以工作并显示我的所有轮播卡片。我只是不知道如何将单选按钮连接到Carousel页面。我想要第一个圆圈连接到第1页，第2个圆圈连接到第2页，依此类推，我们将不胜感激！谢谢您！
/*Bootstrap Card Slider*/
/* ensure equal card height inside carousel */
.carousel-inner>.row-equal.active,
.carousel-inner>.row-equal.next,
.carousel-inner>.row-equal.prev {
display: flex;
}
/* prevent flicker during transition */
.carousel-inner>.row-equal.active.left,
.carousel-inner>.row-equal.active.right {
opacity: 0.5;
display: flex;
}
/* control image height */
.img-top .img-fluid {
height: 20em;
width: 100%;
overflow: hidden;
border-color: none;
}
.projectcontainer .carousel-inner { margin: 0;
padding: 0 90px 0 90px;
width: 100%;
}
/*Text Style*/
.card-header h3{color:#000;
font-family: keepcalm;
text-transform: uppercase;
text-align: left;
font-size: 18px;
letter-spacing: 1px;
margin: 0 0 0 0;
padding: 10px 0 0 0;
}
.card-header h4{color:#000;
font-family: centurygothic;
text-align: left;
font-size: 16px;
margin: 0 0 0 0;
padding: 0 0 15px 0;
}
.card-text {font-family: centurygothic;
font-size: 11pt;
line-height: 16pt;}
.radio-group {margin: 0 auto;
width: 100px;
}
.radiocontainer input {display: none;}
.radiocontainer .circle {
display: inline-block;
width: 18px;
height: 18px;
border: 3px solid #363636;
background-color: #ffff;
align-content: center;
border-radius: 50%;
padding: 0; }
.radiocontainer:hover .circle {
border: 3px solid #e8e8e8;}
.radiocontainer input:checked + .circle {
background-color: #363636;}
.radiocontainer input:checked + .circle:after {
background-color: #363636;}
<!--Bootstrap Card Slider-->
<section class=" carousel slider" data-ride="carousel" id="postsCarousel">
<!--Radio Buttons-->
<div class="radio-group">
<label class="radiocontainer">
<input type="radio" value="Page1" name="Page1radio" class="radio"><span class=circle></span></label>
<label class="radiocontainer">
<input type="radio" value="Page2" name="Page2radio" class="radio"><span class=circle></span></label>
<label class="radiocontainer"><input type="radio" value="Page3" name="Page3radio" class="radio"> <span class=circle></span></label>
</div>
<div class="projectcontainer carousel-inner">
<!--First Page-->
<div class="row row-equal carousel-item active">
<div class="col-md-4">
<div class="card border-0">
<div class="img-top"><img class="img-fluid Project1" src="Project1.png" alt="Project 1"></div>
<div class="card-block border-0">
<div class="card-header bg-white border-0 p-0"><h3>Project 1</h3><h4>Project Subtitle</h4></div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium animi molestias veritatis, pariatur dolorem error non reprehenderit vero, id. Incidunt hic laudantium soluta recusandae, voluptas libero et! Ipsa, maiores, ratione.</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0">
<div class="img-top"> <img class="img-fluid Project2" src="Project2.png" alt="Project 2"></div>
<div class="card-block">
<div class="card-header bg-white border-0 p-0"><h3>Project 2</h3><h4>Project Subtitle</h4></div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium animi molestias veritatis, pariatur dolorem error non reprehenderit vero, id. Incidunt hic laudantium soluta recusandae, voluptas libero et! Ipsa, maiores, ratione.</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0">
<div class="img-top"><img class="img-fluid Project3" src="Images/project32.jpg" alt="Project 3"></div>
<div class="card-block">
<div class="card-header bg-white border-0 p-0"><h3>Project 3</h3><h4>Project Subtitle</h4></div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium animi molestias veritatis, pariatur dolorem error non reprehenderit vero, id. Incidunt hic laudantium soluta recusandae, voluptas libero et! Ipsa, maiores, ratione.</div>
</div>
</div>
</div>
</div>
<!--Second Page-->
<div class="row row-equal carousel-item m-t-0">
<div class="col-md-4">
<div class="card border-0">
<div class="img-top"><img class="img-fluid Project4" src="project4.png" alt="Project 4"></div>
<div class="card-block">
<div class="card-header bg-white border-0 p-0"><h3>Project 4</h3><h4>Project Subtitle</h4></div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium animi molestias veritatis, pariatur dolorem error non reprehenderit vero, id. Incidunt hic laudantium soluta recusandae, voluptas libero et! Ipsa, maiores, ratione.</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0">
<div class="img-top"><img class="img-fluid Project5" src="project5.png" alt="Project 5"></div>
<div class="card-block">
<div class="card-header bg-white border-0 p-0"><h3>Project 5</h3><h4>Project Subtitle</h4></div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium animi molestias veritatis, pariatur dolorem error non reprehenderit vero, id. Incidunt hic laudantium soluta recusandae, voluptas libero et! Ipsa, maiores, ratione.</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0">
<div class="img-top"><img class="img-fluid Project6" src="project6.png" alt="Project 6"></div>
<div class="card-block">
<div class="card-header bg-white border-0 p-0"><h3>Project 6</h3><h4>Project Subtitle</h4></div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium animi molestias veritatis, pariatur dolorem error non reprehenderit vero, id. Incidunt hic laudantium soluta recusandae, voluptas libero et! Ipsa, maiores, ratione.</div>
</div>
</div>
</div>
</div>
<!--Third Page-->
<div class="row row-equal carousel-item m-t-0">
<div class="col-md-4">
<div class="card border-0">
<div class="img-top"><img class="img-fluid Project7" src="project7.jpg" alt="Project 7"></div>
<div class="card-block">
<div class="card-header bg-white border-0 p-0"><h3>Project 7</h3><h4>Project Subtitle</h4></div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium animi molestias veritatis, pariatur dolorem error non reprehenderit vero, id. Incidunt hic laudantium soluta recusandae, voluptas libero et! Ipsa, maiores, ratione.</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0">
<div class="img-top"><img class="img-fluid Project8" src="project8.jpg" alt="Project 8"></div>
<div class="card-block">
<div class="card-header bg-white border-0 p-0"><h3>Project 8</h3><h4>Project Subtitle</h4></div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium animi molestias veritatis, pariatur dolorem error non reprehenderit vero, id. Incidunt hic laudantium soluta recusandae, voluptas libero et! Ipsa, maiores, ratione.</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0">
<div class="img-top"><img class="img-fluid Project9" src="project9.jpg" alt="Project 9"></div>
<div class="card-block">
<div class="card-header bg-white border-0 p-0"><h3>Project 9</h3><h4>Project Subtitle</h4></div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium animi molestias veritatis, pariatur dolorem error non reprehenderit vero, id. Incidunt hic laudantium soluta recusandae, voluptas libero et! Ipsa, maiores, ratione.</div>
</div>
</div>
</div>
</div>
</div>
</section>