Показать только 1 изображение галереи на странице HTML

Question

Я пытаюсь отобразить коллекцию изображений на веб-сайте, однако

-Я хочу, чтобы сначала отображалось только одно изображение, после нажатия на это изображение

-Пользователь может нажать настрелка «влево» или «вправо» для проверки других изображений.

Я использую Light-box, и теперь мой код работает так, что все изображения отображаются на странице, а не только одно

<div class="gallery">
         <a href="images/pic1.jpg" data-lightbox="mygallery"> <img   class="img-responsive"  src="images/pic1.jpg"> </a>
         <a href="images/pic2.jpg" data-lightbox="mygallery"><img src="images/pic2.jpg"  class="img-responsive" > </a>
         <a href="images/pic4.jpg" data-lightbox="mygallery"><img src="images/pic4.jpg"  class="img-responsive"></a>
         <a href="images/pic5.jpg" data-lightbox="mygallery"><img src="images/pic5.jpg"  class="img-responsive"></a>
         <a href="images/pic6.jpg" data-lightbox="mygallery"><img src="images/pic6.jpg"  class="img-responsive"></a>
         <a href="images/pic7.jpg" data-lightbox="mygallery"> <img src="images/pic7.jpg"  class="img-responsive"></a>
         <a href="images/pic8.jpg" data-lightbox="mygallery"><img src="images/pic8.jpg"  class="img-responsive"></a>

Answer 1

У меня есть ваша проблема, и я использую owlcarousel

OwlCarousel

вы можете легко делать то, что вы хотите, или вы можете использовать тоже

Bootstrap4 Carousel

это предложение для вас.

Answer 2

Лучше использовать слайдер, который поддерживает лайтбокс.Также вы можете проверить следующий пример -

// lightbox gallery
  var current = '.heathrow-images-for-lightbox ul li.current';
      


  // loading lightbox on thumbnail click
  $('.heathrow-images-for-lightbox ul li').on('click', 'a', function(event) {
    event.preventDefault();
    var bigImagehref = $(this).attr('href');

    $(this).parent().addClass('current');
    $('.heathrow-lightbox').fadeIn();
    $('.heathrow-lightbox').append('<img class="image-in-lightbox" src="' + bigImagehref + '" alt=""></div>');

  });

  

  //closing the lighbox and reseting the current class
  $('.heathrow-lightbox').on('click', '.close', function() {
    $('.heathrow-lightbox').fadeOut();
    $('.heathrow-lightbox .image-in-lightbox').remove();
    $(current).removeClass('current');
  });


  //navigating through the gallery images in the lightbox


  $('.heathrow-lightbox a').on('click', function() {        
    if ($(this).attr('class') == 'next') {
      if($(current).next().length){
        var bigImagehref = $(current).next().find('a').attr('href');
        $(current).next().addClass('current');
        $(current).prev().removeClass('current');
      }
      else {
        $(".heathrow-images-for-lightbox li:last").removeClass('current');
        $(".heathrow-images-for-lightbox li:first").addClass('current');
        var bigImagehref = $(current).find('a').attr('href');
        
      }
      
        
    }
    else if ($(this).attr('class') == 'prev') {
      bigImagehref = $(current).prev().find('a').attr('href');
    }
   

    $('.heathrow-lightbox .image-in-lightbox').remove();
    $('.heathrow-lightbox').append('<img class="image-in-lightbox" src="' + bigImagehref + '" alt=""></div>');
  });

.heathrow-lightbox {
  background: rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  height: 100%;
  top: 0;   
  width: 100%;
  z-index: 9999;
}

.heathrow-lightbox .image-in-lightbox {
  max-width: 700px;
  max-height: 700px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 999;
}

.heathrow-images-for-lightbox {

}

.heathrow-images-for-lightbox ul {
  padding: 0;
  margin: 0;
}

.heathrow-images-for-lightbox ul li {
  transition: all 300ms; 
  float: left;
  display: block;
  position: relative;
  width:  25%;
}

.heathrow-images-for-lightbox ul li a img {
  width: 100%;
  height: auto;
}



.close, 
.next, 
.prev {
  transition: all 300ms;
  color: red;
  font-size: 30px;
  text-decoration: none;
  position: absolute;
  z-index: 9999;
}

.close {
  position: absolute;
  right: 20px;
  top: 20px;
}

.next, 
.prev {
  color: #aaa;
  top: 50%;
}

.next {
  right: 20px;
}

.prev { 
  left: 20px;
}

.close:hover, 
.next:hover, 
.prev:hover {
  color: #fff;
}

ul {
  list-style: none;
}   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="heathrow-images-for-lightbox">
<ul>
       <li>
        <a href="https://uat.onewarwickpark.co.uk/media/1079/one-warwick-park-deluxe-room.jpg">
          <img src="https://uat.onewarwickpark.co.uk/media/1079/one-warwick-park-deluxe-room.jpg" alt="image thumb" />
         </a>
      </li>
  
         <li>
        <a href="https://uat.onewarwickpark.co.uk/media/1077/one-warwick-park-guest-lounge.jpg">
          <img src="https://uat.onewarwickpark.co.uk/media/1077/one-warwick-park-guest-lounge.jpg" alt="image thumb" />
         </a>
      </li>
  
         <li>
        <a href="https://uat.onewarwickpark.co.uk/media/1075/one-warwick-park-atrium.jpg">
          <img src="https://uat.onewarwickpark.co.uk/media/1075/one-warwick-park-atrium.jpg" alt="image thumb" />
         </a>
      </li>
  
         <li>
        <a href="https://uat.onewarwickpark.co.uk/media/1078/one-warwick-park-reception.jpg">
          <img src="https://uat.onewarwickpark.co.uk/media/1078/one-warwick-park-reception.jpg" alt="image thumb" />
         </a>
      </li>


  </ul>
  </div>

  <div class="heathrow-lightbox">
    <a href="javascript:void(0)" class="close">close<i class="fa fa-close"></i></a>
    <a href="javascript:void(0)" class="prev">prev<i class="fa fa-chevron-left"></i></a>
    <a href="javascript:void(0)" class="next">next<i class="fa fa-chevron-right"></i></a>
  </div>