Bootstrap 轮播缩放图标错误

编程问答 2022-04-27

问题描述

我正在尝试使用引导程序在 laravel 中显示图像的手动幻灯片，但是当我将鼠标悬停在图像轮播上时，由于某种原因无法点击箭头，我的鼠标指针变成了放大的放大镜玻璃。我在我网站的另一个页面上有完全相同的代码，它工作得很好，但我不知道为什么我在这个页面上遇到这个错误。 代码：

 <!-- main slider carousel items -->
<div id="listingDetailsSlider" class="carousel listing-details-sliders slide mb-30" style="Box-shadow: none;border-top: none;">
  <div class="carousel-inner">
    @foreach($property->images as $image)
    <div class="@if($loop->first) active @endif carousel-item" data-slide-number="{{ $loop->index }}" style="background-image:url({{$image->url}})" data-src="{{$image->url}}">&nbsp;
      <div class="carousel-caption">
        <p class=""> {{$image->description}}</p>
      </div>
    </div>
    @endforeach
  </div>
  @if ($property->images()->count() > 1)
  <a class="carousel-control left" href="#listingDetailsSlider" data-slide="prev">
    <i class="fa fa-angle-left"></i>
  </a>
  <a class="carousel-control right" href="#listingDetailsSlider" data-slide="next">
    <i class="fa fa-angle-right"></i>
  </a>
  @endif
  <!-- main slider carousel nav controls -->
  <ul id="slider-nav" class="option-list carousel-indicators smail-listing list-inline nav nav-justified" style="padding: 0 15px;">
    @foreach($property->images()->get() as $image)
    <li id="smslide_{{ $loop->index }}" data-target="#listingDetailsSlider" data-slide-to="{{ $loop->index }}" class="list-inline-item @if($loop->first) active @endif">
      <a id="carousel-selector-{{ $loop->index }}" class="@if($loop->first) selected @endif" data-slide-to="{{ $loop->index }}" data-target="#listingDetailsSlider">
        <img src="{{\App\Image::getUrl($image->url,'xs')}}" class="img-fluid" alt="{{$image->filename}}">
      </a>
    </li>
    @endforeach
  </ul>
  <!-- main slider carousel items -->
</div>

JS：

$('#listingDetailsSlider').on('slide.bs.carousel',function(ev) {
  var id = $(ev.relatedTarget).data('slide-number');
  scrollimg(id);
});

function scrollimg(id) {
  var clicked = $('#smslide_' + id);
  var elem = $('#slider-nav');
  var pos = clicked.position().left;
  var currentscroll = elem.scrollLeft();
  var divwidth = elem.width();
  pos = (pos + currentscroll) - (divwidth / 2) + 30;
  $(elem).animate({
    scrollLeft: pos
  });
}

CSS：

.option-list {
  overflow-x: auto;
  overflow-y: hidden;
  display: block;
}

.option-list::-webkit-scrollbar {
  height: 10px;
}

.option-list::-webkit-scrollbar-track {
  -webkit-Box-shadow: inset 0 0 4px rgba(0,0.3);
  border-radius: 10px;
}

.option-list::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-Box-shadow: inset 0 0 8px rgba(0,0.5);
}

.option-list li:hover img {
  opacity: 0.75;
}

.option-list li {
  padding: 4px 0;
  margin-bottom: 10px;
}

.option-list li.active {
  background-color: #f1f1f1;
  border: 1px solid var(--main-color);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4carouselhtmllaravellaravel