Simple slider

by Simon Hi

HTML

<div class="annoncesingle" id="annonce-8">
  <div class="containersingle">
    <div class="slidersingle">
      <img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Illuminated_white_and_purple_facade_of_the_office_building_Rohm_Semiconductor_in_Kyoto%2C_Japan.jpg/320px-Illuminated_white_and_purple_facade_of_the_office_building_Rohm_Semiconductor_in_Kyoto%2C_Japan.jpg?uselang=fr">
      <img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Bitcoin_Suisse_HQ_desk.jpg/320px-Bitcoin_Suisse_HQ_desk.jpg?uselang=fr">
      <img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Desk_in_the_Estonian_National_Museum.jpg/320px-Desk_in_the_Estonian_National_Museum.jpg?uselang=fr">
      <img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Working_space_on_roll_top_desk.jpg/320px-Working_space_on_roll_top_desk.jpg?uselang=fr">
      <img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Stalin_desk.jpg/320px-Stalin_desk.jpg?uselang=fr">
    </div>
  </div>
  <section class="annonceinformations">
    <h1><span class='titlesingle'>Nous louons des locaux</span> </h1>
    <p class='categorysingle'>Bureau</p>
    <p class='pricesingle'>0</p>
    <p class='datesingle'>2022-01-09</p>
    <p class='commentssingle'>Appelez si intéressé</p>
    <p class='telephonesingle'>458569631</p>
    <p class='vuessingle'>4</p>
  </section>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  background: #fff;
}

.annoncesingle {
  max-width: calc((3 * 100vh / 4) + 12em);
  margin: 0 auto;
}

.containersingle {
  position: relative;
  background: orange;
}

.slidersingle {
  max-width: calc(3 * 100vh / 4);
  display: flex;
  margin: 0 auto;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  /* hide scrollBars: IE and Edge */
  scrollbar-width: none;
  /* hide scrollBars: Firefox */
}

.slidersingle::-webkit-scrollbar {
  display: none;
  /* hide scrollBars: chrome and safari */
}

.slidersingle img {
  min-width: 100%;
  scroll-snap-align: center;
}

.containersingle button {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  width: 4em;
  height: 4em;
  line-height: 4em;
  padding: 0;
  margin: 0;
  margin-top: -2em;
  border-radius: 50%;
  background: #0006;
  color: #fff;
  font-weight: bold;
  border: 0;
}

.containersingle button.left {
  left: 2em;
}

.containersingle button.right {
  right: 2em;
}

.annonceinformations {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0.5em;
  background: #eee;
}

.titlesingle {
  color: #221461;
}

JavaScript

(function() {
  function slideSuivante() {
    let e = document.querySelector('.slidersingle');
    let refWidth = e.clientWidth;
    let currentWidth = e.scrollWidth;
    let currentPos = e.scrollLeft;
    let images = e.querySelectorAll('img');
    let k, km, oldPos, newPos;
    km = images.length;
    k = Math.floor(km * (currentPos + 1) / currentWidth);
    k++;
    if (k > (km - 1)) k = 0;
    oldPos = currentPos;
    newPos = k * refWidth;
    //console.log(k+" "+oldPos+" "+newPos);
    e.scrollTo(newPos, 0);
  }

  function slidePrecedente() {
    let e = document.querySelector('.slidersingle');
    let refWidth = e.clientWidth;
    let currentWidth = e.scrollWidth;
    let currentPos = e.scrollLeft;
    let images = e.querySelectorAll('img');
    let k, km, oldPos, newPos;
    km = images.length;
    k = Math.ceil(km * (currentPos - 1) / currentWidth);
    k--;
    if (k < 0) k = km - 1;
    oldPos = currentPos;
    newPos = k * refWidth;
    //console.log(k+" "+oldPos+" "+newPos);
    e.scrollTo(newPos, 0);
  }

  function addButtons(e) {
    let s = e.innerHTML,
      b;
    s += "<button class='btn-nav left'>&lt;</button>";
    s += "<button class='btn-nav right'>&gt;</button>";
    e.innerHTML = s;
    b = e.querySelector('.btn-nav.left');
    b.addEventListener('click', slidePrecedente);
    b = e.querySelector('.btn-nav.right');
    b.addEventListener('click', slideSuivante);
  }
  document.addEventListener('DOMContentLoaded', function() {
    var list = document.querySelectorAll('.containersingle');
    list.forEach(e => addButtons(e));
  });

})();