Slider usage is common on many websites. This code provides you with a very responsive and beautiful slider. In this slider in addition to the image of each slide, there is a list of other slides in the form of a small image at the bottom of the slider and each image has its own unique text. The text of each photo is displayed by clicking on that slide. Also the list of slides that contains the images of each slide is in black and white and by clicking on it, it becomes in color.


HTML
<!-- This script got from www.devanswer.com -->
<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>
                        

CSS
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;
}
Javascript
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);