HG-IMAGE-SLIDER

A React.Component image-slider with image-load function (blured thumbnail). This is an additional module to a custom designed CMS and won't work without that CMS.

Include the following CSS for correct behavior, you're free to adjust this to your needs:

.slider-animation-enter {
    opacity: 0.01;
}

.slider-animation-enter.slider-animation-enter-active {
    opacity: 1;
    transition: opacity 300ms ease;
}

.slider-animation-leave {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
}

.slider-animation-leave.slider-animation-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease;
    position: absolute;
    top: 0;
    left: 0;
}

.leave-left {
    animation: leave-left 300ms ease;
}

@keyframes leave-left {
    from {margin-left: 0;}
    to {margin-left: -100%;}
}

.leave-right {
    animation: leave-right 300ms ease;
}

@keyframes leave-right {
    from {margin-left: 0;}
    to {margin-left: 100%;}
}

.enter-left {
    animation: enter-left 300ms ease;
}

@keyframes enter-left {
    from {margin-left: -100%;}
    to {margin-left: 0;}
}

.enter-left {
    animation: enter-right 300ms ease;
}

@keyframes enter-right {
    from {margin-left: 100%;}
    to {margin-left: 0;}
}

.slider-button-wrapper {
    width: 10px;
    height: 10px;
    float: left;
    margin: 15px;
}

.slider-button {
    position: relative;
    width: 15px;
    height: 15px;
    background: #fff;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 300ms ease;
}

.slider-button.active {
    margin-top: -1px;
    margin-left: -1px;
    background: transparent;
    border: 2px solid #fff;
}

.slider-arrow {
    opacity: 0;
    position: absolute;
    background-color: rgba(255,255,255,0.5);
    height: 100%;
    width: 50px;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 300ms ease
}

.slider-arrow:hover {
    opacity: 1;
}

.slider-arrow.left {
    left: 0;
}

.slider-arrow.right {
    right: 0;
}