slider demo

by Richard Hunter

HTML

<div class='container'>
    <div class='slidable-container'>
        <div class='beta-l'></div>
        <div class='beta-r'></div>
    </div>
</div>

SCSS

.container {
    width : 20%;
    position : relative;
    border : solid 1px black;
    background : pink;
    margin : auto;
    margin-top : 20px;
}
.slidable-container {
    opacity : 0.8;
    background : blue;
    overflow:hidden;
    width : 300%;
    margin-left : -100%;
    //display : flex;
    transition : -webkit-transform 1s linear;
    & > div {
        width : 50%;
        opacity : 0.4;
        float:left;
    }
}
.slidable-container.left-panel {
    
    -webkit-transform : translateX(33.333%);
}
.slidable-container.right-panel {
   
    -webkit-transform : translateX(-33.333%);
}

.beta-l {

    background : yellow;
    height : 100px;
}
.beta-r {

    background : red;
    height : 100px;
}

JavaScript

var slidableContainer = document.querySelector('.slidable-container');

$('.beta-l').each(function (event) {

    $(this).on('click', function () {
        slidableContainer.classList.remove('right-panel');
        slidableContainer.classList.toggle('left-panel');
    });
});
$('.beta-r').each(function (event) {
    $(this).on('click', function () {
        slidableContainer.classList.remove('left-panel');
        slidableContainer.classList.toggle('right-panel');
    });
});