Musinux/caroussel.html

## caroussel.html
<html>
  <head>
    <meta charset="utf-8">
<style>
header {
  display: flex;
  width: 1000px;
  height: 200px;
  border: 1px solid red;
}

.logo {
  height: 190px;
  width: 190px;
  margin: 1em;
  background-color: green;
}

.caroussel {
  width: 400px;
  flex-wrap: nowrap;
  border: 14px solid black;
  overflow-x: hidden;
}

.caroussel-inner {
  width: 2000px;
}

.image {
  display: inline-block;
  position: relative;
  border: 1px solid red;
  left: 0px;
  height: 150px;
  width: 150px;
  margin: 2px;
  margin-left: 15px;
  margin-right: 15px;
  background-color: blue;
  background-repeat: no-repeat;
  background-position: center center;
}
</style>
  </head>

  <body>
    <header>
      <div class="logo">
      </div>
      <div class="caroussel">
        <div class="caroussel-inner">
        </div>
      </div>
    </header>
    <script>
      const SENS = -2
      const INTERVAL = 25
      const RECTANGLE_NUMBER = 6
      const images=['a.png', 'b.png', 'c.png', 'd.png', 'e.png', 'a.png', 'b.png']

      function genRectangles (number) {
        const caroussel = document.querySelector(".caroussel-inner")
        const images = []
        for (let i = 0; i < number; i++) {
          caroussel.innerHTML += "<div class='image'></div>"
        }
        return caroussel.querySelectorAll('.image')
      }

      function resetRectangles (rectangles) {
        for (let i = 0; i < rectangles.length; i++) {
          rectangles[i].style.left = '0px'
        }
      }

      function moveImages (rectangles) {
        console.log('move')
        const carousselFrame = document.querySelector(".caroussel").getBoundingClientRect()

        let reset = false
        for (let i = 0; i < rectangles.length; i++) {
          if (!rectangles[i].style.left) {
            rectangles[i].style.left = '0px'
          }
          if (SENS > 1) {
            const left = rectangles[i].getBoundingClientRect().left
            if (i < rectangles.length - 1 && left > carousselFrame.right) {
              reset = true
              break
            }
          } else {
            const right = rectangles[i].getBoundingClientRect().right
            if (right < carousselFrame.left) {
              reset = true
              break
            }
          }
          rectangles[i].style.left = (parseInt(rectangles[i].style.left) + SENS) + 'px'
        }
        return reset
      }

      function switchImages (images, rectangles) {
        console.log(images)
        if (SENS > 0) {
          images.unshift(images.pop())
        } else {
          images.push(images.shift())
        }
        console.log(images)
        for (let i = 0; i < rectangles.length; i++) {
          rectangles[i].style['background-image'] = `url(${images[i % images.length]})`
        }
      }

      const rectangles = genRectangles(RECTANGLE_NUMBER)

      switchImages(images, rectangles)

      setInterval(() => {
        if (moveImages(rectangles)) {
          switchImages(images, rectangles)
          resetRectangles(rectangles)
        }
      }, INTERVAL)
    </script>
  </body>
</html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	header {
	display: flex;
	width: 1000px;
	height: 200px;
	border: 1px solid red;
	}

	.logo {
	height: 190px;
	width: 190px;
	margin: 1em;
	background-color: green;
	}

	.caroussel {
	width: 400px;
	flex-wrap: nowrap;
	border: 14px solid black;
	overflow-x: hidden;
	}

	.caroussel-inner {
	width: 2000px;
	}

	.image {
	display: inline-block;
	position: relative;
	border: 1px solid red;
	left: 0px;
	height: 150px;
	width: 150px;
	margin: 2px;
	margin-left: 15px;
	margin-right: 15px;
	background-color: blue;
	background-repeat: no-repeat;
	background-position: center center;
	}
	</style>
	</head>

	<body>
	<header>
	<div class="logo">
	</div>
	<div class="caroussel">
	<div class="caroussel-inner">
	</div>
	</div>
	</header>
	<script>
	const SENS = -2
	const INTERVAL = 25
	const RECTANGLE_NUMBER = 6
	const images=['a.png', 'b.png', 'c.png', 'd.png', 'e.png', 'a.png', 'b.png']

	function genRectangles (number) {
	const caroussel = document.querySelector(".caroussel-inner")
	const images = []
	for (let i = 0; i < number; i++) {
	caroussel.innerHTML += "<div class='image'></div>"
	}
	return caroussel.querySelectorAll('.image')
	}

	function resetRectangles (rectangles) {
	for (let i = 0; i < rectangles.length; i++) {
	rectangles[i].style.left = '0px'
	}
	}

	function moveImages (rectangles) {
	console.log('move')
	const carousselFrame = document.querySelector(".caroussel").getBoundingClientRect()

	let reset = false
	for (let i = 0; i < rectangles.length; i++) {
	if (!rectangles[i].style.left) {
	rectangles[i].style.left = '0px'
	}
	if (SENS > 1) {
	const left = rectangles[i].getBoundingClientRect().left
	if (i < rectangles.length - 1 && left > carousselFrame.right) {
	reset = true
	break
	}
	} else {
	const right = rectangles[i].getBoundingClientRect().right
	if (right < carousselFrame.left) {
	reset = true
	break
	}
	}
	rectangles[i].style.left = (parseInt(rectangles[i].style.left) + SENS) + 'px'
	}
	return reset
	}

	function switchImages (images, rectangles) {
	console.log(images)
	if (SENS > 0) {
	images.unshift(images.pop())
	} else {
	images.push(images.shift())
	}
	console.log(images)
	for (let i = 0; i < rectangles.length; i++) {
	rectangles[i].style['background-image'] = `url(${images[i % images.length]})`
	}
	}

	const rectangles = genRectangles(RECTANGLE_NUMBER)

	switchImages(images, rectangles)

	setInterval(() => {
	if (moveImages(rectangles)) {
	switchImages(images, rectangles)
	resetRectangles(rectangles)
	}
	}, INTERVAL)
	</script>
	</body>
	</html>