我想在我的图库网页中使用此代码，问题是当一张专辑幻灯片完成后，它应该从第一张图片开始。而且，当我尝试打开第二张专辑时，大多数时候它都不会显示幻灯片。我认为每张幻灯片和当前幻灯片的计数存在一些问题。
by(df1$diff > 5,df1$individual,any)
ychmail 回答：具有许多专辑的Bootstrap LightBox Gallery
这是您似乎想使用Bootstrap 4完成的示例，尽管Bootstrap 4未包含在您的问题中，但仍被用作问题标签，因此我猜您正在使用它，或者至少想要使用它：
带有标签：
/* added for SO example only,you probably don't need it */
.nav.nav-tabs {
margin: 1rem 0;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="slider-1-tab" data-toggle="tab" href="#slider-1" role="tab" aria-controls="slider-1" aria-selected="true">Slider 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="slider-2-tab" data-toggle="tab" href="#slider-2" role="tab" aria-controls="slider-2" aria-selected="false">Slider 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="slider-1" role="tabpanel" aria-labelledby="slider-1-tab">
<div id="carouselSlider-1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSlider-1" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlider-1" data-slide-to="1"></li>
<li data-target="#carouselSlider-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSlider-1" 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="#carouselSlider-1" 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 class="tab-pane" id="slider-2" role="tabpanel" aria-labelledby="slider-2-tab">
<div id="carouselSlider-2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSlider-2" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlider-2" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/4.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/5.jpg" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSlider-2" 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="#carouselSlider-2" 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>
</div>
诚然，它可以变得更聪明。您可能有一个包含对象库结构的配置对象和一个从对象输出必要标记的函数。
带有标签和config对象的通用示例：
在编译时从config动态生成所有选项卡和滑块：
$(function() {
const galleryConfig = {
sliders: [{
id: 'slider-1',title: 'Slider 1',slides: [{
src: 'https://www.gstatic.com/webp/gallery/1.jpg',alt: 'First slide'
},{
src: 'https://www.gstatic.com/webp/gallery/2.jpg',alt: 'Second slide'
},{
src: 'https://www.gstatic.com/webp/gallery/3.jpg',alt: 'Third slide'
}]
},{
id: 'slider-2',title: 'Slider 2',slides: [{
src: 'https://www.gstatic.com/webp/gallery/4.jpg',{
src: 'https://www.gstatic.com/webp/gallery/5.jpg',alt: 'Second slide'
}]
}]
};
function generateSliders(config) {
let navs = $('<ul />',{
role: 'tablist',class: 'nav nav-tabs'
});
let tabs = $('<div />',{
class: 'tab-content'
})
config.sliders.forEach((slider,index) => {
let $li = $('<li />',{
class: 'nav-item',html: $('<a />',{
class: 'nav-link' + (index ? '' : ' active'),id: `slider-${index + 1}-tab`,'data-toggle': 'tab',href: `#slider-${index + 1}`,role: 'tab','aria-controls': `#slider-${index + 1}`,'aria-selected': index ? 'false' : 'true',text: slider.title
})
});
$li.appendTo(navs);
});
navs.appendTo($('#galleryContainer'));
config.sliders.forEach((slider,index) => {
let $tab = $('<div />',{
class: 'tab-pane' + (index ? '' : ' active'),id: slider.id,role: 'tabpanel','aria-labelledby': `${slider.id}-tab`,html: $('<div />',{
class: 'carousel slide','data-ride': 'carousel',id: `carouselSlider-${index + 1}`,html: $('<ol />',{
class: 'carousel-indicators',html: slider.slides.map((s,i) => $('<li />',{
'data-target': `#carouselSlider-${index + 1}`,'data-slide-to': `${i}`,class: i ? '' : 'active'
})[0].outerHTML).join('')
})[0].outerHTML
+ $('<div />',{
class: 'carousel-inner',i) => $('<div />',{
class: 'carousel-item' + (i ? '' : ' active'),html: $('<img />',{
class: 'd-block w-100',src: s.src,alt: s.alt
})
})[0].outerHTML).join('')
})[0].outerHTML
+ $('<a />',{
class: 'carousel-control-prev',href: `#carouselSlider-${index + 1}`,role: 'button','data-slide': 'prev',html: $('<span />',{
class: 'carousel-control-prev-icon','aria-hidden': 'true'
})[0].outerHTML
+ $('<span />',{
class: 'sr-only',text: 'Previous'
})[0].outerHTML
})[0].outerHTML
+ $('<a />',{
class: 'carousel-control-next','data-slide': 'next',{
class: 'carousel-control-next-icon',text: 'Next'
})[0].outerHTML
})[0].outerHTML
})
});
$tab.appendTo(tabs)
})
tabs.appendTo($('#galleryContainer'));
}
generateSliders(galleryConfig);
})/* added for SO example only,you probably don't need it */
.nav.nav-tabs {
margin: 1rem 0;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div id="galleryContainer"></div>
</div>
很显然，您的配置对象可以从外部源加载。这仅仅是概念的证明。 generateSliders()的作用是遍历配置对象中的每个滑块并输出必要的Bootstrap 4标记，因此您不必这样做，尤其是因为它很容易错过aria属性，恕我直言，可以通过尽可能避免伸出手。
使用模式：
.modal-launchers img {
width: 100px;
height: auto;
display: inline-block;
margin-right: 1rem;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col modal-launchers">
<a id="modal-link-1" href="#modal-1" data-toggle="modal" data-target="#modal-1">
<img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="First slider">
</a>
<a id="modal-link-2" href="#modal-2" data-toggle="modal" data-target="#modal-2">
<img src="https://www.gstatic.com/webp/gallery/4.jpg" alt="Second slider"></a>
</div>
</div>
</div>
<div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="modal-link-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">First gallery</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="carouselSlider-1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSlider-1" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlider-1" data-slide-to="1"></li>
<li data-target="#carouselSlider-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSlider-1" 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="#carouselSlider-1" 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>
</div>
</div>
<div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="modal-link-2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Second gallery</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="carouselSlider-2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSlider-2" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlider-2" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/4.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/5.jpg" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSlider-2" 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="#carouselSlider-2" 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>
</div>
</div>
再次，仅是示例。您所需要做的就是浏览Bootstrap的文档，从示例中获取标记并将其应用于您的代码。
带有模态和config对象的通用示例：
在编译时从config动态构建所有模态+滑块：
$(function() {
const galleryConfig = {
sliders: [{
id: 'slider-1',slides: [{
src: 'https://picsum.photos/id/230/800/600',{
src: 'https://picsum.photos/id/231/800/600',{
src: 'https://picsum.photos/id/232/800/600',slides: [{
src: 'https://picsum.photos/id/233/800/600',{
src: 'https://picsum.photos/id/234/800/600',{
src: 'https://picsum.photos/id/235/800/600',alt: 'Third slide'
},{
src: 'https://picsum.photos/id/236/800/600',alt: 'Fourth slide'
},{
src: 'https://picsum.photos/id/237/800/600',alt: 'Fifth slide'
}]
}]
};
function generateModals(config) {
let navs = $('#galleryContainer');
config.sliders.forEach((slider,i) => {
let $launcher = $('<a />',{
id: `modal-link-${i}`,href: `#gallery-modal-${i}`,'data-target': `#gallery-modal-${i}`,'data-toggle': 'modal',title: slider.title,html: slider.slides.map(image => $('<img />',{
src: image.src,alt: image.title
})).map(o => o[0].outerHTML).join('')
});
$launcher.appendTo(navs);
});
navs.appendTo($('#galleryContainer'));
config.sliders.forEach((slider,i) => {
let $modalDiv = $('<div />',{
class: 'modal fade',id: `gallery-modal-${i}`,role: 'dialog','aria-labelledby': `modal-link-${i}`,'aria-hidden': 'true',{
class: 'modal-dialog modal-lg',role: 'document',{
class: 'modal-content',{
class: 'modal-header',html: $('<h5 />',{
class: 'modal-title',text: slider.title
})[0].outerHTML +
$('<button />',{
type: 'button',class: 'close','data-dismiss': 'modal','aria-label': 'Close',{
'aria-hidden': 'true',html: '×'
})
})[0].outerHTML
})[0].outerHTML +
$('<div />',{
class: 'modal-body',{
class: 'carousel slide',id: `carouselSlider-${i}`,{
class: 'carousel-indicators',html: slider.slides.map((o,k) => $('<li />',{
'data-target': `#carouselSlider-${i}`,'data-slide-to': `${k}`,class: k ? '' : 'active'
})[0].outerHTML).join('')
})[0].outerHTML +
$('<div />',{
class: 'carousel-inner',k) => $('<div />',{
class: 'carousel-item' + (k ? '' : ' active'),{
class: 'd-block w-100',src: o.src,alt: o.alt
})
})[0].outerHTML).join('')
})[0].outerHTML +
$('<a />',{
class: 'carousel-control-prev',href: `#carouselSlider-${i}`,{
class: 'carousel-control-prev-icon','aria-hidden': 'true'
})[0].outerHTML +
$('<span />',{
class: 'sr-only',text: 'Previous'
})[0].outerHTML
})[0].outerHTML +
$('<a />',{
class: 'carousel-control-next',{
class: 'carousel-control-next-icon',text: 'Next'
})[0].outerHTML
})[0].outerHTML
})
})[0].outerHTML
})
})
});
$modalDiv.appendTo($('body'))
})
}
generateModals(galleryConfig);
})#galleryContainer img {
height: 72px;
width: auto;
display: block;
margin: 0 1px 1px 0;
}
#galleryContainer a {
margin: 0 0 -1px;
padding: .5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
transition: background-color .3s ease-out;
background-color:transparent;
}
#galleryContainer a:hover {
background-color: #f5f5f5;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div id="galleryContainer"></div>
</div>
</div>
</div>