Индикатор карусели BS4 выделяет неправильное изображение при нажатии (активный) - PullRequest
Новая
       124

Индикатор карусели BS4 выделяет неправильное изображение при нажатии (активный)

3 голосов
/ 28 мая 2020

Я делаю карусель BS4. Я использую Jquery для извлечения изображений для отображения. Изображения названы 1.jpg - 72.jpg Все работает нормально, за исключением того, что эскизы индикаторов выделяют неправильное изображение при щелчке.

Если щелкнуть изображение 2, изображение 3 будет выделено et c.

Я не могу узнайте, почему это происходит.

вот скрипка

Я использую этот Jquery для извлечения изображений и добавления их в div. 

$(document).ready(function(){
  for(var j = 1; j < 72; j++) {
$('<div class="carousel-item"><img src=" ./images/'+ j+'.jpg " width="100%">   
  </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel" data-slide-to="'+j+'"><img  src=" ./images/'+ j+'.jpg " class="img- fluid"></li>').appendTo('.carousel-indicators')
console.log(j);
}
$('.carousel-item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel').carousel({
 pause: true,
 interval: true,
});
});

HTML это просто c. 


<div id="carousel" class="carousel slide" data-interval="false">            
  <div class='carousel-outer'>
    <div class="carousel-inner"></div>      
      <a class="carousel-control-prev" href="#carousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#carousel" data-slide="next"> <span class="carousel-control-next-icon"></span>
      </a>
     </div>
<!-- Indicators -->
    <ol class="carousel-indicators"></ol>
</div>

css

#carousel {
      margin: 20px auto;
      max-height:658px;
      width: 1024px;
  }
  #carousel .carousel-indicators {
    flex-wrap: wrap;
       justify-content: center; 
       padding: 0 15px; 
       width: 100%; 
       position: static; 
       right: 0; 
       bottom: 0; 
       margin-right: 0; 
       margin-left: 0; 

  }
  #carousel .carousel-indicators li {
      background-color: transparent;
      -webkit-border-radius: 0;
      border-radius: 0;
      display: inline-block;
      height: auto;
      margin: 0 !important;
      width: auto;
  }
  #carousel .carousel-indicators li img {
      width: 50px;
      display: block;
      opacity: 0.9;
  }
  #carousel .carousel-indicators li.active img {
      opacity: 1;
  }
  #carousel .carousel-indicators li:hover img {
      opacity: 0.75;
  }
  #carousel .carousel-outer {
      position: relative;
  }

  .carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: block !important;
}

Ответы [ 3 ]

1 голос
/ 01 июня 2020

Скорее всего, это происходит из-за того, что l oop начинается с 1 вместо 0.

Возможное исправление - изменить значение атрибута data-slide-to на j - 1 вместо j: 

$(document).ready(function(){
  for(var j = 1; j < 72; j++) {
    $('<div class="carousel-item"><img src=" ./images/'+ j +'.jpg " width="100%"></div>').appendTo('.carousel-inner');
    $('<li data-target="#carousel" data-slide-to="'+ (j - 1) +'"><img  src=" ./images/'+ j +'.jpg " class="img- fluid"></li>').appendTo('.carousel-indicators')
console.log(j);
}
    $('.carousel-item').first().addClass('active');
    $('.carousel-indicators > li').first().addClass('active');
    $('#carousel').carousel({
        pause: true,
        interval: true,
    });
});
0 голосов
/ 07 июня 2020

измените data-slide-to="'+j+'" на data-slide-to="'+ (j - 1) +'"

0 голосов
/ 01 июня 2020

Я думаю, проблема связана с l oop, он начинается с 1, а для data-slide-to он должен начинаться с 0, поэтому вы можете попробовать это 

$('<li data-target="#carousel" data-slide-to="'+(j-1)+'"><img  src=" ./images/'+ j+'.jpg " class="img- fluid"></li>').appendTo('.carousel-indicators')
...