yalvace daha önce kullanmıştım.. test edebilirsin..












1 / 4


Caption Text




2 / 4


Caption Two




3 / 4


Caption Three




4 / 4


Caption Four

























1 / 3


Caption Text




2 / 3


Caption Two




3 / 3


Caption Three













<script>
(function() {

init(); //on page load - show first slide, hidethe rest

function init() {

parents = document.getElementsByClassName('slideshow-container');

for (j = 0; j < parents.length; j++) {
var slides = parents[j].getElementsByClassName("mySlides");
var dots = parents[j].getElementsByClassName("dot");
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}

dots = document.getElementsByClassName('dot'); //dots functionality

for (i = 0; i < dots.length; i++) {

dots[i].onclick = function() {

slides = this.parentNode.parentNode.getElementsByClassName("mySlides");

for (j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].classList.remove('active');
slides[j].classList.remove('active-slide');
if (this.parentNode.children[j] == this) {
index = j;
}
}
this.classList.add('active');
slides[index].classList.add('active-slide');

}
}
//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');

for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
current = this.parentNode;

var slides = current.getElementsByClassName("mySlides");
var dots = current.getElementsByClassName("dot");
curr_slide = current.getElementsByClassName('active-slide')[0];
curr_dot = current.getElementsByClassName('active')[0];
curr_slide.classList.remove('active-slide');
curr_dot.classList.remove('active');
if (this.className == 'next') {

if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
curr_slide.nextElementSibling.classList.add('active-slide');
curr_dot.nextElementSibling.classList.add('active');
} else {
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}

}

if (this.className == 'prev') {

if (curr_slide.previousElementSibling) {
curr_slide.previousElementSibling.classList.add('active-slide');
curr_dot.previousElementSibling.classList.add('active');
} else {
slides[slides.length - 1].classList.add('active-slide');
dots[slides.length - 1].classList.add('active');
}

}

}

}
})();
</script>