Следующая и предыдущая кнопка в галерее - PullRequest
Новая
       30

Следующая и предыдущая кнопка в галерее

0 голосов
/ 29 января 2019 

$('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>

Я хочу изменить изображение с помощью кнопок «следующий» и «предыдущий».Я искал решение, но не могу найти правильное решение.Так что дайте общее решение для кнопки «следующий» и «предыдущий», которая будет работать с моим кодом. Превосходная кнопка работает отлично, но после достижения 1-го изображения она не доходит до последней остановки, а следующая кнопка работает только для первых 2-х изображений после этого.стоп.и активный класс, также не двигающийся со слайдом, дает лучшее решение этой проблемы заранее, спасибо

1 Ответ

0 голосов
/ 29 января 2019

Попробуйте следующее. 

// 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);
});

Все, что вам нужно сделать, - это сначала добавить активный класс к одному из слайдов, прежде чем пользователь начнет нажимать.

...