Next and previous button in gallery

$('body').on('click', '.Image', function () {
   $('#main_img').attr('src', $(this).attr('src'));
   $('.pt-3 > div').removeClass('active');
   $(this).closest('.col-md-2').addClass('active');
});

$('body').on('click', 'button', function() {
   var current = $('.active').length > 0 ? $('.active') : $('.col-md-2').eq(0);
   current.removeClass('.active');
   if($(this).attr('id') === 'prev') {
        var prev = current.prev();
        prev.addClass('active');
        var img = prev.find('img').attr('src');
   } else {
       var next = current.next();
       next.addClass('active');
       var img = next.find('img').attr('src');
   }
   $('#main_img').attr('src', img);
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Task3_slider</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/task3.css" rel="stylesheet" />
    <link href="css/all.css" rel="stylesheet" />
</head>


<body>

    <div class="main">


        <div class="container">


            <div class="row d-flex justify-content-center">
                <button onclick="previmg()">❮</button>
                <div class="col-md-6 d-flex justify-content-center ">
                    <img id="main_img" imgid="1" src="img/product-1.JPG" />
                </div>

                <button onclick="nextimg()">❯</button>
            </div>


            <div class="row d-flex justify-content-center">

                <div class="col-md-6 d-flex pt-3">
                    <div class="thumbnail d-flex">
                        <div class="col-md-2 ">
                            <img imgid="1" class="Image" src="img/product-1.JPG" />
                        </div>
                        <div class="col-md-2  ">
                            <img imgid="2" class="Image" src="img/product-2.jpg" />
                        </div>
                        <div class="col-md-2  ">
                            <img imgid="3" class="Image" src="img/product-3.jpg" />
                        </div>
                        <div class="col-md-2  ">
                            <img imgid="4" class="Image" src="img/product-4.jpg" />
                        </div>
                        <div class="col-md-2 ">
                            <img imgid="5" class="Image" src="img/product-5.jpg" />
                        </div>
                        <div class="col-md-2 ">
                            <img imgid="6" class="Image" src="img/product-6.jpg" />
                        </div>
                    </div>
                    

                </div>

            </div>

        </div>

    </div>

    <script src="jquery-3.3.1.min.js"></script>
    <script src="popper.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="task3.js"></script>

</body>
</html>

I want to change the image using 'next' and 'previous' buttons. I have searched for the solution but I cannot find the proper solution. So give a generic solution for 'next' and 'previous' button which will work with my code.previous button work perfectly but after reach at 1st image its not go to last its stop and next button work only for first 2 image after that its stop. and active class also not moving with slide give the best solution for this problem thanks in advance

Solution

Try the following.

// here you handle your click on image
$('body').on('click', '.Image', function () {
   $('#main_img').attr('src', $(this).attr('src'));
   $('.active').removeClass('active');
   $(this).closest('.col-md-2').addClass('active');
});
// here you handle your prev/next clicks
$('body').on('click', 'button', function() {
   if($(this).attr('id') === 'prev') {
        var prev = $('.active').prev();
        if(prev.length) {
            $('.active').removeClass('active');
        }
        prev.addClass('active');
        var img = prev.find('img').attr('src');
   } else {
       var next = $('.active').next();
       if(next.length) {
            $('.active').removeClass('active');
       }
       next.addClass('active'); 
       var img = next.find('img').attr('src');
   }
   $('#main_img').attr('src', img);
});

All you have to do is initially add active class to one of the slides before user starts to click.