carasoul html and css

  <div class="slider w3-half">

      <div class="slides">

   <!-- radio button starts here -->

        <input type="radio" name="radio-btn" id="radio1">

        <input type="radio" name="radio-btn" id="radio2">

        <input type="radio" name="radio-btn" id="radio3">

        <input type="radio" name="radio-btn" id="radio4">

        <!-- radio button ends here -->

        <!-- image starts here -->

        <div class="slide first">

        <img src="{% static 'img/faro-2903060_1280.jpg' %}">

      </div>

      <div class="slide">

        <img src="{% static 'img/notebook-1850613_1920.jpg' %}">

      </div>

      <div class="slide">

        <img src="{% static 'img/photo-351528_1920.jpg' %}">

      </div>

      <div class="slide">

        <img src="{% static 'img/faro-2903060_1280.jpg' %}">

      </div>

        <!-- image ends here -->

        <!-- navigation auto starts here -->

        <div class="navigation-auto">

          <div class="auto-btn1 one"></div>

          <div class="auto-btn2 two"></div>

          <div class="auto-btn3 three"></div>

          <div class="auto-btn4 four"></div>

        </div>

        <!-- navigation auto ends here -->

        <!-- manual navigation stars here -->

        <div class="navigation-manual ">

          <label for="radio1" class="manual-btn" id="bgbtn1"></label>

          <label for="radio2" class="manual-btn" id="bgbtn2"></label>

     <label for="radio3" class="manual-btn" id="bgbtn3"></label>

      <label for="radio4" class="manual-btn" id="bgbtn4"></label>

   </div>

        <!-- manual navigation ends here -->

v>

  </div>

.slider{width: 800px; height: 500px; border-radius: 10px;overflow: hidden; margin-top: 30px; margin-left:100px;box-shadow: 5px 10px 18px #888888 }

.slides{width:500%;height: 500px; display: flex;}

.slides input{ display: none; }

.slide{width: 20%; transition: 1s;}

.slide img{width:800px;height: 500px; }

.manual-btn{border:2px solid blue;padding: 5px;border-radius: 10px;cursor: pointer; transition: 1s;}

.navigation-manual{ position: absolute; width: 800px; margin-top: 450px; display: flex;justify-content: center; }

.manual-btn:not(:last-child){

  margin-right: 40px;

}

.manual-btn:hover{background-color: blue}

#radio1:checked~.first{margin-left: 0}

#radio2:checked~.first{margin-left: -20%}

#radio3:checked~.first{margin-left: -40%}

#radio4:checked~.first{margin-left: -60%}

.navigation-auto{position: absolute; width: 800px; display: flex; justify-content: center;margin-top: 450px}

.navigation-auto div{ border:2px solid blue; padding: 5px; border-radius: 10px;  }

.navigation-auto div:not(:last-child){

  margin-right: 40px;

}

#radio1:checked~ .navigation-auto .auto-btn1{background-color: blue}

#radio2:checked~ .navigation-auto .auto-btn2{background-color: blue}

#radio3:checked~ .navigation-auto .auto-btn3{background-color: blue}

#radio4:checked~ .navigation-auto .auto-btn4{background-color: blue}

<script type="text/javascript">

  var counter=1;

  setInterval(function(){

    document.getElementById('radio'+counter).checked= true;

  

    counter++;

    if(counter>4){

      counter=1;

    }

  },5000);

</script>