How to Create Image-Video Thumbnail Slider With Previous and Next Button dynamically using Javascript only?

Question

I want to make Thumbnail Image-Video Slider dynamic using javascript only, here i created a container in which i added some images through javascript, but now i want to slide this images with Next and Previous Buttons and also on swipe mouse slider should slide.

This is the Latest Code whatever i did now i am getting problem in NEXT & PREVIOUS Buttons. i want onclick of NEXT & PREVIOUS image slider should slide Backward and Forward

This is the Output what i am getting from this code

and images should come in only one Row

Please Help me !!

$(document).ready(function ()
{
    function PhotoGallery()
    {
        this.index = 0;
        this.holder = [];


        var container = document.getElementById('thumbs_container');
        var nextButton = document.createElement('button');
        nextButton.className = 'next';
        nextButton.innerHTML = '❯';
        container.appendChild(nextButton);





        var prevButton = document.createElement('button');
        prevButton.className = 'previous'; 
        prevButton.innerHTML = '❮';
        container.appendChild(prevButton);

        container = $(window).width();
        nextButton.addEventListener('click', this.next);
        prevButton.addEventListener('click', this.previous);

        this.create = function (name, src) {
            var container = document.getElementById('thumbs_container');
            var img = document.createElement('img');
            img.src = src;
            img.alt = name;
            img.className = 'thumb';
            img.style.width = '300px';
            img.style.height = '150px;';
            container.appendChild(img);

            this.holder.push({
                index: ++this.index,
                ele: img
            })
        }

        this.next = function () {
            this.holder[this.index].ele.style.display = 'none';
            this.holder[++this.index].ele.style.display = block;

        }

        this.previous = function () {
            this.holder[this.index].ele.style.display = 'none';
            this.holder[--this.index].ele.style.display = 'block';

        }
    }

    var photoGallery = new PhotoGallery();
    photoGallery.create('1', 'img/1.jpg');
    photoGallery.create('2', 'img/2.jpg');
    photoGallery.create('3', 'img/3.jpg');
    photoGallery.create('4', 'img/4.jpg');
    photoGallery.create('5', 'img/5.jpg');
    photoGallery.create('6', 'img/6.jpg');
    photoGallery.create('7', 'img/7.jpg');
    photoGallery.create('8', 'img/8.jpg');
    photoGallery.create('9', 'img/9.jpg');
    photoGallery.create('10','img/10.jpg');

#thumbs_container {
    margin: 400px auto; /*center-aligned*/
    width: 100%; /*width:400px;*/
    padding: 4px 40px; /*Gives room for arrow buttons*/
    box-sizing: border-box;
    position: relative;
    background-color: red;
    -webkit-user-select: none;
    user-select: none;
    /*max-width: 1600px;
    max-height: 600px;*/
    overflow:hidden;
}

.thumb{
    margin-right: 1px;
}



.previous {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    margin-left: -33px;
    margin-top: 63px;
}

.next {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    margin-left: 1822px;
    margin-top: 63px;
}

<div id='thumbs_container'></div>

Answer 1

This is not a comprehensive answer but it should point you in the right direction.

(function() {
function PhotoGallery() {
    this.index = 0;
    this.holder = [];
    this.setIndexVisible = true;
  // When next funtion is called swap the display properties accordingly
    this.next = function() {
        console.log(this.index);
        this.holder[this.index].ele.style.display = 'none';
        this.holder[this.index+1].ele.style.display = 'block';
        this.index+=1;
    }
    // Ditto as above according the requirement
    this.previous = function() {
        this.holder[this.index].ele.style.display = 'none';
        this.holder[this.index-1].ele.style.display = 'block';
        this.index-=1;
    }
    //create a button each for previous and next
  var container = document.getElementById('thumbs_container');
    let nextButton = document.createElement('button');
    nextButton.className="next";
    nextButton.id = "next";
    container.appendChild(nextButton);
    //style the button
    // Listen to the click event and call the corresponsing function
    nextButton.addEventListener('click', this.next.bind(this));
    this.create = function(name, src) {
        var container = document.getElementById('thumbs_container');
        var img = document.createElement('img');
        img.src = src;
        img.alt = name;
        img.className = 'thumb';
        img.style.width = '200px';
        if(this.setIndexVisible && this.index===0)
            img.style.display = 'block';
        else
            img.style.display = 'none';
        container.appendChild(img);
        this.holder.push({
            index: this.holder.length,
            ele: img
        })
    }
}

var photoGallery = new PhotoGallery();
photoGallery.create('RED SQUARE', 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/2000px-Red.svg.png');
photoGallery.create('BLUE SQUARE', 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/600px-000080_Navy_Blue_Square.svg.png')

})();

UPDATE : Please try and understand the code and modify it to fulfill your requirements. You might have to update the next and previous functions and also some of the logic to make it a]usable. This is just a blueprint of how to do it. Here is a jsbin link : https://jsbin.com/ginuvonusi/edit?html,css,js,console,output

Answer 2

var leftFrom = 10;
var scrollPosition = 0;
var scrollOffSet = 400;
$(document).ready(function () {
    function PhotoGallery() {



        $('#thumbs_container').css('width', '100%');
        $('#thumbs_container').css('position', 'absolute');
        $('#thumbs_container').css('overflow-y', 'hidden');
        //$('#thumbs_container').css('left', '1.9%')

        $('#thumbs_container').css('float', 'left');
        $('#thumbs_container').css('height', '215px')


        var container = document.getElementById('thumbs_container');
        var nextButton = document.createElement('button');
        nextButton.className = 'next';
        nextButton.innerHTML = '❯';
        container.appendChild(nextButton);




        var next = function () {
            console.log("Next Clicked" + " " + $('#thumbs_container').width());
            if ((scrollPosition + scrollOffSet) < $('#thumbs_container').width()) {
                scrollPosition = scrollPosition + scrollOffSet;
                $('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
            }
            else {
                if ((scrollPosition + scrollOffSet) > $('#thumbs_container').width())
                    scrollPosition = scrollPosition + scrollOffSet;
                $('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
            }

        }




        var prevButton = document.createElement('button');
        prevButton.className = 'previous';
        prevButton.innerHTML = '&#10094;';
        container.appendChild(prevButton);




        var previous = function ()
        {
            console.log('Clicked Left');
            var leftOffSet = $('#thumbs_container').scrollLeft();
            console.log("leftOffset" + " " + leftOffSet);
            if ((leftOffSet - scrollOffSet) > 0) {
                scrollPosition = scrollPosition - scrollOffSet;
               $('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
            } else {
                if (leftOffSet > 0)
                    $('#thumbs_container').animate({ scrollLeft: 0 }, 750);
            }
        }

        this.imagecreate = function (name, src) {
            var container = document.getElementById('thumbs_container');
            var img = document.createElement('img');
            img.src = src;
            img.alt = name;
            img.className = 'thumb';
            img.style.width = '300px';
            img.style.height = '150px';
            img.style.position = 'absolute';
            img.style.left = leftFrom + 'px';
            leftFrom = leftFrom + 310;
            container.appendChild(img);
        }

        this.videocreate = function (src, type) {
            var container = document.getElementById('thumbs_container');
            var video = document.createElement('video');
            var source = document.createElement('source');
            source.src = src;
            source.type = type;
            video.autoplay = true;
            video.loop = true;
            video.controls = false;
            video.style.display = 'inline-block';
            video.style.width = '260px';
            video.style.height = '260px';
            video.style.position = 'absolute';
            video.style.top = '-41px';
            video.style.left = leftFrom + 'px';
            leftFrom = leftFrom + 270;
            video.appendChild(source);
            container.appendChild(video);
        }

        nextButton.addEventListener('click', next);
        prevButton.addEventListener('click', previous);
}

    var photoGallery = new PhotoGallery();
    photoGallery.imagecreate('1', 'img/1.jpg');
    photoGallery.imagecreate('2', 'img/2.jpg');
    photoGallery.imagecreate('3', 'img/3.jpg');
    photoGallery.imagecreate('4', 'img/4.jpg');
    photoGallery.videocreate('img/mcvideo.mp4', 'video/mp4'); 
    photoGallery.imagecreate('5', 'img/5.jpg');
    photoGallery.imagecreate('6', 'img/6.jpg');
    photoGallery.imagecreate('7', 'img/7.jpg');
    photoGallery.imagecreate('8', 'img/8.jpg');
    photoGallery.videocreate('img/SampleVideo_640x360_1mb.mp4', 'video/mp4');
    photoGallery.imagecreate('9', 'img/9.jpg');
    photoGallery.imagecreate('10', 'img/10.jpg');
    photoGallery.imagecreate('11', 'img/006.jpg');
    photoGallery.videocreate('img/small.mp4', 'video/mp4');
    photoGallery.imagecreate('12', 'img/007.jpg');

    });

#thumbs_container {

    width: 100%; /*width:400px;*/
    padding: 14px 40px; /*Gives room for arrow buttons*/
    box-sizing: border-box;
    position: relative;
    background-color: red;
    -webkit-user-select: none;
    user-select: none;
    /*max-width: 1600px;
    max-height: 600px;*/
    overflow:hidden;
}

.thumb{
    margin-right: 1px;
}

button{position: fixed;
    top: 40%;
    z-index: 99999;
    left: 50%;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    height: 30px;
    width: 30px;
    line-height: 30px;}

.previous {
    background-color: #4CAF50;
    border: none;
    color: white;

    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: fixed;
    margin-left: -33px;
    top: 7%;
    left: 2%;
}

.next {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 2px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: fixed;
    left: 98%;
    top: 7%;
}

.round {
    border-radius: 50%;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DynamicSlider</title>
    <!--<link href="css/thumbs2.css" rel="stylesheet" />
    <link href="css/thumbnail-slider.css" rel="stylesheet" />
    <script src="js/thumbnail-slider.js" type="text/javascript"></script>

    <script src="js/readImages.js"></script>-->
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>-->
    <script src="js/jquery1.6.2.js"></script>
    <script src="js/jquery-1.7.1.min.js"></script>
    <link href="css/DynamicSlider.css" rel="stylesheet" />
    <script src="js/DynamicSlider.js"></script>





</head>


<body>
    <div id='thumbs_container'>

    </div>

</body>


</html>