JSFiddle - React, Tailwind, and code Playground

by Sandhose

HTML

<div class="container">
    <div class="panorama">
        <img src="./panorama/1.jpg" height="512px" width="512px" />
        <img src="./panorama/2.jpg" height="512px" width="512px" />
        <img src="./panorama/3.jpg" height="512px" width="512px" />
        <img src="./panorama/4.jpg" height="512px" width="512px" />
        <img src="./panorama/5.jpg" height="512px" width="512px" />
    </div>
</div>

CSS

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.panorama {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.panorama > img {
    height: 100%;
    width: auto;
    float: left;
}

JavaScript

$(document).ready(function() {
    setup();
});

$(window).resize(function() { // Gerer les changement de taille de la fenetre
    var $imgs = $(".panorama > img");
    var $pano = $(".panorama");
    var totalWidth = 0;
    $imgs.each(function(index, elem) {
        totalWidth += $(elem).width();
    });
    
    $pano.width(totalWidth);
});

function setup() { // Initialiser
    var $imgs = $(".panorama > img");
    var $pano = $(".panorama");
    var totalWidth = 0;
    $imgs.each(function(index, elem) {
        totalWidth += $(elem).width();
    });
    
    $pano.width(totalWidth);
    
    $pano.css({"margin-left": 0});
    slideLeft();
}

function slideLeft() { // Slide dans un sens
    var $imgs = $(".panorama > img");
    var $pano = $(".panorama");
    var totalWidth = 0;
    $imgs.each(function(index, elem) {
        totalWidth += $(elem).width();
    });
    
    var toSlide = totalWidth - $(".container").innerWidth();
    $pano.animate({"margin-left": -toSlide}, 10000,"swing", slideRight); // Animation; 10000 = temps de scroll
}

function slideRight() {
    var $pano = $(".panorama");
    $pano.animate({"margin-left": 0}, 10000,"swing", slideLeft); // Animation; 10000 = temps de scroll
}