I created a slider using SCSS, JavaScript, and HTML. You can view the demo at this link: https://jsfiddle.net/rr7g6a1b/
let mySlider = {
initializeSlider: function (options) {
let slider = options.container;
let slides = slider.querySelectorAll('.slide');
let initialSlide = slider.querySelector('.slide[data-index="0"]');
let initialButton = slider.querySelector('.pagination-button[data-index="0"]');
initialSlide.classList.add('active');
initialButton.classList.add('active');
let sliderControlButton = slider.querySelector('.control-slider-button');
if (options.autoplay === true) {
sliderControlButton.classList.add('stop');
} else {
sliderControlButton.classList.add('play');
}
sliderControlButton.addEventListener('click', function () {
mySlider.switchAutoplay(options);
});
for (let i = 0; i < slides.length; i++) {
let button = slider.querySelector('.pagination-button[data-index="' + i + '"]');
button.addEventListener('click', function () {
mySlider.goToSlide(options, i);
mySlider.stopAutoplay(options);
});
}
if (options.autoplay === true) {
options.autoplayer = window.setTimeout(function () {
mySlider.goToNext(options);
}, options.duration);
}
},
switchAutoplay: function (options) {
let sliderControlButton = options.container.querySelector('.control-slider-button');
if (options.autoplay === true) {
mySlider.stopAutoplay(options);
sliderControlButton.classList.add('play');
sliderControlButton.classList.remove('stop');
} else {
mySlider.startAutoplay(options);
sliderControlButton.classList.remove('play');
sliderControlButton.classList.add('stop');
}
},
goToSlide: function (options, target) {
let slider = options.container;
let targetSlide = slider.querySelector('.slide[data-index="' + target + '"]');
if (!targetSlide.classList.contains('active')) {
let activeSlide = slider.querySelector('.slide.active');
let activeButton = slider.querySelector('.pagination-button.active');
let activeNum = activeSlide.dataset.index;
let targetNum = parseInt(target);
let go = false;
let direction = 'left';
if (targetNum < activeNum) {
direction = 'right';
}
let targetButton = slider.querySelector('.pagination-button[data-index="' + target + '"]');
activeButton.classList.remove('active');
targetButton.classList.add('active');
let moveTarget = function (direction) {
let correct = direction;
let opposite = (direction === 'left') ? 'right' : 'left';
correct = 'hide-' + direction;
opposite = 'hide-' + opposite;
targetSlide.classList.add('transitioning');
window.setTimeout(function () {
targetSlide.classList.remove(correct);
targetSlide.classList.add(opposite);
}, 100);
window.setTimeout(function () {
targetSlide.classList.remove('transitioning');
}, 150);
};
let moveActive = function (direction) {
activeSlide.classList.remove('active');
direction = 'hide-' + direction;
activeSlide.classList.add(direction);
};
moveTarget(direction);
window.setTimeout(function () {
moveActive(direction);
targetSlide.classList.remove('hide-left');
targetSlide.classList.remove('hide-right');
targetSlide.classList.add('active');
}, 200);
}
},
goToNext: function (options) {
if (options.autoplay === true) {
let slider = options.container;
let currentSlide = slider.querySelector('.slide.active');
let currentSlideIndex = currentSlide.dataset.index;
let lastSlide = slider.querySelectorAll('.slide').length - 1;
let nextSlide = 0;
if (currentSlideIndex != lastSlide) {
nextSlide = parseInt(currentSlideIndex) + 1;
}
mySlider.goToSlide(options, nextSlide);
options.autoplayer = window.setTimeout(function () {
mySlider.goToNext(options);
}, options.duration);
}
},
stopAutoplay: function (options) {
options.autoplay = false;
window.clearTimeout(options.autoplayer);
},
startAutoplay: function (options) {
options.autoplay = true;
options.autoplayer = window.setTimeout(function () {
mySlider.goToNext(options);
}, options.duration);
}
};
let mainSlider = document.getElementById('main-slider');
let mainSliderOptions = {
container: mainSlider,
autoplay: false,
duration: 6000
}
mySlider.initializeSlider(mainSliderOptions);
The pagination buttons are functioning well in Chrome, although in Safari, they sometimes flicker or get clipped after you click on them. Is there a solution or workaround to resolve this flickering issue? I'm unsure of what might be causing it.