javascript - 具有自定义导航、页面点和进度条的多个 Flickity 轮播
问题描述
我有一个轮播,当我第一次构建它时,每页只需要一个。但是,我现在需要在一页上使用多个轮播。我一直在更新代码以允许多个轮播,包括更新自定义导航和点。
但是我遇到了一个问题,当您有多个轮播时,第一个轮播不再自动播放或显示进度条。第二个轮播(在示例下方)会自动播放并显示进度条。
这是一个jsFiddle。
这是我的代码:
$(document).ready(function(){
var options = {
cellSelector: '.gallery__slide',
cellAlign : 'center',
pageDots : false,
prevNextButtons : false,
accessibility : false,
wrapAround : true,
imagesLoaded : true,
pauseAutoPlayOnHover: true,
fullscreen: true,
lazyLoad: 1
};
var time = 2;
var $bar,
$slider,
isPause,
tick,
percentTime;
$('.gallery__slides').flickity(options);
$('.gallery-container').each(function(i, container) {
var $container = $(container);
var $slider = $container.find('.gallery__slides');
var flkty = $slider.data('flickity');
var selectedIndex = flkty.selectedIndex;
var slideCount = flkty.slides.length;
var $pagers = $container.find('.gallery__page-dots');
for (i = 0; i < slideCount; i++) {
$pagers.append('<li class="gallery__page-dot-item"></li>');
}
var $pager = $pagers.find('li');
var $caption = $container.find('.gallery__caption .image-caption');
$slider.on( 'select.flickity', function() {
// set image caption using img's alt
$caption.text( flkty.selectedElement.children[0].alt );
$pager.filter('.is-selected').removeClass('is-selected');
$pager.eq(flkty.selectedIndex).addClass('is-selected');
});
$pagers.on( 'click', 'li', function() {
var index = $(this).index();
resetProgressbar();
$slider.flickity( 'select', index );
startProgressbar();
});
// previous
var $prev = $container.find('.prev');
$prev.on( 'click', function() {
resetProgressbar();
$slider.flickity('previous');
startProgressbar();
});
// next
var $next = $container.find('.next');
$next.on( 'click', function() {
resetProgressbar();
$slider.flickity('next');
startProgressbar();
});
$bar = $container.find('.gallery__progress .progress');
$slider.on({
mouseenter: function() {
isPause = true;
},
mouseleave: function() {
isPause = false;
}
})
function startProgressbar() {
resetProgressbar();
percentTime = 0;
isPause = false;
tick = setInterval(interval, 12);
}
function interval() {
if(isPause === false) {
percentTime += 1 / (time+0.1);
$bar.css({
width: percentTime+"%"
});
if(percentTime >= 100)
{
$slider.flickity('next', true);
startProgressbar();
}
}
}
function resetProgressbar() {
$bar.css({
width: 0+'%'
});
clearTimeout(tick);
}
startProgressbar();
});
});
.gallery-container {
position: relative;
}
.gallery_slides.is-fullscreen .gallery__slide{
height: 100%;
}
.gallery__slide,
.gallery__slide figure{
width: 100%;
}
.gallery__progress {
width: 100%;
height: 5px;
background: rgba(255, 255, 255, .7);
}
.gallery__progress .progress {
width: 0%;
height: 5px;
background: red;
}
.gallery__nav a {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-transform: uppercase;
font-size:12px;
color: #fff;
letter-spacing: 3px;
}
.gallery__nav a::after {
content: "";
display: block;
border-top: 1px solid $color-brand;
width: 25px;
position: absolute;
top: 7px;
}
.gallery__nav a.next {
right:30px;
}
.gallery__nav a.prev {
left:30px;
}
.gallery__page-dots {
list-style: none;
display:block;
width:100%;
text-align: center;
padding:0;
}
.gallery__page-dots li {
display:inline-block;
border:1px solid red;
width:10px;
height:10px;
border-radius:100%;
background:transparent;
cursor:pointer;
margin:0 10px;
}
.gallery__page-dots li.is-selected {
background:red;
}
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet"/>
<div class="gallery-container">
<div class="gallery__slides">
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 1 ">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 2 ">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 3">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 4">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 5">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 6">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="Lorem ipsum sit dolor amet 7">
</div>
</div>
<div class="gallery__progress">
<div class="progress"></div>
</div>
<div class="gallery__caption">
<p class="image-caption"></p>
</div>
<ol class="gallery__page-dots">
</ol>
<div class="gallery__nav">
<a href="#" class="prev">Previous</a>
<a href="#" class="next">Next</a>
</div>
</div>
<div class="gallery-container">
<div class="gallery__slides">
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 1 ">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 2 ">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 3">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 4">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 5">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 6">
</div>
<div class="gallery__slide">
<img class="img-full" src="http://via.placeholder.com/1200x700" alt="test 7">
</div>
</div>
<div class="gallery__progress">
<div class="progress"></div>
</div>
<div class="gallery__caption">
<p class="image-caption"></p>
</div>
<ol class="gallery__page-dots">
</ol>
<div class="gallery__nav">
<a href="#" class="prev">Previous</a>
<a href="#" class="next">Next</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
解决方案
each()
对于每个匹配的元素,只会执行方法内的函数。
您需要在方法flickity()
内部调用插件each()
才能初始化两个滑块。
这是工作演示
您所要做的就是将您$('.gallery__slides').flickity(options);
的所有变量都移动到each()
方法中,两个滑块都可以工作:
$(document).ready(function(){
$('.gallery-container').each(function(i, container) {
var options = {
cellSelector: '.gallery__slide',
cellAlign : 'center',
pageDots : false,
prevNextButtons : false,
accessibility : false,
wrapAround : true,
imagesLoaded : true,
pauseAutoPlayOnHover: true,
fullscreen: true,
lazyLoad: 1
};
var time = 2;
var $bar,
$slider,
isPause,
tick,
percentTime;
$('.gallery__slides').flickity(options);
var $container = $(container);
var $slider = $container.find('.gallery__slides');
var flkty = $slider.data('flickity');
var selectedIndex = flkty.selectedIndex;
var slideCount = flkty.slides.length;
var $pagers = $container.find('.gallery__page-dots');
for (i = 0; i < slideCount; i++) {
$pagers.append('<li class="gallery__page-dot-item"></li>');
}
var $pager = $pagers.find('li');
var $caption = $container.find('.gallery__caption .image-caption');
$slider.on( 'select.flickity', function() {
// set image caption using img's alt
$caption.text( flkty.selectedElement.children[0].alt );
$pager.filter('.is-selected').removeClass('is-selected');
$pager.eq(flkty.selectedIndex).addClass('is-selected');
});
$pagers.on( 'click', 'li', function() {
var index = $(this).index();
resetProgressbar();
$slider.flickity( 'select', index );
startProgressbar();
});
// previous
var $prev = $container.find('.prev');
$prev.on( 'click', function() {
resetProgressbar();
$slider.flickity('previous');
startProgressbar();
});
// next
var $next = $container.find('.next');
$next.on( 'click', function() {
resetProgressbar();
$slider.flickity('next');
startProgressbar();
});
$bar = $container.find('.gallery__progress .progress');
$slider.on({
mouseenter: function() {
isPause = true;
},
mouseleave: function() {
isPause = false;
}
})
function startProgressbar() {
resetProgressbar();
percentTime = 0;
isPause = false;
tick = setInterval(interval, 12);
}
function interval() {
if(isPause === false) {
percentTime += 1 / (time+0.1);
$bar.css({
width: percentTime+"%"
});
if(percentTime >= 100)
{
$slider.flickity('next', true);
startProgressbar();
}
}
}
function resetProgressbar() {
$bar.css({
width: 0+'%'
});
clearTimeout(tick);
}
startProgressbar();
});
});
推荐阅读
- identityserver4 - 如何向 microsoft-identity-web 提供 login_hint
- c# - Unity LookAt 函数破坏了游戏对象
- node.js - EADDRINUSE,地址已在我尝试的每个端口(Express Node.js)上使用,也是在从 BIOS 完全重新安装后
- python - 在矩形顶部使用颤动的箭头中的不同 alpha
- c++ - 为什么“==”在这里不可接受?
- javascript - jquery如何添加css样式,然后在同一个函数中删除它
- python-3.x - 在 Pandas 中解析多级标头
- tensorflow - 如何使用标签也是图像的图像数据集进行训练?
- python - 为具有不同数据范围的图创建单个颜色条
- java - 在Java中将数组的元素组合成对