Bonjour,

Sur mon site web je souhaiterait utiliser un slideshow et comme je suis débute en html/css donc je suis allé sur internet pour en trouver un à ma convenance, le problème maintenant c'est que c'est un slideshow qui se centre à la page web alors que moi je voudrais faire en sorte qu'il s'intercale avec mon code sans passer par dessus.

Je vous laisse ci dessous le code du slideshow :

HTML :

<div class="slidershow middle">

          <div class="slides">
            <input type="radio" name="r" id="r1" checked>
            <input type="radio" name="r" id="r2">
            <input type="radio" name="r" id="r3">
            <input type="radio" name="r" id="r4">
            <input type="radio" name="r" id="r5">
            <div class="slide s1">
              <img src="img/1.jpg" alt="">
            </div>
            <div class="slide">
              <img src="img/2.jpg" alt="">
            </div>
            <div class="slide">
              <img src="img/3.jpg" alt="">
            </div>
            <div class="slide">
              <img src="img/4.jpg" alt="">
            </div>
            <div class="slide">
              <img src="img/5.jpg" alt="">
            </div>
          </div>

        <div class="navigation">
          <label for="r1" class="bar"></label>
          <label for="r2" class="bar"></label>
          <label for="r3" class="bar"></label>
          <label for="r4" class="bar"></label>
          <label for="r5" class="bar"></label>
        </div>
      </div>

CSS :

.slidershow{
  width: 700px;
  height: 400px;
  overflow: hidden;
}
.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.navigation{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.bar{
  width: 50px;
  height: 10px;
  border: 2px solid #fff;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}
.bar:hover{
  background: #fff;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

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

.slide{
  width: 20%;
  transition: 0.6s;
}
.slide img{
  width: 100%;
  height: 100%;
}

#r1:checked ~ .s1{
  margin-left: 0;
}
#r2:checked ~ .s1{
  margin-left: -20%;
}
#r3:checked ~ .s1{
  margin-left: -40%;
}
#r4:checked ~ .s1{
  margin-left: -60%;
}
#r5:checked ~ .s1{
  margin-left: -80%;
}

Merci à ceux qui prendront le temps de trouver une solution

PS : Le code provient d'ici : https://www.youtube.com/watch?v=9Irz0c-6UGw