英文:
Rounded Corners of Carousel Images with Bootstrap 5
问题
只有轮播图左侧的角是圆角的,在滑动动画期间,这些角也会再次变尖。
#carouselCoulumn1Neutral {
padding-left: 40px;
padding-top: auto;
padding-right: 20px;
padding-bottom: auto;
}
#carouselAboutNeutral {
background-color: lightgrey;
border-radius: 10px;
padding: 5px;
}
#carouselImagesNeutral {
max-height: 100%;
border-radius: 10px;
}
<div class="row">
<div class="col-sm-7" id="carouselCoulumn1Neutral">
<div class="carousel slide" data-bs-ride="carousel" id="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<!--<img src="Images/LianaMikah1.jpg" alt="LianaMikah1" id="carouselImagesNeutral">-->
<div style="background-color:pink;" id="carouselImagesNeutral">
<p>Pink</p>
</div>
</div>
<div class="carousel-item">
<!--<img src="Images/LianaMikah7.jpg" alt="LianaMikah7" id="carouselImagesNeutral">-->
<div style="background-color:blue;" id="carouselImagesNeutral">
<p>Blue</p>
</div>
</div>
<div class="carousel-item">
<!--<img src="Images/LianaMikah8.jpg" alt="LianaMikah8" id="carouselImagesNeutral">-->
<div style="background-color:green;" id="carouselImagesNeutral">
<p>Green</p>
</div>
</div>
</div>
<!-- 左右控制/图标 -->
<button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
</div>
理想情况下,我希望所有角都是一致的圆角。我不确定如何实现这一点。
编辑:添加代码片段后,我发现 div 的四个角都是圆角的,但在滑动动画期间角仍然会变尖。
英文:
Only the corners on the left side of the carousel images are rounded, and during the sliding animation those corners also become pointed again.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#carouselCoulumn1Neutral {
padding-left: 40px;
padding-top: auto;
padding-right: 20px;
padding-bottom: auto;
}
#carouselAboutNeutral {
background-color: lightgrey;
border-radius: 10px;
padding: 5px;
}
#carouselImagesNeutral {
max-height: 100%;
border-radius: 10px;
}
<!-- language: lang-html -->
<div class="row">
<div class="col-sm-7" id="carouselCoulumn1Neutral">
<div class="carousel slide" data-bs-ride="carousel" id="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<!-- <img src="Images/LianaMikah1.jpg" alt="LianaMikah1" id="carouselImagesNeutral"> -->
<div style="background-color:pink;" id="carouselImagesNeutral">
<p>Pink</p>
</div>
</div>
<div class="carousel-item">
<!-- <img src="Images/LianaMikah7.jpg" alt="LianaMikah7" id="carouselImagesNeutral"> -->
<div style="background-color:blue;" id="carouselImagesNeutral">
<p>Blue</p>
</div>
</div>
<div class="carousel-item">
<!-- <img src="Images/LianaMikah8.jpg" alt="LianaMikah8" id="carouselImagesNeutral"> -->
<div style="background-color:green;" id="carouselImagesNeutral">
<p>Green</p>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
<!-- <div class="col-sm-4" id="carouselCoulumn2Neutral">
<div id="carouselAboutNeutral">
<h3>About Carousel</h3>
<p>Something about the carousel</p>
</div>
</div> -->
</div>
<!-- end snippet -->
Ideally, I would like for the corners to be consistently rounded. I am unsure of how to achieve this.
Edited: After adding the code snippet I have found that all four corners of the div are rounded, however, the corners still become pointed during the sliding animation.
答案1
得分: 1
在我的评论中提到,只需将rounded
类添加到具有carousel-inner
类的元素。
在Bootstrap 5中,您有5种不同大小的预定义圆角,分别是rounded-1
,rounded-2
等。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="p-3">
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner rounded-5">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- end snippet -->
如果您希望为轮播元素添加圆角,请将相应的rounded-X
类添加到carousel-inner
元素中,其中X是您希望的圆角大小。
英文:
As mentionned in my comment, simply add the rounded
class to the element with the carousel-inner
class.
With Bootstrap 5, you have 5 different sizes of rounded corners that are pre-defined: rounded-1
, rounded-2
, etc.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="p-3">
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner rounded-5">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论