Commit fd180193 authored by Michael Iseard's avatar Michael Iseard
Browse files

update slider to 1.0.2

parent 72d5d159
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 300 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M34.697,75.628c-2.856,-6.607 -0.616,-14.312 5.338,-18.357c5.955,-4.045 13.943,-3.289 19.033,1.801c73.606,73.602 194.123,194.119 230.325,230.321c5.858,5.858 5.858,15.356 0,21.214c-36.202,36.202 -156.719,156.719 -230.323,230.323c-5.091,5.09 -13.08,5.845 -19.035,1.799c-5.954,-4.045 -8.195,-11.75 -5.339,-18.358c28.883,-67.251 65.304,-164.021 65.304,-224.371c0,-60.35 -36.421,-157.12 -65.303,-224.372Z" style="fill:#fff;"/></svg>
\ No newline at end of file
<svg viewBox="0 0 300 600" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M34.697 75.628a14.998 14.998 0 0 1 24.371-16.556c73.606 73.602 194.123 194.119 230.325 230.321 5.858 5.858 5.858 15.356 0 21.214L59.07 540.93a15 15 0 0 1-24.374-16.559C63.579 457.12 100 360.35 100 300c0-60.35-36.421-157.12-65.303-224.372z" fill="#fff"/></svg>
\ No newline at end of file
......@@ -11,7 +11,7 @@
crossorigin="anonymous">
<!-- Skroll-Slider CSS -->
<link rel="stylesheet" type="text/css" href="css/skroll-slider.min.css?v=1.0.1">
<link rel="stylesheet" type="text/css" href="css/skroll-slider.min.css?v=1.0.2">
<!-- highlightjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
......@@ -65,16 +65,16 @@
<p class="lead">A modern JavaScript carousel with no third party requirements.</p>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary btn-lg" href="https://gitea.iseardmedia.com/michael/Skroll-Slider/archive/1.0.1.zip" role="button">Download</a>
<a class="btn btn-primary btn-lg" href="https://gitea.iseardmedia.com/michael/Skroll-Slider/archive/1.0.2.zip" role="button">Download</a>
<a class="btn btn-primary btn-lg" href="https://gitea.iseardmedia.com/michael/Skroll-Slider" role="button">Source</a>
</p>
<p>v1.0.1</p>
<p>v1.0.2</p>
</div>
</div>
<div class="container">
<section>
<h2 class="display-4">Demo</h2>
<div id="slider-demo-1" class="skroll-slider" data-skroll='{"duration" : 5000, "transition" : "zoom-fade"}' style="width:100%; height: 400px;">
<div id="slider-demo-1" class="skroll-slider" style="width:100%; height: 400px;">
<div>
<img src="img/1.jpg">
<h2>Light, fast and free</h2>
......@@ -140,7 +140,7 @@
crossorigin="anonymous"></script>
<!-- Skroll-Slider JS -->
<script src="js/skroll-slider.min.js?v=1.0.1"></script>
<script src="js/skroll-slider.min.js?v=1.0.2"></script>
<!-- highlight.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
......
let sliders=document.getElementsByClassName("skroll-slider");for(var sliderObjects=[],i=0;i<sliders.length;i++){var el=sliders[i],num=el.children.length,imgElements=el.querySelectorAll("img"),slides=el.children,imgUrls=Array.from(el.querySelectorAll("img")).map(function(e,s){return e.src}),slideText={};for(let e=0;e<slides.length;e++)slideText[e]=slides[e].querySelectorAll("*:not(img)");for(;el.firstChild;)el.removeChild(el.firstChild);if(sliderObjects[i]={slider:el,img:imgElements,slideText:slideText,imgUrls:imgUrls,settings:{num:num,effect:"zoom",animateText:!0,paused:!1,slideIndex:0,duration:5e3,transition:"pan"}},el.hasAttribute("data-skroll")){var settings=JSON.parse(el.dataset.skroll);for(const e of Object.keys(settings))sliderObjects[i].settings[e]=settings[e]}sliderConstruct(sliderObjects[i])}function sliderConstruct(e){e.slider.classList.add(e.settings.effect+"-effect",e.settings.animateText?"animate-text":null,e.settings.transition);var s=document.createDocumentFragment(),t=document.createElement("DIV");t.setAttribute("class","arrows");var n=document.createElement("DIV");n.setAttribute("class","slide-arrow left-arrow");var d=document.createElement("DIV");d.setAttribute("class","slide-arrow right-arrow"),t.appendChild(n),t.appendChild(d),s.prepend(t),e.arrows=[n,d];var l=document.createElement("DIV");e.slides=l,l.classList.add("slides"),"pan"===e.settings.transition&&(l.style.width=e.settings.num+"00%"),"pan"===e.settings.transition&&(l.style.width=e.settings.num+"00%");var r={slide:null,slideWrap:null};for(let s=0;s<e.settings.num;s++){r.slideWrap=document.createElement("DIV"),0===s?r.slideWrap.classList.add("slide-wrap","current-slide"):r.slideWrap.classList.add("slide-wrap"),r.slide=document.createElement("DIV"),r.slide.classList.add("slide"),r.slideText=document.createElement("DIV"),r.slideText.classList.add("slide-text"),r.slide.style.backgroundImage="url("+e.imgUrls[s]+")";for(let t=0;t<Object.keys(e.slideText[s]).length;t++)r.slideText.appendChild(e.slideText[s][t]);r.slideWrap.appendChild(r.slide),r.slideWrap.appendChild(r.slideText),l.appendChild(r.slideWrap)}s.appendChild(l),e.indicators={};var a=document.createElement("DIV");a.setAttribute("class","indicators");for(let t=0;t<e.settings.num;t++){var c=document.createElement("SPAN");0===t?c.setAttribute("class","slide-indicator current-indicator"):c.setAttribute("class","slide-indicator"),c.setAttribute("data-slide",t),a.appendChild(c),s.appendChild(a),e.indicators[t]=c}e.slider.appendChild(s),setBindings(e),autoSlide(sliderObjects[i])}function setBindings(e){for(var s=0;s<e.arrows.length;s++)e.arrows[s].addEventListener("click",function(s){if(!e.slider.classList.contains("animating")){if(e.prevSlideIndex=e.settings.slideIndex,s.target.classList.contains("left-arrow"))var t=e.settings.slideIndex-1;else if(s.target.classList.contains("right-arrow"))t=e.settings.slideIndex+1;e.settings.paused=!0,updateIndex(e,t),clearTimeouts(e),sliderChange(e)}});for(s=0;s<e.settings.num;s++)e.indicators[s].addEventListener("click",function(s){e.slider.classList.contains("animating")||!1===s.target.classList.contains("current-indicator")&&(clearTimeouts(e),updateIndex(e,Number(s.target.dataset.slide)),e.settings.paused=!0,sliderChange(e))})}function sliderChange(e){if(e.prev=e.slider.getElementsByClassName("current-slide")[0],e.settings.slideIndex<0?(e.settings.slideIndex=e.settings.num-1,e.settings.num&&e.indicators[0].parentElement.classList.add("transition-last"),setTimeout(function(){e.settings.num&&e.indicators[0].parentElement.classList.remove("transition-last")},1e3)):e.settings.slideIndex>e.settings.num-1&&(e.settings.slideIndex=0,e.settings.num&&e.indicators[0].parentElement.classList.add("transition-first"),setTimeout(function(){e.settings.num&&e.indicators[0].parentElement.classList.remove("transition-first")},1e3)),e.settings.num>1){e.slider.classList.remove("forwards","backwards");for(var s=0;s<e.settings.num;s++)e.slides.children[s].classList.remove("current-slide","prev-slide","next-slide"),e.settings.num&&e.indicators[s].classList.remove("current-indicator");e.prevSlideIndex<e.settings.slideIndex?e.slider.classList.add("forwards"):e.slider.classList.add("backwards"),e.slider.classList.add("animating"),e.prev.classList.add("prev-slide"),e.settings.slideIndex===e.settings.num-1?e.slides.children[0].classList.add("next-slide"):e.slides.children[e.settings.slideIndex+1]&&e.slides.children[e.settings.slideIndex+1].classList.add("next-slide"),e.slides.children[e.settings.slideIndex].classList.add("current-slide"),e.settings.num&&e.indicators[e.settings.slideIndex].classList.add("current-indicator"),"pan"===e.settings.transition&&(e.slider.children[1].style.transform="translateX(-"+e.settings.slideIndex/e.settings.num*100+"00%)"),e.intervalPrevAnim=setTimeout(function(){e.slider.classList.remove("animating")},1e3),!1===e.settings.paused&&autoSlide(e)}}function updateIndex(e,s){e.prevSlideIndex=e.settings.slideIndex,e.settings.slideIndex=s}function autoSlide(e){e.intervalSlideChange=setTimeout(function(){var s=e.settings.slideIndex+1;updateIndex(e,s),sliderChange(e)},e.settings.duration)}function clearTimeouts(e){clearTimeout(e.intervalSlideChange),clearTimeout(e.intervalPrevAnim);for(var s=0;s<e.settings.num;s++)e.slider.classList.remove("animating")}
\ No newline at end of file
let sliders=document.getElementsByClassName("skroll-slider");for(var sliderObjects=[],i=0;i<sliders.length;i++){var el=sliders[i],num=el.children.length,imgElements=el.querySelectorAll("img"),slides=el.children,imgUrls=Array.from(el.querySelectorAll("img")).map(function(e,s){return e.remove(),e.src}),slideText={};for(let e=0;e<slides.length;e++)slideText[e]=slides[e];if(sliderObjects[i]={slider:el,img:imgElements,slideText:slideText,imgUrls:imgUrls,num:num,settings:{effect:"zoom",animateText:!0,showIndicators:!0,showArrows:!0,paused:!1,autoPause:!0,slideIndex:0,duration:5e3,transition:"pan"}},el.hasAttribute("data-skroll")){var settings=JSON.parse(el.dataset.skroll);for(const e of Object.keys(settings))sliderObjects[i].settings[e]=settings[e]}sliderConstruct(sliderObjects[i])}function sliderConstruct(e){e.slider.classList.add(e.settings.effect+"-effect",e.settings.animateText?"animate-text":null,e.settings.transition);var s=document.createDocumentFragment(),t=document.createElement("DIV");0==e.settings.showArrows?t.setAttribute("class","arrows hidden"):t.setAttribute("class","arrows");var n=document.createElement("DIV");n.setAttribute("class","slide-arrow left-arrow");var d=document.createElement("DIV");d.setAttribute("class","slide-arrow right-arrow"),t.appendChild(n),t.appendChild(d),s.prepend(t),e.arrows=[n,d];var r=document.createElement("DIV");e.slides=r,r.classList.add("slides"),"pan"===e.settings.transition&&(r.style.width=e.num+"00%"),"pan"===e.settings.transition&&(r.style.width=e.num+"00%");var l={slide:null,slideWrap:null};for(let s=0;s<e.num;s++)l.slideWrap=document.createElement("DIV"),s===e.settings.slideIndex?l.slideWrap.setAttribute("class","slide-wrap current-slide"):l.slideWrap.setAttribute("class","slide-wrap"),l.slide=document.createElement("DIV"),l.slide.setAttribute("class","slide"),l.slideText=e.slideText[s],l.slideText.setAttribute("class","slide-text"),l.slide.style.backgroundImage="url("+e.imgUrls[s]+")",l.slideWrap.appendChild(l.slide),l.slideWrap.appendChild(l.slideText),r.appendChild(l.slideWrap);s.appendChild(r),e.indicators={};var a=document.createElement("DIV");0==e.settings.showIndicators?a.setAttribute("class","indicators hidden"):a.setAttribute("class","indicators");for(let t=0;t<e.num;t++){var c=document.createElement("SPAN");t===e.settings.slideIndex?c.setAttribute("class","slide-indicator current-indicator"):c.setAttribute("class","slide-indicator"),c.setAttribute("data-slide",t),a.appendChild(c),s.appendChild(a),e.indicators[t]=c}e.slider.appendChild(s),setBindings(e),autoSlide(sliderObjects[i])}function setBindings(e){for(var s=0;s<e.arrows.length;s++)e.arrows[s].addEventListener("click",function(s){if(!e.slider.classList.contains("animating")){if(e.prevSlideIndex=e.settings.slideIndex,s.target.classList.contains("left-arrow"))var t=e.settings.slideIndex-1;else if(s.target.classList.contains("right-arrow"))t=e.settings.slideIndex+1;updateIndex(e,t),clearTimeouts(e),sliderChange(e)}});for(s=0;s<e.num;s++)e.indicators[s].addEventListener("click",function(s){e.slider.classList.contains("animating")||!1===s.target.classList.contains("current-indicator")&&(clearTimeouts(e),updateIndex(e,Number(s.target.dataset.slide)),sliderChange(e))})}function sliderChange(e){if(e.prev=e.slider.getElementsByClassName("current-slide")[0],e.settings.slideIndex<0?(e.settings.slideIndex=e.num-1,e.num&&e.indicators[0].parentElement.classList.add("transition-last"),setTimeout(function(){e.num&&e.indicators[0].parentElement.classList.remove("transition-last")},1e3)):e.settings.slideIndex>e.num-1&&(e.settings.slideIndex=0,e.num&&e.indicators[0].parentElement.classList.add("transition-first"),setTimeout(function(){e.num&&e.indicators[0].parentElement.classList.remove("transition-first")},1e3)),e.num>1){e.slider.classList.remove("forwards","backwards");for(var s=0;s<e.num;s++)e.slides.children[s].classList.remove("current-slide","prev-slide","next-slide"),e.num&&e.indicators[s].classList.remove("current-indicator");e.prevSlideIndex<e.settings.slideIndex?e.slider.classList.add("forwards"):e.slider.classList.add("backwards"),e.slider.classList.add("animating"),e.prev.classList.add("prev-slide"),e.settings.slideIndex===e.num-1?e.slides.children[0].classList.add("next-slide"):e.slides.children[e.settings.slideIndex+1]&&e.slides.children[e.settings.slideIndex+1].classList.add("next-slide"),e.slides.children[e.settings.slideIndex].classList.add("current-slide"),e.num&&e.indicators[e.settings.slideIndex].classList.add("current-indicator"),"pan"===e.settings.transition&&(e.slider.children[1].style.transform="translateX(-"+e.settings.slideIndex/e.num*100+"00%)"),e.intervalPrevAnim=setTimeout(function(){e.slider.classList.remove("animating")},1e3),autoSlide(e)}}function updateIndex(e,s){e.prevSlideIndex=e.settings.slideIndex,e.settings.slideIndex=s}function autoSlide(e){!1===e.settings.paused&&(e.intervalSlideChange=setTimeout(function(){var s=e.settings.slideIndex+1;updateIndex(e,s),sliderChange(e)},e.settings.duration))}function clearTimeouts(e){e.settings.autoPause&&(e.settings.paused=!0),clearTimeout(e.intervalSlideChange),clearTimeout(e.intervalPrevAnim);for(var s=0;s<e.num;s++)e.slider.classList.remove("animating")}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment