slide_v5.21

by happyboyhj

HTML

<ul class="wrap">
  <button class="clickPrev" onclick="clickPrev()"></button>
  <li class="slide">1</li>
  <li class="slide">2</li>
  <li class="slide">3</li>
  <li class="slide">4</li>
  <li class="slide">5</li>
  <li class="slide">6</li>
  <li class="slide">7</li>
  <button class="clickNext" onclick="clickNext()"></button>
</ul>

CSS

.wrap {
  width: 100%;
  height: 60vh;
  position: relative;
  overflow: hidden;
 }
  
.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  color: white;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
 }
  
.slide:nth-of-type(1) {
  background-color: red;
  left: 0;
 }

.slide:nth-of-type(2) {
  background-color: orange;
 }

.slide:nth-of-type(3) {
  background-color: yellow;
 }

.slide:nth-of-type(4) {
  background-color: green;
 }

.slide:nth-of-type(5) {
  background-color: blue;
 }

.slide:nth-of-type(6) {
  background-color: navy;
}

.slide:nth-last-of-type(1) {
  background-color: purple;
  left: -100%;
}

.clickPrev {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 5%;
  z-index: 1;
 }

.clickNext {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 5%;
  z-index: 1;
 }

JavaScript

var pageNum=0;
var slide=document.getElementsByClassName('slide');
setInterval(clickNext,5000)

function clickPrev() {
  if(pageNum==0) {
    slide[slide.length-1].style="left:0; transition: left 0.5s;";
    slide[pageNum].style="left:100%; transition: left 0.5s;"
    slide[slide.length-2].style="left:-100%;";
    pageNum=slide.length-1;
  }

  else if(pageNum!=slide.length-1) {
    slide[pageNum-1].style="left:0; transition: left 0.5s;";
    slide[pageNum].style="left:100%; transition: left 0.5s;";
    if(pageNum==1) {slide[slide.length-1].style="left:-100%;";}
    else {slide[pageNum-2].style="left:-100%;";}
    pageNum-=1;
   
  }

  else {
    slide[pageNum-1].style="left:0; transition: left 0.5s;"
    slide[pageNum].style="left:100%; transition: left 0.5s;";
    slide[pageNum-2].style="left:-100%;";
    pageNum-=1;
  }
 }

function clickNext() {                    
  if(pageNum==0) {
    slide[pageNum+1].style="left:0px; transition:left 0.5s";
    slide[pageNum].style="left:-100%; transition:left 0.5s";
    slide[slide.length-1].style="left:100%;";
    pageNum+=1; 
  }            

  else if(pageNum!=slide.length-1) {
    slide[pageNum+1].style="left:0px; transition:left 0.5s";
    slide[pageNum].style="left:-100%; transition:left 0.5s";
    slide[pageNum-1].style="left:100%;";
    pageNum+=1;
  }

  else {
    slide[0].style="left:0px; transition:left 0.5s";
    slide[slide.length-1].style="left:-100%; transition:left 0.5s";
    slide[pageNum-1].style="left:100%;"
    pageNum=0;
  }           
}