[英]Slider- Previous button hides first slide instead of previous slide
I created some CSS and JavaScript that turns WordPress's native gallery into a slideshow. 我创建了一些CSS和JavaScript,将WordPress的本机库变成了幻灯片。 For each gallery, I have next and previous buttons that show each slide when clicked. 对于每个画廊,我都有下一个和上一个按钮,这些按钮在单击时显示每个幻灯片。
The problem is that when clicking to show a previous slide, it only shows the first slide. 问题是单击以显示上一张幻灯片时,它仅显示第一张幻灯片。 I think this is because the initial counter that lies outside of the click functions is set to 0. Is there any way to keep track of which slide the counter is on between each function, or to adjust the functions themselves? 我认为这是因为位于click函数之外的初始计数器被设置为0。是否有任何方法可以跟踪每个函数之间计数器在哪个幻灯片上滑动,或者可以自行调整函数?
Here is the JavaScript: 这是JavaScript:
function() {
...
var gallery = document.querySelectorAll('.single.slider .gallery');
var galleries = [ document.querySelector('.single.slider #gallery-1'),
document.querySelector('.single.slider #gallery-2') ];
var slides = [ document.querySelectorAll('.single.slider #gallery-1 .gallery-item'),
document.querySelectorAll('.single.slider #gallery-2 .gallery-item') ];
var slides1Count = 0;
var slides2Count = 0;
function hideFirstSlide() {
// slides[0] = first location of the array in the slides variable, slides[1] = second, etc.
// slides[0][0] = first slide inside of the first array
for (var iGal = 0, len = galleries.length; iGal < len; iGal++) {
//console.log('number of galleries: ' + iGal);
for (var jSlide = 0, len = slides.length; jSlide < len; jSlide++) {
//console.log('number of slides within gallery: ' + slides[jSlide].length); // for debugging
//console.log(slides[0][0]); // for debugging
// We must loop over each slide when using querySelectorAll
for (var kEachSlide = 0; kEachSlide < slides[jSlide].length; kEachSlide++) {
//console.log(slides[jSlide].length); // Number of slides within current selected query
// Hide all slides within each slides array;
if (slides[0][kEachSlide]) {
slides[0][kEachSlide].classList.add('hide');
}
if (slides[1][kEachSlide]) {
slides[1][kEachSlide].classList.add('hide');
}
// Show first slide within each slides array
if (slides[0][0]) {
slides[0][0].classList.remove('hide');
}
if (slides[1][0]) {
slides[1][0].classList.remove('hide');
}
}
}
}
}
window.onload = hideFirstSlide();
for (var i = 0, len = gallery.length; i < len; i++) {
// Add slider controls to each gallery
gallery[i].insertAdjacentHTML('afterend', '<div class="slider-button-panel"><button class="slider-previous"></button><button class="slider-startshow">Start Slideshow</button><button class="slider-next"></button></div>');
//console.log(gallery.length);
}
var sliderButtonPrevious = document.querySelectorAll('.single.slider .slider-previous');
var sliderButtonNext = document.querySelectorAll('.single.slider .slider-next');
var sliderNext = [ document.querySelector('.single.slider #gallery-1 + .slider-button-panel .slider-next'),
document.querySelector('.single.slider #gallery-2 + .slider-button-panel .slider-next') ];
var sliderPrevious = [ document.querySelector('.single.slider #gallery-1 + .slider-button-panel .slider-previous'),
document.querySelector('.single.slider #gallery-2 + .slider-button-panel .slider-previous') ];
// Show each subsequent slide one at a time by clicking the next and previous buttons
// checking if each button exists on the page first
if (sliderNext[0]) {
sliderNext[0].addEventListener('click', showNext(slides[0], slides1Count));
}
if (sliderNext[1]) {
sliderNext[1].addEventListener('click', showNext(slides[1], slides2Count));
}
if (sliderPrevious[0]) {
sliderPrevious[0].addEventListener('click', showPrevious(slides[0], slides1Count));
}
if (sliderPrevious[1]) {
sliderPrevious[1].addEventListener('click', showPrevious(slides[1], slides2Count));
}
// Next slide function
function showNext(obj, counter) {
return function() {
obj[counter].classList.add('hide');
counter++;
if (counter === obj.length) {
counter = obj.length - 1;
}
obj[counter].classList.remove('hide');
//console.log(counter);
}
}
// Previous slide function
function showPrevious(obj, counter) {
return function() {
obj[counter].classList.add('hide');
counter--;
if (counter === -1) {
counter = 0;
}
obj[counter].classList.remove('hide');
console.log(counter);
}
}
)();
Here is the relevant HTML and CSS: 以下是相关的HTML和CSS:
<div id="gallery-1" class="gallery galleryid-555 gallery-columns-3 gallery-size-large">
<figure class="gallery-item">
<div class="gallery-icon landscape">
<a href="#"><img src= ... /></a>
</div>
<figcaption class="wp-caption-text gallery-caption" ...>A Caption</figcaption>
</figure>
<figure class="gallery-item hide">
<div class="gallery-icon landscape">
<a href="#"><img src= ... /></a>
</div>
</figure>
...
each slide thereafter has .hide class attached
</div>
<div id="gallery-2" class="gallery galleryid-555 gallery-columns-3 gallery-size-large">
<figure class="gallery-item">
<div class="gallery-icon landscape">
<a href="#"><img src= ... /></a>
</div>
</figure>
<figure class="gallery-item hide">
<div class="gallery-icon landscape">
<a href="#"><img src= ... /></a>
</div>
</figure>
...
</div>
...
.gallery-item {
margin: 0 auto;
}
.single.slider .gallery {
position: relative;
min-width: 100%;
}
.single.slider .gallery-item {
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
.hide {
display: none;
}
I am including a stripped down version in the JSFiddle here as well: https://jsfiddle.net/jgpws/fkbrbkLa/ . 我也在这里的JSFiddle中包括一个精简版: https ://jsfiddle.net/jgpws/fkbrbkLa/。
Thanks. 谢谢。
Okay, so after months of fiddling around with this and reading several tutorials and other SO posts, I finally found what appears to be a solution. 好的,经过几个月的研究并阅读了一些教程和其他SO帖子之后,我终于找到了解决方案。
I changed each separate function that increases or decreases the slides (hiding and showing) to one function that handles only counting up and down. 我将增加或减少幻灯片(隐藏和显示)的每个单独功能更改为只处理向上和向下计数的功能。 This function returns two objects that count up or down. 此函数返回向上或向下计数的两个对象。 Then, the click handlers were modified to add and remove the hide class. 然后,修改了单击处理程序以添加和删除hide类。 Then, in the click handler, the count function needed to be called again. 然后,在点击处理程序中,需要再次调用count函数。 That part only worked through trial and error. 该部分只能通过反复试验才能起作用。 Thus, I only know that it worked, but not why. 因此,我只知道它有效,但不知道为什么。 Maybe it resets the nodelist location after hiding/showing? 也许它在隐藏/显示后重置了节点列表的位置?
Also, for instance, when I click to go forward then immediately click to go back, I have to click twice. 另外,例如,当我单击前进然后立即单击后退时,我必须单击两次。 On the second click, the slide goes back. 第二次单击,幻灯片将返回。
Since this solution was close enough to what I was looking for, I'm okay with it. 由于此解决方案已经足够接近我所寻找的内容,因此我可以接受。 Here is the updated code: 这是更新的代码:
function() {
...
var slides = [ document.querySelectorAll('.single.slider #gallery-1 .gallery-item'),
document.querySelectorAll('.single.slider #gallery-2 .gallery-item') ];
//var slides1Count = 0;
//var slides2Count = 0;
...
// Next slide function
function showSlide(obj) {
var counter = 0;
return {
showNext: function() {
counter++;
if (counter === obj.length) {
counter = obj.length - 1;
}
console.log('Next slide: ' + counter);
return counter;
},
showPrevious: function() {
counter--;
if (counter < 0) {
counter = 0;
}
console.log('Previous slide: ' + counter);
return counter;
}
}
}
// Show each subsequent slide one at a time by clicking the next and previous buttons
// checking if each button exists on the page first
function addClickEvents() {
var currentSlide1 = showSlide(slides[0]);
var currentSlide2 = showSlide(slides[1]);
if (sliderNext[0]) {
sliderNext[0].addEventListener('click', function() {
slides[0][currentSlide1.showPrevious()].classList.add('hide');
slides[0][currentSlide1.showNext()].classList.remove('hide');
slides[0][currentSlide1.showNext()];
});
}
if (sliderNext[1]) {
sliderNext[1].addEventListener('click', function () {
slides[1][currentSlide2.showPrevious()].classList.add('hide');
slides[1][currentSlide2.showNext()].classList.remove('hide');
slides[1][currentSlide2.showNext()];
});
}
if (sliderPrevious[0]) {
sliderPrevious[0].addEventListener('click', function() {
slides[0][currentSlide1.showPrevious()].classList.remove('hide');
slides[0][currentSlide1.showNext()].classList.add('hide');
slides[0][currentSlide1.showPrevious()];
});
}
if (sliderPrevious[1]) {
sliderPrevious[1].addEventListener('click', function () {
slides[1][currentSlide2.showPrevious()].classList.remove('hide');
slides[1][currentSlide2.showNext()].classList.add('hide');
slides[1][currentSlide2.showPrevious()];
});
}
}
window.onload = addClickEvents();
)();
Some of the function names can be changed to better describe what they do, but this worked for me. 可以更改某些函数名称以更好地描述它们的功能,但这对我有用。
The code examples found in the article Understand JavaScript Closures With Ease helped me a lot, as it was the adapting of some of the article's code that helped me figure out a counter that can be shared between each button's click event. 文章《 轻松理解JavaScript闭包 》中的代码示例对我有很大帮助,因为对文章中某些代码的改编帮助我弄清楚了可以在每个按钮的click事件之间共享的计数器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.