英文:
How to add Slider to top bullet point
问题
我已添加了Bootstrap 5网站到滑块,滑块运作正常。但我想知道如何将滑块添加到右上角并删除后退和前进箭头,有人知道如何正确做吗?
<!-- language: lang-css -->
.carousel-indicators {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.carousel-indicators button {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
border: none;
margin-right: 10px;
margin-bottom: 0;
}
.carousel-indicators button.active {
background-color: #000;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="row">
<div class="col-md-12">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6">
<img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 1">
</div>
<div class="col-md-6">
<h3>Slide 1</h3>
<p>Some sample text.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6">
<img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 2">
</div>
<div class="col-md-6">
<h3>Slide 2</h3>
<p>Some sample text.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6">
<img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 3">
</div>
<div class="col-md-6">
<h3>Slide 3</h3>
<p>Some sample text.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<details>
<summary>英文:</summary>
I'm added the Bootstrap 5 website to slider slider is working well. but I want know how to added slider top right to bullet points and removed the back and previous arrow, dose anyone know how to do that correctly ?
My sample image here, I tried to create like this
[![enter image description here][1]][1]
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.carousel-indicators {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.carousel-indicators button {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
border: none;
margin-right: 10px;
margin-bottom: 0;
}
.carousel-indicators button.active {
background-color: #000;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="row">
<div class="col-md-12">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6">
<img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 1">
</div>
<div class="col-md-6">
<h3>Slide 1</h3>
<p>Some sample text.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6">
<img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 2">
</div>
<div class="col-md-6">
<h3>Slide 2</h3>
<p>Some sample text.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6">
<img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 3">
</div>
<div class="col-md-6">
<h3>Slide 3</h3>
<p>Some sample text.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- end snippet -->
[1]: https://i.stack.imgur.com/5xsVg.png
</details>
# 答案1
**得分**: 1
删除以下HTML以删除控件(即前进和后退按钮):
```html
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
添加以下CSS以将指示器(即点)移动到右上角:
.carousel-indicators {
position: absolute;
top: 0;
right: 0;
justify-content: end !important;
margin-right: 10% !important;
margin-left: 10% !important;
}
.carousel-indicators button {
width: 10px !important;
height: 10px !important;
border-radius: 100%;
background-color: red !important;
}
此外,将类pt-4
添加到carousel
中。
请查看下面的代码片段。
英文:
Remove the following HTML to remove controls (i.e., previous and next buttons):
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
Add the following CSS to move indicators (i.e., dots) to the top right:
.carousel-indicators {
position: absolute;
top: 0;
right: 0;
justify-content: end !important;
margin-right: 10% !important;
margin-left: 10% !important;
}
.carousel-indicators button {
width: 10px !important;
height: 10px !important;
border-radius: 100%;
background-color: red !important;
}
Also, add the class pt-4
to the carousel
.
See the snippet below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.carousel-indicators {
position: absolute;
top: 0;
right: 0;
justify-content: end !important;
margin-right: 10% !important;
margin-left: 10% !important;
}
.carousel-indicators button {
width: 10px !important;
height: 10px !important;
border-radius: 100%;
background-color: red !important;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide pt-4" data-bs-ride="carousel">
<div class="row">
<div class="col-md-12">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6">
<img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 1">
</div>
<div class="col-md-6">
<h3>Slide 1</h3>
<p>Some sample text.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6">
<img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 2">
</div>
<div class="col-md-6">
<h3>Slide 2</h3>
<p>Some sample text.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6">
<img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 3">
</div>
<div class="col-md-6">
<h3>Slide 3</h3>
<p>Some sample text.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论