Бесконечная карусель в ванильном эффекте перехода Javascrict не сработает - PullRequest
Новая
       14

Бесконечная карусель в ванильном эффекте перехода Javascrict не сработает

0 голосов
/ 18 января 2020

Я пытался сделать бесконечный образ карусели в ванили Javascript без кнопок Карусель зацикливается на изображениях, но у меня проблемы с эффектом перехода. Это делает плавный переход к следующему изображению. Я пытался отладить этот код в течение нескольких часов, но я не знаю, как решить эту проблему. 

const slider = document.querySelector('.slider_slider');
const img = document.querySelectorAll('.photo');

var num = 1;
var size = slider.clientWidth; 

var int= setInterval(
    function intervals(){
    update();
    transition();
    append();
    },5000);

function update(){
    slider.style.transform= "translateX("+(-size*num)+"px )";
}
function transition() {
    slider.style.transition = "transform 0.9s ease-in-out";
    if(num ===6 ){num = img.length - this.num;
      slider.style.transition = "none";
    
     slider.style.transform= "translateX("+(-size*num)+"px )";}
    }


function append(){

    const child = document.querySelector('.photo');
    const cln = child.cloneNode(true);
    slider.appendChild(cln);
    const remove = document.querySelector('.photo');
    remove.parentNode.removeChild(remove)}
html{
    box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.header_box{
  display:flex;
  margin:0 auto;
  top:0;
  background-color: aqua;
  width: 100%;
  height: 10vh;
}

.logo_box {
  position: absolute;
  height: 50px;
  width: 50px;
  background-color: lightcoral;
  margin: 10px 0 0 40px;
}

#img_logo{
  position: absolute;
  height: 50px;
  width: 50px;
  z-index: 20;
}
.nav_box{
  position: absolute;
  right: 10px;
  top:5px;
  background-color: mediumblue;
  padding:7px;
}
.nav_box> *{
  display:flex;
  flex-direction: row;
  background-color: lime;
  list-style: none;
  padding: 10px 0 10px 0;
}
.nav_elements>li a {
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 18px;
  color:rgb(53, 53, 53);
}

/* Slider 1 */

.slider_container{
  position: absolute;
  width: 100%;
  height: 90vh;
  background: black;
  border: 3px solid purple;
  z-index: 10;
  top: 0;
  left:0;
  overflow: hidden;
}
.slider_slider{
 display: flex;
 width: 100%;
 height: 100%;
}

.slider_slider> img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<!DOCTYPE html>
<html lang="PL">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="slider_container">
    <div class="slider_slider">
        <img src="https://image.freepik.com/free-photo/dog-standing-hind-legs-with-copy-space_23-2148366813.jpg" alt="" class="photo">
        <img src="https://image.freepik.com/free-photo/beagle-dog-sitting-with-white-background_53876-30186.jpg" alt="" class="photo">
        <img src="https://image.freepik.com/free-photo/cute-spitz-dog_144627-12267.jpg" alt="" class="photo">
        <img src="https://image.freepik.com/free-photo/adorable-jack-russell-retriever-puppy-portrait_53876-64825.jpg" alt="" class="photo">
        <img src="https://image.freepik.com/free-photo/beagles-puppies-looking-something_1150-18193.jpg" alt="" class="photo">
        <img src="https://image.freepik.com/free-photo/lovely-pets-composition-with-bulldog_23-2147997312.jpg" alt="" class="photo">
    </div>
</div>
</section>
<section></section>

    
</body>
<script src='script.js'></script>
</html>
...