How to make my homescreen slider responsive

Question

i have centralised my slider and I will drop the same size images in once ive sorted the layout. I need the slider to be responsive. anyone know how i go about that please?

see html

let slideIndex = 0;
      showSlides();

      function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
          slideIndex = 1;
        }

        slides[slideIndex - 1].style.display = "block";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
      }

.home-container { 
margin: 0px auto; // center
width:1000%;  
text-align:center; 
border-image-width: auto;
overflow: hidden;
} 
.slideshow-container {
   width: 1000%;
    margin: auto;
    position: relative;
   
}


.mySlides {
  display:none;
}



.text {
  color: orange;
  font-size: 60px;
  position: bottom;
  bottom: 8px;
  width: 100%;
  text-align: center;
        
}


.fade {
  animation-name: fade;
  animation-duration: 1.5s;
    align-content: center;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

div class="home-container">

        <div class="slider-container">
                  
          <div class="mySlides fade">
            <img
              src="Media/slider/2.jpg"
              alt="Roller Coaster" height=800px>
            <div class="text">Teddy Tinkers</div>
              
          </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/7.jpg"
              alt="Splash Park"
              height=800px
              >
              <div class="text">Teddy Tinkers</div>
        </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/6.jpg"
              alt="Eating Area"
                 height=800px
              >
              <div class="text">Teddy Tinkers</div>
        </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/8.jpg"
              alt="Park Map"
                 height=800px
              >
              <div class="text">Teddy Tinkers</div>
            </div>
            <div class="mySlides fade">
           <img
              src="Media/slider/10.jpg"
              alt="Park Map"
                height=800px
             >
            <div class="text">Teddy Tinkers</div>
            </div> 
            <div class="mySlides fade">
          <img
              src="Media/slider/11.jpg"
              alt="Park Map"
               height=800px
              >
            <div class="text">Teddy Tinkers</div>
            </div>
            <div class="mySlides fade">
         <img
              src="Media/slider/12.jpg"
              alt="Park Map"
              height=800px
              >
            <div class="text">Teddy Tinkers</div>
            </div>
           </div> 
        
       </div>
        

I want the slider to be centralised and to be responsive on a smaller screen! any assistance will be great.

I will have max around 20-25 slides so I assume i may need to make sure I add code for this amount too?

Answer 1

You can use below CSS to make it responsible according to screen size.

@media only screen and (max-width: 600px) {
    .home-container {
        height:100px;
    }
}

also you can customize your CSS according to screen size.