如何将滑块添加到顶部标志点

huangapple
go评论70阅读模式
英文:

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&#39;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]
&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
&lt;!-- language: lang-css --&gt;
.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;
}
&lt;!-- language: lang-html --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js&quot; integrity=&quot;sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;myCarousel&quot; class=&quot;carousel slide&quot; data-bs-ride=&quot;carousel&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-12&quot;&gt;
&lt;div class=&quot;carousel-inner&quot;&gt;
&lt;div class=&quot;carousel-item active&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;img src=&quot;https://via.placeholder.com/150x100/cccccc/ffffff&quot; class=&quot;d-block w-100&quot; alt=&quot;Slide 1&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;h3&gt;Slide 1&lt;/h3&gt;
&lt;p&gt;Some sample text.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;img src=&quot;https://via.placeholder.com/150x100/cccccc/ffffff&quot; class=&quot;d-block w-100&quot; alt=&quot;Slide 2&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;h3&gt;Slide 2&lt;/h3&gt;
&lt;p&gt;Some sample text.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;img src=&quot;https://via.placeholder.com/150x100/cccccc/ffffff&quot; class=&quot;d-block w-100&quot; alt=&quot;Slide 3&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;h3&gt;Slide 3&lt;/h3&gt;
&lt;p&gt;Some sample text.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;button class=&quot;carousel-control-prev&quot; type=&quot;button&quot; data-bs-target=&quot;#myCarousel&quot; data-bs-slide=&quot;prev&quot;&gt;
&lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Previous&lt;/span&gt;
&lt;/button&gt;
&lt;button class=&quot;carousel-control-next&quot; type=&quot;button&quot; data-bs-target=&quot;#myCarousel&quot; data-bs-slide=&quot;next&quot;&gt;
&lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Next&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;!-- end snippet --&gt;
[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):

&lt;button class=&quot;carousel-control-prev&quot; type=&quot;button&quot; data-bs-target=&quot;#myCarousel&quot; data-bs-slide=&quot;prev&quot;&gt;
&lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Previous&lt;/span&gt;
&lt;/button&gt;
&lt;button class=&quot;carousel-control-next&quot; type=&quot;button&quot; data-bs-target=&quot;#myCarousel&quot; data-bs-slide=&quot;next&quot;&gt;
&lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Next&lt;/span&gt;
&lt;/button&gt;

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 -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js&quot; integrity=&quot;sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-12&quot;&gt;
&lt;div class=&quot;carousel-indicators&quot;&gt;
&lt;button type=&quot;button&quot; data-bs-target=&quot;#myCarousel&quot; data-bs-slide-to=&quot;0&quot; class=&quot;active&quot; aria-current=&quot;true&quot; aria-label=&quot;Slide 1&quot;&gt;&lt;/button&gt;
&lt;button type=&quot;button&quot; data-bs-target=&quot;#myCarousel&quot; data-bs-slide-to=&quot;1&quot; aria-label=&quot;Slide 2&quot;&gt;&lt;/button&gt;
&lt;button type=&quot;button&quot; data-bs-target=&quot;#myCarousel&quot; data-bs-slide-to=&quot;2&quot; aria-label=&quot;Slide 3&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;myCarousel&quot; class=&quot;carousel slide pt-4&quot; data-bs-ride=&quot;carousel&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-12&quot;&gt;
&lt;div class=&quot;carousel-inner&quot;&gt;
&lt;div class=&quot;carousel-item active&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;img src=&quot;https://via.placeholder.com/150x100/cccccc/ffffff&quot; class=&quot;d-block w-100&quot; alt=&quot;Slide 1&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;h3&gt;Slide 1&lt;/h3&gt;
&lt;p&gt;Some sample text.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;img src=&quot;https://via.placeholder.com/150x100/cccccc/ffffff&quot; class=&quot;d-block w-100&quot; alt=&quot;Slide 2&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;h3&gt;Slide 2&lt;/h3&gt;
&lt;p&gt;Some sample text.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;carousel-item&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;img src=&quot;https://via.placeholder.com/150x100/cccccc/ffffff&quot; class=&quot;d-block w-100&quot; alt=&quot;Slide 3&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;h3&gt;Slide 3&lt;/h3&gt;
&lt;p&gt;Some sample text.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月24日 00:21:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/75547540.html
  • bootstrap-5
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定