Make custom image slider full-width

I currently have the custom image slider from this course rebuilt in my project.

https://monsterlessons-academy.com/posts/angular-slider-build-angular-carousel-from-scratch-tutorial

(At the bottom of the article is also a link to the source code on GitHub.)

As you can see in the example in the tutorial, the slider is centered on the page.

I would like to insert the slider in full width of the page and automatically adjust the height proportionally to the width.
However, it should not serve as the background of the page. Just an element that uses the full width.

In my opinion, there are two places where changes could be considered:

1. Outside the SlideComponent – in the parent component:

 <div style="width: 500px; height: 200px; margin: 0 auto">
  <image-slider [slides]="slides"></image-slider>
</div>

2. Or inside the imageSlider.component.css

.slide {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}

.slider {
  position: relative;
  height: 100%;
}

Thanks in advance.

>Solution :

Based on your description, it seems like you want the slider to take up the full width of the page while maintaining a proportional height. To achieve this, you can make the following adjustments:

1. Outside the SlideComponent (in the parent component’s template):

<div style="width: 100%; height: 0; padding-bottom: 56.25%; position: relative;">
  <image-slider [slides]="slides"></image-slider>
</div>

• The padding-bottom: 56.25% is based on a common aspect ratio for videos (16:9). You can adjust this value if you have a different aspect ratio.

2. Inside the imageSlider.component.css:

.slide {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
}

• We’re using position: absolute on the .slider to allow it to take up the full width and height of its parent.

With these adjustments, the slider should now take up the full width of its parent container and adjust its height proportionally. Please note that the aspect ratio might need to be adjusted based on your specific requirements.