Demo for Responsive Image Slider with Thumbnails and Caption

Preview
Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
img {
    max-width: 100%;
}
#app {
    width: 90%;
    height: 85%;
    overflow: hidden;
}
.ui-big-images {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
}
.ui-big-image {
    width: 100%;
    margin-right: -100%;
}
.ui-big-image img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center 20%;
    object-position: center 20%;
    width: 100%;
    height: 100%;
    display: block;
}
@media (max-height: 600px) {
.ui-big-image img {
    -o-object-position: center center;
    object-position: center center;
}
}
.ui-thumbnails {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 1rem;
    padding-top: 0.5rem;
    padding-right: 45%;
    padding-right: calc( 45% + .5rem );
}
.ui-thumbnail {
    display: block;
    margin-right: 0.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
}
.ui-cuticle {
    background-color: #D4A12D;
    position: absolute;
    bottom: 0;
    height: 0.25rem;
    width: 100%;
}
.ui-thumbnail > img {
    width: auto;
}
.ui-content {
    position: absolute;
    width: 40%;
    right: 5%;
    bottom: 0;
}
.ui-articles {
    background: #493e56;
    color: white;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.ui-article {
    padding: 1.5rem;
    width: 100%;
    margin-right: -100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ui-paragraph {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.7;
}
.ui-nav {
    position: absolute;
    right: 0;
    bottom: 100%;
    background: inherit;
}
.ui-nav button {
    background: #493e56;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.5em;
    width: 2em;
    color: #FFF;
    font-family: monospace;
    transition: inherit;
    transition-duration: 300ms;
}
.ui-nav button:hover, .ui-nav button:focus {
    background: #D4A12D;
    outline: none;
}
.ui-nav button:active {
    outline: none;
    transform: translateY(0.25em);
    transition-duration: 100ms;
}
.ui-heading {
    margin: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: normal;
}
.ui-heading:before {
    content: "Animator";
    font-size: 0.5rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}
/* ---------------------------------- */
.ui-big-image {
    opacity: 0;
    transform: translateX(-100%);
}
.ui-big-image img {
    transform: scale(0.85);
}
.ui-big-image[data-active] ~ .ui-big-image {
    transform: translateX(100%);
}
.ui-big-image[data-active] {
    opacity: 1;
    transform: translateX(0%);
}
.ui-big-image[data-active] img {
    transform: scale(1);
}
/* ---------------------------------- */
.ui-article {
    transform: translateX(-100%);
}
.ui-article:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #D4A12D;
    opacity: 1;
    transition-duration: 0.35s;
    z-index: 1;
}
.ui-article[data-active] ~ .ui-article {
    transform: translateX(100%);
}
.ui-article[data-active] {
    transform: translateX(0%);
}
.ui-article[data-active]:before {
    opacity: 0;
}
/* ---------------------------------- */
.ui-thumbnail > img {
    filter: grayscale(100%);
    transition-duration: 0.35s;
}
.ui-thumbnail:active > img {
    transform: scale(0.9);
    transition-duration: 100ms;
}
.ui-thumbnail:focus {
    outline: none;
}
.ui-cuticle {
    display: none;
}
.ui-thumbnail[data-active] > img, .ui-thumbnail:hover > img {
    filter: grayscale(0%);
}
.ui-thumbnail[data-active] .ui-cuticle {
    display: block;
}
/* ---------------------------------- */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1A130C;
}
*, *:before, *:after {
    box-sizing: border-box;
    position: relative;
    transition-property: transform, opacity, filter;
    transition-duration: 0.7s, 0.7s, 0.7s;
    transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}
