Как увеличить выделенное изображение в карусели? - PullRequest
Новая
       53

Как увеличить выделенное изображение в карусели?

0 голосов
/ 25 сентября 2019

Я использую загрузочную карусель с кодом ниже.Моя проблема в том, что мне нужно, чтобы основное изображение было «больше» (скажем, покрывающее две трети экрана) при выборе, и после заданного интервала (скажем, две секунды?) Оно возвращается к своему первоначальному размеру.Как мне сделать это в JQuery?

// Instantiate the Bootstrap carousel
$('#recipeCarousel').carousel({
  interval: 2000
})

$('.carousel .carousel-item').each(function() {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length > 0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container text-center my-3" id="bigimage">
  <div class="row mx-auto my-auto">
    <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
      <div class="carousel-inner" role="listbox" style="margin:200px;position:absolute">
        <div class="carousel-item active">
          <img class="d-block col-4 img-fluid" src="images/resource/slider1.png">
        </div>
        <div class="carousel-item">
          <img class="d-block col-4 img-fluid" src="images/resource/slider2.png">
        </div>
        <div class="carousel-item">
          <img class="d-block col-4 img-fluid" src="images/resource/slider3.png">
        </div>
        <div class="carousel-item">
          <img class="d-block col-4 img-fluid" src="images/resource/slider1.png">
        </div>
        <div class="carousel-item">
          <img class="d-block col-4 img-fluid" src="images/resource/slider2.png">
        </div>
        <div class="carousel-item">
          <img class="d-block col-4 img-fluid" src="images/resource/slider3.png">
        </div>

      </div>
      <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>

      <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

Вот изображение карусели в действии:

like this

...