带缩略图的Bootstrap carousel在更改后不工作

Question

朋友们，我用这段代码做产品图库，但是手工无法工作，问题在哪里?我使用这个代码，但是照片的拇指部分不能正确移动照片，不能工作?

<!-- Sorry! Lightbox doesn't work - yet. -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@foreach (var obj in galleries.Select((item, index) => new { item, index }))
{
<div class="carousel-item @(obj.index==0?"item active":"item")" data-slide-number="@obj.item.GalleryId">
<img src="/ProductFile/Gallery/@obj.item.ImageName" class="d-block w-100" alt="..." data-remote="https://source.unsplash.com/tXqVe7oO-go/" data-type="image" data-toggle="lightbox" data-gallery="example-gallery">
</div>
}
</div>
</div>
<!-- Carousel Navigation -->
<div id="carousel-thumbs" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row mx-0">
@foreach (var item in galleries)
{
<div id="[e-mail]" class="thumb col-4 col-sm-2 px-1 py-2" data-target="#myCarousel" data-slide-to="@item.GalleryId">
<img src="/ProductFile/Gallery/@item.ImageName" class="img-fluid" alt="...">
</div>
}
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-thumbs" 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="#carousel-thumbs" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

我使用这个代码，但照片的拇指部分没有正确移动照片，不工作吗?

<script>
$('#myCarousel').carousel({
interval: false
});
$('#carousel-thumbs').carousel({
interval: false
});
// handles the carousel thumbnails
// https://stackoverflow.com/questions/25752187/bootstrap-carousel-with-thumbnails-multiple-carousel
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr('id');
var id = parseInt(id_selector.substr(id_selector.lastIndexOf('-') + 1));
$('#myCarousel').carousel(id);
});
// Only display 3 items in nav on mobile.
if ($(window).width() < 575) {
$('#carousel-thumbs .row div:nth-child(4)').each(function () {
var rowBoundary = $(this);
$('<div class="row mx-0">').insertAfter(rowBoundary.parent()).append(rowBoundary.nextAll().addBack());
});
$('#carousel-thumbs .carousel-item .row:nth-child(even)').each(function () {
var boundary = $(this);
$('<div class="carousel-item">').insertAfter(boundary.parent()).append(boundary.nextAll().addBack());
});
}
// Hide slide arrows if too few items.
if ($('#carousel-thumbs .carousel-item').length < 2) {
$('#carousel-thumbs [class^=carousel-control-]').remove();
$('.machine-carousel-container #carousel-thumbs').css('padding', '0 5px');
}
// when the carousel slides, auto update
$('#myCarousel').on('slide.bs.carousel', function (e) {
var id = parseInt($(e.relatedTarget).attr('data-slide-number'));
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-' + id + ']').addClass('selected');
});
// when user swipes, go next or previous
$('#myCarousel').swipe({
fallbackToMouseEvents: true,
swipeLeft: function (e) {
$('#myCarousel').carousel('next');
},
swipeRight: function (e) {
$('#myCarousel').carousel('prev');
},
allowPageScroll: 'vertical',
preventDefaultEvents: false,
threshold: 75
});
//$(document).on('click', '[data-toggle="lightbox"]', function(event) {
//  event.preventDefault();
//  $(this).ekkoLightbox();
//});

$('#myCarousel .carousel-item img').on('click', function (e) {
var src = $(e.target).attr('data-remote');
if (src) $(this).ekkoLightbox();
});
</script>

Answer 1

感谢分享网站网址。我试着检查了你的代码，发现了一些问题。

你可以试着做下面的修改来解决这个问题。

1. 我注意到data-slide-to值从4开始。应该从0开始。

<div id="carousel-selector-4" class="thumb col-4 col-sm-2 px-1 py-2" data-target="#myCarousel" data-slide-to="0">
<img src="./درنیکا گیفت _ کاسه_files/39d5e36e372942f2b2d284c0a8e1b2b8.jpg" class="img-fluid" alt="...">
</div>
<div id="carousel-selector-5" class="thumb col-4 col-sm-2 px-1 py-2 selected" data-target="#myCarousel" data-slide-to="1">
<img src="./درنیکا گیفت _ کاسه_files/3d030297d7914f67b12d775f01e562fb.jpg" class="img-fluid" alt="...">
</div>
<div id="carousel-selector-6" class="thumb col-4 col-sm-2 px-1 py-2" data-target="#myCarousel" data-slide-to="2">
<img src="./درنیکا گیفت _ کاسه_files/df7abc7f67654bce87bd5191d98f9680.jpg" class="img-fluid" alt="...">
</div>
<div id="carousel-selector-7" class="thumb col-4 col-sm-2 px-1 py-2" data-target="#myCarousel" data-slide-to="3">
<img src="./درنیکا گیفت _ کاسه_files/7a87779468ff4b958d715d6a39d08cdf.jpg" class="img-fluid" alt="...">
</div>

2. 下面的Jquery代码导致的问题。试着注释/删除它

$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr('id');
var id = parseInt(id_selector.substr(id_selector.lastIndexOf('-') == id_selector));
$('#myCarousel').carousel(id);
});

输出:

https://i.stack.imgur.com/wkYX0.jpg

此外，我建议您为Next和Previous操作添加一个箭头按钮。

<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>