我目前在我的项目中重建了这个课程的自定义图像滑块.
https://monsterlessons-academy.com/posts/angular-slider-build-angular-carousel-from-scratch-tutorial个
(文章底部还有一个指向GitHub源代码的链接.)
正如您在教程中的示例中所看到的，滑块位于页面的中央.
I would like to insert the slider in full width of the page and automatically adjust the height proportionally to the width.个 然而，它不应该作为页面的背景.只是一个使用全宽的元素.
在我看来，有两个方面可以考虑改变:
- 在SlideComponent外部-在父组件中:
<div style="width: 500px; height: 200px; margin: 0 auto">
<image-slider [slides]="slides"></image-slider>
</div>
- 或在ImageSlider.Component.css中
.slide {
width: 100%;
height: 100%;
border-radius: 10px;
background-size: cover;
background-position: center;
}
.slider {
position: relative;
height: 100%;
}
先谢谢你.