Skip to content

Instantly share code, notes, and snippets.

@Musinux

Musinux/caroussel.html

Created December 28, 2018 01:35
Show Gist options
  • Save Musinux/9b559e5802f3d2592be0614d06d7e62c to your computer and use it in GitHub Desktop.
Save Musinux/9b559e5802f3d2592be0614d06d7e62c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Musinux created this gist Dec 28, 2018.
    129 changes: 129 additions & 0 deletions caroussel.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,129 @@
    <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>