body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
</style>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="http://www.devanswer.com/codes/files/QmZYMG.js"></script>
<script src="http://www.devanswer.com/codes/files/flipping.web.js"></script>
<div id="app" data-state="0">
  <div class="ui-big-images">    
    <div class="ui-big-image" data-key="0">
      <img src="http://www.devanswer.com/img/slider-1.jpg" alt=""/>
    </div>
    <div class="ui-big-image" data-key="1">
      <img src="http://www.devanswer.com/img/slider-2.jpg" alt=""/>
    </div>
    <div class="ui-big-image" data-key="2">
      <img src="http://www.devanswer.com/img/slider-3.jpg" alt=""/>
    </div>
    <div class="ui-big-image" data-key="3">
      <img src="http://www.devanswer.com/img/slider-4.jpg" alt=""/>
    </div>
    <div class="ui-big-image" data-key="4">
      <img src="http://www.devanswer.com/img/slider-5.jpg" alt=""/>
    </div>
    <div class="ui-big-image" data-key="5">
      <img src="http://www.devanswer.com/img/slider-6.jpg" alt=""/>
    </div>
  </div>
  <div class="ui-thumbnails">
    <div class="ui-thumbnail" tabindex="-1" data-key="0">
      <img src="http://www.devanswer.com/img/slider-1.jpg" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="1">
      <img src="http://www.devanswer.com/img/slider-2.jpg" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="2">
      <img src="http://www.devanswer.com/img/slider-3.jpg" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="3">
      <img src="http://www.devanswer.com/img/slider-4.jpg" alt=""/>
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="4">
      <img src="http://www.devanswer.com/img/slider-5.jpg" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="5">
      <img src="http://www.devanswer.com/img/slider-6.jpg" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
  </div>
  <div class="ui-content">    
    <nav class="ui-nav">
      <button id="prev" tabindex="-1" title="Previous">&lt;</button>
      <button id="next" tabindex="-1" title="Next">&gt;</button>
    </nav>
    <div class="ui-articles">
      <article class="ui-article" data-key="0">
        <h2 class="ui-heading">Stephen Shaw</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
      </article>
      <article class="ui-article" data-key="1">
        <h2 class="ui-heading">David Khourshid</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
      </article>
      <article class="ui-article" data-key="2">
        <h2 class="ui-heading">Coding Compadre</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="3">
        <h2 class="ui-heading">Boolean Buddy</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="4">
        <h2 class="ui-heading">Animation Amigo</h2>
        <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
      </article>
      <article class="ui-article" data-key="5">
        <h2 class="ui-heading">Keyframe Companion</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
      </article>
    </div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
console.clear();
const elPrevButton = document.querySelector('#prev');
const elNextButton = document.querySelector('#next');
const flipping = new Flipping();
const elImages = Array.from(document.querySelectorAll('.ui-big-image'));
const elThumbnails = Array.from(document.querySelectorAll('.ui-thumbnail'));
let state = {
    photo: 0
};
function send(event) {
    // read cuticle positions
    flipping.read();
    const elActives = document.querySelectorAll('[data-active]');
    Array.from(elActives)
        .forEach(el => el.removeAttribute('data-active'));
    switch (event) {
        case 'PREV':
            state.photo--;
            // Math.max(state.photo - 1, 0);
            break;
        case 'NEXT':
            state.photo++;
            // Math.min(state.photo + 1, elImages.length - 1);
            break;
        default:
            state.photo = +event;
            break;
    }
    var len = elImages.length;
    // Loop Around
    //state.photo = ( ( state.photo % len) + len ) % len;
    state.photo = Math.max(0, Math.min(state.photo, len - 1));
    Array.from(document.querySelectorAll(`[data-key="${state.photo}"]`))
        .forEach(el => {
            el.setAttribute('data-active', true);
        });
    // execute the FLIP animation
    flipping.flip();
}
elThumbnails.forEach(thumb => {
    thumb.addEventListener('click', () => {
        send(thumb.dataset.key);
    });
});
elPrevButton.addEventListener('click', () => {
    send('PREV');
});
elNextButton.addEventListener('click', () => {
    send('NEXT');
});
send(0);
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>
Other Codes

3D Cubic Slider Code

In this post, thumbnail images are displayed as galleries. But to display each image, a cube rotates and the images are around this cube.
Users Comments Slider with Bootstrap

In this code, a number of comments from website users who have used our products are displayed, and we have done this with the help of slides.
Vertical Image Gallery Code with Preview . . .

In this code, the slides smell vertically and by placing a cursor on each of the small photos, the photo is displayed in large size.
Animated Clip Path Slider Concept

In this code we have a different slider and full screen. This slider displays two images at a time. Images of this slider are cropped during square hover.