Как сделать бесконечный автослайд с повтором

Vahan_Muradyan · 28.Август.2021 23:06:23

Пытаюсь сделать автослайд с бесконечным повтором при помощи js автослайд получается а вот повтор не очень предстовляю как получить, к примеру есть 3 слайда, после 3 должно появиться 1 слайд потом 2,3 и так бесконечно

вот код с попытками

let content = [
    {image:1, name:'Имя', rating:{},text:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
    {image:2, name:'Имя', rating:{},text:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
    {image:3, name:'Имя', rating:{},text:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
  ]
  const root = document.querySelector('.rev_sec')
  
  const slide = (data) =>{
   return data.map(item=>{
      return `
      <div id="slide" class="review_persons_items" >
      <div class="review_person_item" >
          <img src="${item.image}.png" alt="girl" style="border-radius: 5px;">
          <div class="star">
          <p>${item.name}</p>
          <span>
            <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
                </svg>
            <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
                </svg>
           <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
                </svg>
           <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
              </svg>
              <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875ZM15.2812 12.7266L16.2188 18.1172L11.375 15.5781L6.49219 18.1172L7.42969 12.7266L3.48438 8.89844L8.91406 8.11719L11.375 3.19531L13.7969 8.11719L19.2266 8.89844L15.2812 12.7266Z" fill="#014D6A"/>
                </svg>
                                      
          </span>
        </div>
      </div>
      <hr>
      <div class="review_it_text">
          <p>${item.text}</p>
      </div>
      
    </div>
        `
    })
  }
  
  
  setInterval(()=>{
        content.push({image:1, name:'Имя', rating:{},text:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'})
  },2000)
  root.innerHTML = slide(content).join('')

  
const slideTags = Array.from(document.querySelectorAll("#slide"));
let num = 0.264;
function styles(num) {
  
  slideTags.map((el) => {
    el.style.transform = `translateX(${num}%) translateZ(0px)`;
  });
  return num;
}

setInterval(() => {
    styles(num -= 0.1);
}, 1);

/* *{
    overflow-block: hidden;
} */
.review {
    height: 737px;
  }
  .review_text {
    position: relative;
    top: 114px;
    margin-left: 140px;
  }
  .review_text h1 {
    font-weight: 800;
    font-size: 52px;
    line-height: 63px;
    color: #282828;
  }
  .review_text p {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.03em;
    color: #282828;
    opacity: 0.7;
  }
  .review_person {
    width: 1920px;
    height: 226px;
    background: #d3e8f0;
    position: relative;
    top: 190px;
  }
  .review_persons_items {
    width: 630px;
    height: 300px;
    background: #eef7fa;
    border: 2px solid #86c8dc;
    box-sizing: border-box;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    position: relative;
    /* transform: translateX(9.264%) translateZ(0px); */
  }
  .rev_sec {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    position: relative;
    top: -35px;
  }
  .review_person_item {
    display: flex;
    width: 420px;
    justify-content: space-evenly;
    height: 180px;
    align-items: center;
    flex-wrap: wrap;
  }
  .review_person_item p {
    font-size: 20px;
    line-height: 100%;
    color: #014d6a;
    font-weight: 700;
    position: relative;
    top: -20px;
  }
  .star {
    position: relative;
    left: 40px;
  }
  .review_persons_items hr {
    width: 549px;
    height: 0px;
    left: 221px;
    top: 2451px;
    opacity: 0.2;
    border: 2px solid #86c8dc;
    margin-top: -22px;
  }
  .review_it_text {
    width: 534px;
    height: 90px;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.03em;
    color: #282828;
    opacity: 0.7;
    margin: auto;
  }
  
  .changeSlide{
      transform: translateX(9.264%) translateZ(0px);
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>

       
     <div class="review_person" >
         <div class="rev_sec " >
      <!-- <div id="slide1" class="review_persons_items" >
      <div class="review_person_item" >
          <img src="manT.png" alt="girl" style="border-radius: 5px;">
          <div class="star">
          <p>Имя</p>
          <span>
            <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
                </svg>
            <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
                </svg>
           <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
                </svg>
           <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
              </svg>
              <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875ZM15.2812 12.7266L16.2188 18.1172L11.375 15.5781L6.49219 18.1172L7.42969 12.7266L3.48438 8.89844L8.91406 8.11719L11.375 3.19531L13.7969 8.11719L19.2266 8.89844L15.2812 12.7266Z" fill="#014D6A"/>
                </svg>
                                      
          </span>
        </div>
      </div>
      <hr>
      <div class="review_it_text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
      </div>
      
    </div>
    
        <div id="slide2" class="review_persons_items">
        <div class="review_person_item">
            <img src="girl.png" alt="girl" style="border-radius: 5px;">
            <p>Имя</p>
            <span>
              <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
                  </svg>
              <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
                  </svg>
             <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
                  </svg>
             <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
                </svg>
                <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875ZM15.2812 12.7266L16.2188 18.1172L11.375 15.5781L6.49219 18.1172L7.42969 12.7266L3.48438 8.89844L8.91406 8.11719L11.375 3.19531L13.7969 8.11719L19.2266 8.89844L15.2812 12.7266Z" fill="#014D6A"/>
                  </svg>
                                        
            </span>
        </div>
        <hr>  
        <div class="review_it_text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
        </div>
     
      <div id="slide3" class="review_persons_items">
      <div class="review_person_item">
        <img src="manF.png" alt="girl" style="border-radius: 5px;">
        <p>Имя</p>
        <span>
          <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
              </svg>
          <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
              </svg>
         <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
              </svg>
         <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312Z" fill="#FF9900"/>
            </svg>
            <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.75 7.21875L15.0469 6.39844L12.4688 1.20312C12.0391 0.304688 10.7109 0.265625 10.2422 1.20312L7.70312 6.39844L1.96094 7.21875C0.945312 7.375 0.554688 8.625 1.29688 9.36719L5.39844 13.3906L4.42188 19.0547C4.26562 20.0703 5.35938 20.8516 6.25781 20.3828L11.375 17.6875L16.4531 20.3828C17.3516 20.8516 18.4453 20.0703 18.2891 19.0547L17.3125 13.3906L21.4141 9.36719C22.1562 8.625 21.7656 7.375 20.75 7.21875ZM15.2812 12.7266L16.2188 18.1172L11.375 15.5781L6.49219 18.1172L7.42969 12.7266L3.48438 8.89844L8.91406 8.11719L11.375 3.19531L13.7969 8.11719L19.2266 8.89844L15.2812 12.7266Z" fill="#014D6A"/>
              </svg>
                                    
        </span>
      </div>
      <hr>
      <div class="review_it_text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      </div> -->
      </div>  
    </div>   
    </div>   
    </section>  
    <script src="template.js"></script>
    <script src="index.js"></script>
   
</body>
</html>

dmitry · 30.Август.2021 08:35:41

Я бы решал такую задачу так.

Держал бы данные слайдов в массиве. Держал бы индекс текущего слайда.

Написал бы функцию начального рендера слайда. Тут понадобится некоторая “хитрость”. Зависит от того каким именно ты хочешь видеть результат. Например можно смоделировать весь список слайдов как одну большую полоску, которую ты передвигаешься в видимом для пользователя “окошке” (в блоке с overflow: hidden). Для такой модели переход к слайду с индексом X означает сдвигание полоски на X*ШИРИНА_СЛАЙДА.

Еще есть вариант моделирования когда смена слайдов “эмулируется”. Анимируешь скрытие контейнера секущего слайда, создаешь контейнер нового слайда и анимируешь его появление.

Написал бы функцию рендера слайда по случайному индексу.

Запустил бы цикл который рендерил n + 1 слайд и обновлял индекс значением n+ 1. И при идексе большем чем количество слайдов рендерил бы слайд с индексом 0.

Мы делали нечто подобное на курсе академии (но с табами и переходом к случайному слайду). Тем не менее модель того что мы реализовали хорошо подходит под твою задачу. Вот тут можешь посмотреть результат и исходники Big Slider

Слайдер автоматически переходит к следующему слайду если не кликать по табам. При этом автоматическом переходе и происходит зацикливание когда после последнего слайда показывается первый.