Show Movie carousel

Show Movie carousel pure css javascript

by zerrax

HTML

<div class="car">
  <a class="a">Nouvelles séries</a>
  <div id="carsl" class="carsl" style="">
    <div class="carousel first" name="items" style="margin-left:-100%;" id="carsl1">
      <ul>
        <li></li>
        <li></li>
        <li></li>

      </ul>
    </div>
    <div class="carousel" name="items">

      <ul>

        <li>
        


<div class="parent"> 

    <img class="responsive center" src="https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg">

</div>
          
          <div>

            <a>Mr Robot</a>
            <ul id="star-rating">
              <li class="rated">1</li>
              <li class="rated">2</li>
              <li class="rated">3</li>
              <li>4</li>
              <li>5</li>
            </ul>
            <a>2012</a>
            <div>
              <p>
                “Proven Innocent” racconta la storia emotiva della lotta di una donna per dimostrare l’innocenza di persone condannate ingiustamente. Il dramma legale segue una sfortunata società di difesa criminale guidata da un avvocato feroce e intransigente, Madeline Scott, che è stato ingiustamente condannato in un caso di omicidio sensazionale che l’ha resa una famigerata ossessione mediatica. Madeline gestisce lo studio legale con il suo socio, Easy Boudreau, l’avvocato che l’ha aiutata a liberarsi dopo 10 anni di carcere. Il loro team comprende anche l’investigatore Bodie Quick e il direttore delle comunicazioni Violet Price, che gestisce un vero podcast criminale che segue ogni indagine.
              </p>
            </div>
            <span><a href="google.fr"></a></span>
          </div>
        </li>
        <li>
          <div>
            <a>Mr Robot</a>
            <ul id="star-rating">
              <li class="rated">1</li>
              <li class="rated">2</li>
              <li class="rated">3</li>
              <li>4</li>
              <li>5</li>
            </ul>
            <a>2012</a>
            <div>
              <p>
               ...

CSS

body {

  padding: 0;
  margin: 0;
  background: #222;

}

* {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}
ul, li{
  padding:0;
  margin:0;
  list-style:none;
}
.car {
  margin: 20px 10px;
  position: relative
}

.car>a.a {
  margin-left: 40px;
  margin-right: 40px;
  color: #fff;
  font-size: 22px;
  border-bottom: solid 3px rgb(209, 50, 50);
  cursor: default;
  display: block;
}

.car>a:nth-child(4) {
  left: right;
  color: #111;
  font-size: 22px
}

.car>label>input {
  display: none;
  width: 35px;
  height: 35px;
}

.car>label {
  font-size: 24px;
  color: #fff;
  float: right;
  margin-right: 5px;
}

.car label:nth-child(2) {
  font-size: 24px;
  color: #fff;
  float: right;
  margin-right: 20px;
}

.car>label>span {
  background: rgba(209, 50, 50, 0.8);
  padding: 5px 10px;
  border-radius: 5px;
  border: solid #111 1px;
  cursor: pointer;
}

.car label>input:checked+span {
  color: #eee;
  background: rgba(209, 50, 50, 0.5);
  padding: 9px 14px
}

.carsl {
  width: 100%;
  height: 320px;
  overflow: hidden;
  display: inline-box;
  display: -webkit-inline-box;
}

.carsl>div {
  width: 100%;
  float: left;
  position: relative;
  -webkit-transition: all 0.5s;
  /* Safari */
  transition: all 0.5s;
  left: 0%;
  margin-left: 0%;
}

.carousel>ul {
  display: flex;
  padding: 20px;
  grid-gap: 10px;
    margin: 3%;
}

.carousel>ul>li {
  flex: 1;
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
  float: left;
  text-align: center;
  //border: 2px solid #FFF;
  background: #DDD;
  border-radius: 3px;
  font-size: 14px;
  height: 200px;
  position: relative;

  //  background:...

JavaScript

function next(a) {
  var i = "";
  var els = a.parentNode.querySelector(".first");
  var els_i = a.parentNode.querySelector(".carsl").childNodes;
  els_i.forEach(function(element) {
    //  console.log(element)
    if (element.tagName == "DIV") {
      i++;
    }
  });
  if (isNaN(parseInt(els.style.marginLeft))) {
    els.style.marginLeft = "-100%";
    els.style.left = "-100%";
  } else {
    var num = (Math.abs(parseInt(els.style.marginLeft)) + 100);
    if ((i * 100) == num) {
      els.style.marginLeft = "-100%";
      els.style.left = "-100%";
    } else {
      els.style.marginLeft = "-" + num + "%";
      els.style.left = "-" + num + "%";
    }
  }
}

function prev(a) {
  var i = "";
  var els = a.parentNode.querySelector(".first");
  var els_i = a.parentNode.querySelector(".carsl").childNodes;
  els_i.forEach(function(element) {
    //  console.log(element)
    if (element.tagName == "DIV") {
      i++;
    }
  });
  if (isNaN(parseInt(els.style.marginLeft))) {
    els.style.marginLeft = "-100%";
    els.style.left = "-100%";
  } else {
    var num = Math.abs(parseInt(els.style.marginLeft)) - 100;
    console.log(num);
    if (num == 0) {
      els.style.marginLeft = "-100%";
      els.style.left = "-100%";
    } else {
      els.style.marginLeft = "-" + num + "%";
      els.style.left = "-" + num + "%";
    }
  }
}