JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<article class="photogallery">
    <section id="someimage" style="background-image:url('//lorempixel.com/400/200/sports/1/ONE')">
        <img src="http://lorempixel.com/400/200/sports/1" />
        <p>Description Description Description Description Description Description</p>
        <a href="#anotherimage" class="next">Next</a>
    </section>
    <section id="anotherimage" style="background-image:url('//lorempixel.com/400/200/sports/2/TWO')" class="open">
        <img src="http://lorempixel.com/400/200/sports/2" />
        <p>Description Description Description Description Description Description</p>
        <a href="#someimage" class="prev">Previous</a>
        <a href="#foobarbaz" class="next">Next</a>
    </section>
    <section id="foobarbaz" style="background-image:url('//lorempixel.com/400/200/sports/3/THREE')">
        <img src="http://lorempixel.com/400/200/sports/3" />
        <p>Description Description Description Description Description Description</p>
        <a href="#anotherimage" class="prev">Previous</a>
        <a href="#bazbarfoo" class="next">Next</a>
    </section>
    <section id="bazbarfoo" style="background-image:url('//lorempixel.com/400/200/sports/4/FOUR')">
        <img src="http://lorempixel.com/400/200/sports/4" />
        <p>Description Description Description Description Description Description</p>
        <a href="#foobarbaz" class="prev">Previous</a>
    </section>
</article>

<br><br><br><br><br>
<a href="#bazbarfoo">Go to 4th</a>

CSS

body{margin:40px;}

.photogallery
{
    width:400px;
    height:200px;
    margin:0 auto;
    position:relative;
    outline:10px red solid;
    overflow:hidden;
}

.photogallery > *
{
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background-position:center;
    background-size:contain;
    transform:rotate(50deg) scale(0.5);
}

.photogallery > *.open
{
    left:0;
    transform:rotate(0deg);
}

.photogallery > *.open ~ *
{
    left:100%;
}

.photogallery > * > img
{
    display:none;
}

.photogallery > *
{
    transition:all 1s;
}

JavaScript

function SimplePhotogallery(baseSelector, imagesSelector)
{
    var THIS = this;
    THIS._baseSelector = baseSelector;
    THIS._imagesSelector = imagesSelector;
    THIS._images = document.querySelectorAll(imagesSelector);
    THIS._hashChangeHandler = function(){
        for(var x = 0; x < THIS._images.length; x++)
            if(window.location.hash == "#" + THIS._images[x].wasID)
                THIS.moveTo(x);
    };
    THIS._registerHashChangeHandler();
    THIS._loadImages();
};

SimplePhotogallery.prototype._loadImages = function()
{
    for(var x = 0; x < this._images.length; x++){
        this._images[x].wasID = this._images[x].id;
        this._images[x].id = "";
    }
};

SimplePhotogallery.prototype._unloadImages = function()
{
    for(var x = 0; x < this._images.length; x++){
        this._images[x].id = this._images[x].wasID;
        this._images[x].wasID = undefind;
    }
};

SimplePhotogallery.prototype._registerHashChangeHandler = function()
{
    window.addEventListener("hashchange", this._hashChangeHandler);
};

SimplePhotogallery.prototype._unregisterHashChangeHandler = function()
{
    window.removeEventListener("hashchange", this._hashChangeHandler);
};

SimplePhotogallery.prototype.moveTo = function(offset)
{
    for(var x = 0; x < this._images.length; x++)
        if(x == offset)
            this._images[x].classList.add("open");
        else
            this._images[x].classList.remove("open");
};

window.addEventListener("load", function(ev){
    new SimplePhotogallery(".photogallery", ".photogallery > section");
});