diff --git a/arx_slider.js b/arx_slider.js index 005b023..e1d3d51 100644 --- a/arx_slider.js +++ b/arx_slider.js @@ -1,77 +1,100 @@ -const timerlength = 7000 // Change it if you want to change the autoslide speed (in miliseconds, 10000 means 10 seconds) -const slider = document.querySelector(".slider"); -const sliderImg = slider.querySelectorAll("img"); -const sliderPreviusButton = slider.querySelector(".left") -const sliderNextButton = slider.querySelector(".right") -const slider_dots_holder = slider.querySelector(".slider_dots_holder") -const sliderCount = slider.querySelectorAll("img").length - 1 -const imgHolder = slider.querySelector(".imgholder") +if(document.querySelectorAll(".slider").length == 1) { -let currentSlider = 0; -let dotsnum = sliderCount + 1; -// CreateDots function creates clickable dots & caption based on the number of images and alt texts -for ( ;dotsnum != 0;dotsnum--) { - const realId = sliderCount-(dotsnum-1) - const newDot = document.createElement("div"); - const newCaption = document.createElement("div"); - newDot.classList.add("slider_dots"); - newDot.setAttribute("id", realId); - newDot.setAttribute("onclick", ("sliderJump" + "(" + realId + ")") ) - newCaption.classList.add("slider_alts"); - newCaption.innerHTML = sliderImg[realId].alt; - slider_dots_holder.appendChild(newDot); - imgHolder.appendChild(newCaption); -} -// Below codes are for Next and previous butttons -const sliderdots = slider.querySelectorAll(".slider_dots") -const slideralts = slider.querySelectorAll(".slider_alts") + const timerlength = 7000 // Change it if you want to change the autoslide speed (in miliseconds, 10000 means 10 seconds) + const slider = document.querySelector(".slider"); + const sliderImg = slider.querySelectorAll("img"); + const sliderPreviusButton = slider.querySelector(".left") + const sliderNextButton = slider.querySelector(".right") + const slider_dots_holder = slider.querySelector(".slider_dots_holder") + const sliderCount = slider.querySelectorAll("img").length - 1 + const imgHolder = slider.querySelector(".imgholder") -function sliderShow () { - sliderImg[currentSlider].style.opacity = "1"; - sliderdots[currentSlider].style.opacity = "1"; - slideralts[currentSlider].style.opacity = "0.8"; + let currentSlider = 0; + let dotsnum = sliderCount + 1; + // CreateDots function creates clickable dots & caption based on the number of images and alt texts + for ( ;dotsnum != 0;dotsnum--) { + const realId = sliderCount-(dotsnum-1) + const newDot = document.createElement("div"); + const newCaption = document.createElement("div"); + newDot.classList.add("slider_dots"); + newDot.setAttribute("id", realId); + newDot.setAttribute("onclick", ("sliderJump" + "(" + realId + ")") ) + newCaption.classList.add("slider_alts"); + newCaption.innerHTML = sliderImg[realId].alt; + slider_dots_holder.appendChild(newDot); + imgHolder.appendChild(newCaption); + } -} -function sliderHide () { - sliderImg[currentSlider].style.opacity = "0"; - sliderdots[currentSlider].style.opacity = "0.5"; - slideralts[currentSlider].style.opacity = "0"; -} -function slidNext () { - if (currentSlider < sliderCount) { - sliderHide(); - currentSlider ++; - sliderShow(); + // Below codes are for Next and previous butttons + const sliderdots = slider.querySelectorAll(".slider_dots") + const slideralts = slider.querySelectorAll(".slider_alts") + + // Functions + // Auto Play Codes (autoplay is Optional. you can remove the below code if you do not want Autoplay) + function slideTimer() { + if (currentSlider < sliderCount) { + slidNext () + window.setTimeout (slideTimer, timerlength) + } else { + sliderJump(0) + window.setTimeout (slideTimer, timerlength) + } } -} -function slidePrevius () { - if (currentSlider > 0) { + + function sliderShow() { + sliderImg[currentSlider].style.opacity = "1"; + sliderdots[currentSlider].style.opacity = "1"; + slideralts[currentSlider].style.opacity = "0.8"; + + } + + function sliderHide() { + sliderImg[currentSlider].style.opacity = "0"; + sliderdots[currentSlider].style.opacity = "0.5"; + slideralts[currentSlider].style.opacity = "0"; + } + + function slidNext() { + if (currentSlider < sliderCount) { + sliderHide(); + currentSlider++; + sliderShow(); + } else { + sliderHide(); + currentSlider = 0; + sliderShow(); + } + } + + function slidePrevius() { + if (currentSlider > 0) { + sliderHide(); + currentSlider --; + sliderShow(); + } else { + sliderHide(); + currentSlider = sliderCount; + sliderShow(); + } + } + + function sliderJump(number) { sliderHide(); - currentSlider --; + currentSlider = number; sliderShow(); + resetTimer(); } -} -function sliderJump(number) { - sliderHide(); - currentSlider = number; - sliderShow(); - resetTimer() -} -sliderPreviusButton.addEventListener("click", slidePrevius); -sliderNextButton.addEventListener("click", slidNext); -sliderShow() + function resetTimer() { + } -// Auto Play Codes (autoplay is Optional. you can remove the below code if you do not want Autoplay) -function slideTimer () { - if (currentSlider < sliderCount) { - slidNext () - window.setTimeout (slideTimer, timerlength) - } else { - sliderJump(0) - window.setTimeout (slideTimer, timerlength) + // Init + if(sliderCount !== -1) { + sliderPreviusButton.addEventListener("click", slidePrevius); + sliderNextButton.addEventListener("click", slidNext); + sliderShow() + + // Events + window.setTimeout(slideTimer, timerlength); } } -window.setTimeout (slideTimer, timerlength); -function resetTimer () { -} diff --git a/arx_slider[withoutCaption].js b/arx_slider[withoutCaption].js index ec962fa..14d74de 100644 --- a/arx_slider[withoutCaption].js +++ b/arx_slider[withoutCaption].js @@ -1,70 +1,90 @@ -const timerlength = 7000 // Change it if you want to change the autoslide speed (in miliseconds, 10000 means 10 seconds) -const slider = document.querySelector(".slider"); -const sliderImg = slider.querySelectorAll("img"); -const sliderPreviusButton = slider.querySelector(".left") -const sliderNextButton = slider.querySelector(".right") -const slider_dots_holder = slider.querySelector(".slider_dots_holder") -const sliderCount = slider.querySelectorAll("img").length - 1 -const imgHolder = slider.querySelector(".imgholder") +if(document.querySelectorAll(".slider").length == 1) { -let currentSlider = 0; -let dotsnum = sliderCount + 1; -// CreateDots function creates clickable dots based on the number of images -for ( ;dotsnum != 0;dotsnum--) { - const realId = sliderCount-(dotsnum-1) - const newDot = document.createElement("div"); - newDot.classList.add("slider_dots"); - newDot.setAttribute("id", realId); - newDot.setAttribute("onclick", ("sliderJump" + "(" + realId + ")") ) - slider_dots_holder.appendChild(newDot); -} -// Below codes are for Next and previous butttons -const sliderdots = slider.querySelectorAll(".slider_dots") + const timerlength = 7000 // Change it if you want to change the autoslide speed (in miliseconds, 10000 means 10 seconds) -function sliderShow () { - sliderImg[currentSlider].style.opacity = "1"; - sliderdots[currentSlider].style.opacity = "1"; + // Elements + const slider = document.querySelector(".slider"); + const sliderImg = slider.querySelectorAll("img"); + const sliderPreviusButton = slider.querySelector(".left") + const sliderNextButton = slider.querySelector(".right") + const slider_dots_holder = slider.querySelector(".slider_dots_holder") + const sliderCount = slider.querySelectorAll("img").length - 1 + const imgHolder = slider.querySelector(".imgholder") -} -function sliderHide () { - sliderImg[currentSlider].style.opacity = "0"; - sliderdots[currentSlider].style.opacity = "0.5"; -} -function slidNext () { - if (currentSlider < sliderCount) { - sliderHide(); - currentSlider ++; - sliderShow(); + let currentSlider = 0; + let dotsnum = sliderCount + 1; + // CreateDots function creates clickable dots based on the number of images + for ( ;dotsnum != 0;dotsnum--) { + const realId = sliderCount-(dotsnum-1) + const newDot = document.createElement("div"); + newDot.classList.add("slider_dots"); + newDot.setAttribute("id", realId); + newDot.setAttribute("onclick", ("sliderJump" + "(" + realId + ")") ) + slider_dots_holder.appendChild(newDot); } -} -function slidePrevius () { - if (currentSlider > 0) { + // Below codes are for Next and previous butttons + const sliderdots = slider.querySelectorAll(".slider_dots") + + // Functions + function sliderShow() { + sliderImg[currentSlider].style.opacity = "1"; + sliderdots[currentSlider].style.opacity = "1"; + + } + + function sliderHide() { + sliderImg[currentSlider].style.opacity = "0"; + sliderdots[currentSlider].style.opacity = "0.5"; + } + + function slidNext() { + if (currentSlider < sliderCount) { + sliderHide(); + currentSlider++; + sliderShow(); + } else { + sliderHide(); + currentSlider = 0; + sliderShow(); + } + } + + function slidePrevius() { + if (currentSlider > 0) { + sliderHide(); + currentSlider --; + sliderShow(); + } else { + sliderHide(); + currentSlider = sliderCount; + sliderShow(); + } + } + + function sliderJump(number) { sliderHide(); - currentSlider --; + currentSlider = number; sliderShow(); } -} -function sliderJump(number) { - sliderHide(); - currentSlider = number; - sliderShow(); - resetTimer() -} -sliderPreviusButton.addEventListener("click", slidePrevius); -sliderNextButton.addEventListener("click", slidNext); -sliderShow() + function resize_timer() { + slider.style.height = document.querySelector(".slider img").offsetHeight + "px"; + } -// Auto Play Codes (autoplay is Optional. you can remove the below code if you do not want Autoplay) -function slideTimer () { - if (currentSlider < sliderCount) { - slidNext () - window.setTimeout (slideTimer, timerlength) - } else { - sliderJump(0) - window.setTimeout (slideTimer, timerlength) + function resize() { + if(slider) { + window.setTimeout(resize_timer,300)} + } + + // Init + if(sliderCount !== -1) { + sliderPreviusButton.addEventListener("click", slidePrevius); + sliderNextButton.addEventListener("click", slidNext); + + sliderShow() + resize() + + // Events + window.addEventListener("resize" , resize) } -} -window.setTimeout (slideTimer, timerlength); -function resetTimer () { }