1/*Simple Custom Slider (Pure JS) by RJA 2024 JS Widgets Series*/ 2 3//slider settings & initialization 4var slider = document.querySelectorAll(".slider"); 5var slides = document.querySelectorAll(".slides"); 6var slides_item = document.querySelectorAll(".slides li"); 7var arrows = document.querySelectorAll(".arrows"); 8var arrows_pn = document.querySelectorAll(".arrows span"); 9var buttons_wrapper = document.querySelectorAll(".buttons"); 10var buttons = ""; 11var indicators = []; 12var startSlide = []; 13var timer = []; 14var slideInterval = []; 15var gcs = window.getComputedStyle(slides_item[0]); 16var sec = gcs.getPropertyValue("animation-duration"); 17var loader = document.querySelectorAll(".loader"); 18 19 20 21//get slide-start values 22for(var ss = 0; ss < slider.length; ss++){ 23 var ss_val = slider[ss].getAttribute("start-slide"); 24 if(ss_val != null){ 25 ss_val = ss_val.trim(); 26 } 27 28 if(ss_val === null || ss_val === undefined || ss_val === "" || ss_val > slider.length || ss_val < 0 || isNaN(ss_val)){ 29 ss_val = 0; 30 } 31 32 startSlide.push(parseInt(ss_val,10)); 33} 34 35//get slide-type values: carousel 36for(var st = 0; st < slider.length; st++){ 37 var st_val = slider[st].getAttribute("type"); 38 if(st_val){ 39 slider[st].children[0].classList.add("carousel"); 40 } 41} 42 43 //setting orders, ids, attributes, visibility, active elements 44for(var n = 0; n < slides.length; n++){ 45slider[n].setAttribute("order",n); 46buttons_wrapper[n].setAttribute("id",n); 47slides[n].setAttribute("id",n); 48arrows[n].setAttribute("id",n); 49 50var getType = slider[n].getAttribute("type"); 51var getAnimate = slider[n].getAttribute("animate"); 52var getOverlap = slider[n].getAttribute("overlap"); 53var getMode = slider[n].getAttribute("mode"); 54var getWidth = slider[n].getAttribute("width"); 55var getNumber = slider[n].getAttribute("number"); 56var bwc_length = buttons_wrapper[n].children.length; 57var bwc_elem = buttons_wrapper[n].children; 58var sc_length = slides[n].children.length; 59var sc_elem = slides[n].children; 60var slides_index = startSlide[n]; 61 62if(getType == "carousel"){ //forced buttons off and remove start-slide attribute for slider type: carousel 63 slider[n].setAttribute("buttons","off"); 64 slider[n].removeAttribute("start-slide"); 65 66 if(getAnimate == null || getAnimate == "moveUp" || getAnimate == "moveDown" || getAnimate == "fadingIn" || getAnimate == "fadingOut"){ 67 getAnimate = "moveRight"; 68 slider[n].setAttribute("animate", getAnimate); 69 } 70} 71 72if(getOverlap == "yes"){ 73 slides[n].classList.add("overlap"); 74} 75 76if(getWidth == "threeFourth" || getWidth == "oneHalf" || getWidth == "oneFourth" || getWidth == "oneThird"){ 77 slider[n].classList.add(getWidth); 78} 79 80if(getMode == "facebook"){ 81 slides[n].classList.add(getMode); 82 //slides[n].classList.add("start"); 83 84 if(getAnimate == "moveRight"){ 85 /*slides[n].classList.add("end");*/ 86 arrows[n].children[0].setAttribute("class","hidden"); 87 } 88 89 if(getAnimate == "moveLeft"){ 90 slides[n].classList.add("start"); 91 arrows[n].children[0].setAttribute("class","hidden"); 92 } 93 94 if(window.innerWidth <= 980){ //changes this to on window resize event OR use an observer 95 var number = 0; 96 if(getOverlap == "yes"){ 97 slider[n].removeAttribute("overlap"); 98 slides[n].classList.remove("overlap"); 99 slides[n].classList.remove("start"); 100 101 if(sc_elem.length > 5){ 102 number = 2; 103 } 104 105 if(sc_elem.length <= 5){ 106 number = 3; 107 } 108 } 109 110 if(getOverlap != "yes"){ 111 var number = 0; 112 if(sc_elem.length > 5){ 113 number = 2; 114 } 115 116 if(sc_elem.length <= 5){ 117 number = 3; 118 } 119 } 120 121 slider[n].setAttribute("number",number); 122 123 for(var nu = 0; nu < sc_elem.length; nu++){ 124 if(nu >= slider[n].getAttribute("number")){ 125 sc_elem[nu].setAttribute("class","hidden"); 126 } 127 } 128 129 } 130 131 if(getOverlap != "yes"){ 132 if(getNumber == null){ 133 if(sc_elem.length > 5){ 134 getNumber = 3; 135 slider[n].setAttribute("number",getNumber); 136 } 137 138 if(sc_elem.length < 5){ 139 getNumber = 2; 140 slider[n].setAttribute("number",getNumber); 141 } 142 } 143 for(var num = 0; num < sc_elem.length; num++){ 144 if(num >= getNumber){
145 sc_elem[num].setAttribute("class","hidden"); 146 } 147 } 148 } 149 150 151} 152 153if(getMode == "common"){ 154 if(window.innerWidth <= 980){ //changes this to on window resize event OR use an observer 155 if(getOverlap == "yes"){ 156 slider[n].removeAttribute("overlap"); 157 slides[n].classList.remove("overlap"); 158 } 159 } 160} 161 162if(getType != "carousel"){ 163 slider[n].removeAttribute("mode"); 164 slider[n].removeAttribute("overlap"); 165} 166 167//add indicators to buttons control 168for(var sc = 0; sc < sc_elem.length; sc++){ 169 indicators[sc] = document.createElement("span"); 170 buttons_wrapper[n].append(indicators[sc]); 171} 172 173buttons = document.querySelectorAll(".buttons span"); 174 175//initialize visible slide, visible buttons control, active button 176for(var vs = 0; vs < sc_length; vs++){ 177 sc_elem[vs].setAttribute("order",vs); //set order to slides children 178 bwc_elem[vs].setAttribute("order",vs); //set order to buttons children 179} 180 181if(getType == null || getType != "carousel"){ 182 sc_elem[slides_index].setAttribute("class","visible"); //visible slide 183 bwc_elem[slides_index].setAttribute("class","active"); //active buttons 184 buttons_wrapper[n].classList.add("visible"); //visible button control 185} 186 187//slider mouse over/out event 188slider[n].addEventListener(//over 189"mouseover", function(e){ 190 var id = this.getAttribute("order"); 191 if(id){ 192 //setAnimate_effect(id,""); 193 mouse_over_out("mouseover",id); 194 } 195 196} 197); 198 199slider[n].addEventListener(//out 200"mouseout", function(e){ 201 var id = this.getAttribute("order"); 202 if(id){ 203 //setAnimate_effect(id,sec); 204 mouse_over_out("mouseout",id); 205 } 206 207} 208); 209 210//adding keypress feature: arrows right & left 211ArrowsKeypress(n); 212} 213 214//arrows previous next click event 215for(var i = 0; i < arrows_pn.length; i++){ 216arrows_pn[i].setAttribute("arrow-num",i); 217 218 arrows_pn[i].addEventListener( 219 "click", function(e){ 220 //e.preventDefault(); e.stopPropagation(); 221 var id = e.target.parentNode.id; 222 var arrow_num = this.getAttribute("arrow-num"); 223 224 if(arrow_num % 2 === 0){ 225 pn_slide("Prev",id); 226 return; 227 } 228 pn_slide("Next",id); 229 } 230 ); 231} 232 233//previous next event function handler 234function pn_slide(pn,id){ 235var slides_elem = slides[id].children; 236var btns_elem = buttons_wrapper[id].children; 237var getType = slider[id].getAttribute("type"); 238var getAnimate = slider[id].getAttribute("animate"); 239var getMode = slider[id].getAttribute("mode"); 240var getOverlap = slider[id].getAttribute("overlap"); 241var getWidth = slider[id].getAttribute("width"); 242var getNumber = slider[id].getAttribute("number"); 243var delay = 500; 244var seLen = 0; 245var reset = 0; 246//console.log(id); 247 248if(getOverlap != "yes"){ 249 seLen = slides_elem.length - getNumber; 250 reset = slides_elem.length - getNumber + 1; 251} 252 253if(getOverlap == "yes"){ 254 seLen = slides_elem.length - 3; 255 reset = slides_elem.length - 2; 256} 257 258if(pn === "Prev"){ 259 if(getType == null || getType != "carousel"){ 260 for(var i = 0; i < slides_elem.length; i++){ 261 var currentSlide = slides_elem[i].getAttribute("class"); 262 //var currentOrder = slides_elem[i].getAttribute("order"); 263 var lastSlide = slides_elem.length - 1; 264 var order = slides_elem[i].getAttribute("order"); 265 266 setAnimate_effect(id,sec,"Prev"); 267 268 if(currentSlide){ 269 setTimeout(function(e){ 270 for(var i = 0; i < slides_elem.length; i++){ 271 slides_elem[i].removeAttribute("class"); 272 btns_elem[i].removeAttribute("class"); 273 } 274 },delay); 275 276 if(order == 0){ 277 setTimeout(function(e){ 278 slides_elem[lastSlide].removeAttribute("style"); 279 slides_elem[lastSlide].setAttribute("class","visible"); 280 btns_elem[lastSlide].setAttribute("class","active"); 281 },delay); 282 283 return; 284 } 285 286 if(order !=0){ 287 if(order < lastSlide){ 288 setTimeout(function(e){ 289 order--; 290 slides_elem[order].removeAttribute("style"); 291 slides_elem[order].setAttribute("class","visible"); 292 btns_elem[order].setAttribute("class","active"); 293 },delay); 294 295 return; 296 } 297 298 if(order == lastSlide){ 299 setTimeout(function(e){
300 order--; 301 slides_elem[order].removeAttribute("style"); 302 slides_elem[order].setAttribute("class","visible"); 303 btns_elem[order].setAttribute("class","active"); 304 },delay); 305 } 306 } 307 } 308 309 } 310 } 311 312 if(getType === "carousel"){ 313 if(getAnimate == "moveLeft"){ 314 getAnimate = "moveRight"; 315 } 316 317 //version 1 318 if(getMode == "custom" || getMode == null){ 319 slides[id].lastElementChild.setAttribute("style","--animate: " + getAnimate + " " + sec); 320 321 setTimeout(function(e){ 322 slides[id].prepend(slides[id].lastElementChild); 323 slides[id].firstElementChild.setAttribute("style","--animate: none; margin-left: 20%;"); 324 slides[id].firstElementChild.removeAttribute("style"); 325 }, 500); 326 } 327 328 //version 2 329 if(getMode == "common"){ 330 carouselModeEffect(getAnimate,slides_elem,"setStyle"); 331 setTimeout(function(e){ 332 carouselModeEffect(getAnimate,slides_elem,"removeStyle"); 333 slides[id].prepend(slides[id].lastElementChild); 334 slides[id].firstElementChild.setAttribute("style","--animate: none;"); 335 }, 100); 336 } 337 338 //version 3 339 if(getMode == "facebook"){ 340 if(getOverlap == "yes"){ 341 slides[id].firstElementChild.setAttribute("style","--animate: none;"); 342 } 343 344 carouselModeEffect(getAnimate,slides_elem,"setStyle"); 345 346 setTimeout(function(e){ 347 carouselModeEffect(getAnimate,slides_elem,"removeStyle"); 348 slides[id].prepend(slides[id].lastElementChild); 349 slides[id].firstElementChild.setAttribute("style","--animate: none;"); 350 351 var getSlastC = slides[id].lastElementChild.getAttribute("order"); 352 353 if(getSlastC != slides_elem.length - 1){ 354 arrows[id].children[1].removeAttribute("class"); 355 356 if(getOverlap == "yes"){ 357 /*for(var s = 0; s < slides_elem.length; s++){ 358 slides_elem[s].setAttribute("style","--animate: none;"); 359 }*/ 360 if(!getSlastC){ 361 slides[id].firstElementChild.setAttribute("style","--animate: none; margin-left: -28%;"); 362 } 363 } 364 365 366 if(getOverlap != "yes"){ 367 slides[id].firstElementChild.removeAttribute("class"); 368 slides_elem[getNumber].setAttribute("class","hidden"); 369 } 370 } 371 372 if(getSlastC == slides_elem.length - 1){ 373 arrows[id].children[0].setAttribute("class","hidden"); 374 slides[id].firstElementChild.removeAttribute("class"); 375 376 /*for(var ls = 0; ls < slides_elem.length; ls++){ 377 slides_elem[ls].setAttribute("style","--animate: none;"); 378 }*/ 379 380 //slides_elem[getSlastC].setAttribute("style","--animate: none;"); 381 382 if(getOverlap != "yes"){ 383 slides_elem[getNumber].setAttribute("class","hidden") 384 } 385 386 } 387 },100); 388 } 389 390 } 391 } 392 393if(pn === "Next"){ 394 if(getType == null || getType != "carousel"){ 395 for(var i = 0; i < slides_elem.length; i++){ 396 var currentSlide = slides_elem[i].getAttribute("class"); 397 //var currentOrder = slides_elem[i].getAttribute("order"); 398 var lastSlide = slides_elem.length - 1; 399 var order = slides_elem[i].getAttribute("order"); 400 401 setAnimate_effect(id,sec,"Next"); 402 403 if(currentSlide){ 404 setTimeout(function(e){ 405 for(var i = 0; i < slides_elem.length; i++){ 406 slides_elem[i].removeAttribute("class"); 407 btns_elem[i].removeAttribute("class"); 408 } 409 },delay); 410 411 if(order == 0){ 412 setTimeout(function(e){ 413 order++; 414 slides_elem[order].removeAttribute("style"); 415 slides_elem[order].setAttribute("class","visible"); 416 btns_elem[order].setAttribute("class","active"); 417 },delay); 418 419 return; 420 } 421 if(order != 0){ 422 if(order >= 1 && order != lastSlide){ 423 setTimeout(function(e){ 424 order++; 425 slides_elem[order].removeAttribute("style"); 426 slides_elem[order].setAttribute("class","visible"); 427 btns_elem[order].setAttribute("class","active"); 428 },delay); 429 430 return; 431 } 432 if(order == lastSlide){ 433 setTimeout(function(e){ 434 slides_elem[0].removeAttribute("style"); 435 slides_elem[0].setAttribute("class","visible"); 436 btns_elem[0].setAttribute("class","active"); 437 },delay); 438 } 439 440 } 441 442 } 443 } 444 } 445 446 if(getType === "carousel"){ 447 if(getAnimate == "moveRight"){ 448 getAnimate = "moveLeft"; 449 } 450 451 //version 1 452 if(getMode == "custom" || getMode == null){ 453 slides[id].firstElementChild.setAttribute("style","--animate: " + getAnimate + " " + sec); 454 455 setTimeout(function(e){
456 slides[id].append(slides[id].firstElementChild); 457 slides[id].lastElementChild.setAttribute("style","--animate: none; margin-right: 20%;"); 458 slides[id].lastElementChild.removeAttribute("style"); 459 }, 500); 460 } 461 462 //version 2 463 if(getMode == "common"){ 464 carouselModeEffect(getAnimate,slides_elem,"setStyle"); 465 466 setTimeout(function(e){ 467 carouselModeEffect(getAnimate,slides_elem,"removeStyle"); 468 slides[id].append(slides[id].firstElementChild); 469 slides[id].lastElementChild.setAttribute("style","--animate: none;"); 470 }, 100); 471 } 472 //version 3 473 if(getMode == "facebook"){ 474 carouselModeEffect(getAnimate,slides_elem,"setStyle"); 475 476 setTimeout(function(e){ 477 carouselModeEffect(getAnimate,slides_elem,"removeStyle"); 478 slides[id].append(slides[id].firstElementChild); 479 slides[id].lastElementChild.setAttribute("style","--animate: none;"); 480 481 var getSfirstC = slides[id].firstElementChild.getAttribute("order"); 482 483 if(getSfirstC != 0 || getSfirstC != slides_elem.length - 1){//not first nor last 484 arrows[id].children[0].removeAttribute("class"); 485 486 if(getOverlap == "yes"){ 487 slides[id].firstElementChild.setAttribute("style","--animate: none; margin-left: -28%;"); 488 } 489 490 if(getOverlap != "yes"){ 491 slides_elem[getNumber-1].setAttribute("style","--animate: none;"); 492 slides_elem[getNumber-1].removeAttribute("class"); 493 slides[id].lastElementChild.setAttribute("class","hidden"); 494 arrows[id].children[1].removeAttribute("class"); 495 } 496 } 497 498 if(getSfirstC == 0){//first 499 arrows[id].children[1].removeAttribute("class"); 500 arrows[id].children[0].setAttribute("class","hidden"); 501 } 502 503 if(getSfirstC == seLen){//last 504 arrows[id].children[1].setAttribute("class","hidden"); 505 506 if(getOverlap == "yes"){ 507 slides[id].firstElementChild.setAttribute("style","--animate: none; margin-left: -17%;"); 508 } 509 } 510 511 if(getSfirstC == reset){//reset 512 if(getOverlap == "yes"){ 513 arrows[id].children[0].setAttribute("class","hidden"); 514 arrows[id].children[1].removeAttribute("class"); 515 slides[id].firstElementChild.setAttribute("style","--animate: none;"); 516 for(var ap = 0; ap < slides_elem.length - reset; ap++){ 517 slides[id].append(slides[id].firstElementChild); 518 } 519 } 520 521 if(getOverlap != "yes"){ 522 arrows[id].children[0].setAttribute("class","hidden"); 523 for(var sl = 0; sl < slides_elem.length; sl++){ 524 var getClass = slides_elem[sl].getAttribute("class"); //get hidden class 525 526 if(getClass != null){ 527 slides_elem[sl].removeAttribute("class"); //remove hidden class 528 } 529 530 //console.log(slides_elem[sl]); 531 } 532 533 var count = slides_elem.length - reset; 534 535 while(count > 0){ 536 slides[id].append(slides[id].firstElementChild); //append to reset 537 count--; 538 } 539 540 for(var h = 0; h < slides_elem.length; h++){ 541 if(h >= getNumber){ 542 slides_elem[h].setAttribute("class","hidden"); //add hidden class to carousel based on numbers to hide or show 543 } 544 } 545 } 546 } 547 548 }, 100); 549 } 550 551 } 552} 553} 554 555//set animation effect function handler 556function setAnimate_effect(index,secs,ctrl=""){ 557 var a = slider[index].getAttribute("animate"); 558 var getType = slider[index].getAttribute("type"); 559 560 if(a != null){ 561 var id = slides[index].parentNode.getAttribute("order"); 562 var slc_elem = slides[id].children; 563 var bc_elem = buttons_wrapper[id].children; 564 565 for(var d = 0; d < slc_elem.length; d++){ 566 if(ctrl == "Prev"){ 567 if(a == "moveDown"){ 568 a = "moveUp"; 569 } 570 571 if(a == "moveRight"){ 572 a = "moveLeft"; 573 } 574 575 } 576 if(ctrl == "Next"){ 577 if(a == "moveUp"){ 578 a = "moveDown"; 579 } 580 581 if(a == "moveLeft"){ 582 a = "moveRight"; 583 } 584 585 } 586 587 if(slc_elem[d].getAttribute("class")){ 588 if(getType != "carousel"){ 589 slc_elem[d].setAttribute("style","--animate: " + a + " " + sec); 590 } 591 } else{ 592 if(getType == null || getType != "carousel"){ 593 //slc_elem[d].setAttribute("style","--animate: " + a + " " + sec); 594 slc_elem[d].removeAttribute("style"); 595 } 596 } 597 } 598 } 599 600 if(a == null){ 601 slider[index].setAttribute("animate", "fadingIn"); //set to default 602 } 603} 604 605//get timer speed 606for(var sp = 0; sp < slider.length; sp++){ 607 var speed = slider[sp].getAttribute("speed"); 608 if(speed == null || speed == undefined){speed = 3000;} 609 timer.push(parseInt(speed,10)); 610 slideInterval.push(sp); 611} 612 613//passing loop variable index to setInterval - slides...credit to soc 614for (var t = 0; t < slider.length; t++) { 615 (function(t) { 616 slideInterval[t] = setInterval(function() { 617 if(slider[t].getAttribute("autoplay") == "" || slider[t].getAttribute("autoplay") == "on"){ 618 slide(t); //autoplay 619 loop(t,timer[t]); //loop 620 setAnimate_effect(t,sec); //animation effect 621 } 622 if(slider[t].getAttribute("autoplay") == undefined || slider[t].getAttribute("autoplay") == "off"){ 623 slider[t].setAttribute("autoplay", "off"); 624 } 625 }, timer[t]) 626 })(t); 627}
628 629//loop function handler 630function loop(id,delay){ 631 var l = slider[id].getAttribute("loop"); 632 var slides_elem = slides[id].children; 633 var loop = l * slides_elem.length; 634 //console.log(id+"=>"+loop); 635 636 var looper = function(){//looper 637 if(loop-- > 0){ 638 setInterval(looper, delay); 639 } 640 if(loop === 0){ 641 slider[id].removeAttribute("loop"); 642 slider[id].removeAttribute("autoplay"); 643 clearInterval(slideInterval[id]); 644 } 645 } 646 looper(); 647} 648 649 //buttons click event 650 for(var ib = 0; ib < buttons.length; ib++){ 651 buttons[ib].addEventListener( 652 "click", function(e){ 653 var order = parseInt(this.getAttribute("order"),10); //get the order number, current/active button 654 var id = e.target.parentNode.id; 655 var btns_length = buttons_wrapper[id].children.length; 656 var btns_elem = buttons_wrapper[id].children; 657 var slides_elem = slides[id].children; 658 var delay = 500; 659 660 setAnimate_effect(id,sec); //buttons control click animate 661 662 for(var i = 0; i < btns_length; i++){ 663 if(btns_elem[i].getAttribute("class")){//get active button 664 var prev_order = btns_elem[i].getAttribute("order"); //get previous button 665 var a = slider[id].getAttribute("animate"); 666 //buttons control indicator logic: move left/right & up/down 667 668 slides_elem[order].removeAttribute("style"); 669 670 if(order > prev_order){ 671 //console.log("move right/down"); 672 if(a == "moveUp"){ 673 a = "moveDown"; 674 } 675 if(a == "moveLeft"){ 676 a = "moveRight"; 677 } 678 679 slides_elem[prev_order].setAttribute("style", "--animate: " + a + " " + sec); 680 681 setTimeout(function(e){ 682 for(var i = 0; i < btns_length; i++){ 683 btns_elem[i].removeAttribute("class"); 684 slides_elem[i].removeAttribute("class"); 685 } 686 },delay); 687 688 setTimeout(function(e){ 689 slides_elem[order].setAttribute("class","visible"); 690 btns_elem[order].setAttribute("class","active"); 691 },delay); 692 693 } 694 if(order < prev_order){ 695 //console.log("move left/up"); 696 if(a == "moveDown"){ 697 a = "moveUp"; 698 } 699 if(a == "moveRight"){ 700 a = "moveLeft"; 701 } 702 703 slides_elem[prev_order].setAttribute("style", "--animate: " + a + " " + sec); 704 705 setTimeout(function(e){ 706 for(var i = 0; i < btns_length; i++){ 707 btns_elem[i].removeAttribute("class"); 708 slides_elem[i].removeAttribute("class"); 709 } 710 },delay); 711 712 setTimeout(function(e){ 713 slides_elem[order].setAttribute("class","visible"); 714 btns_elem[order].setAttribute("class","active"); 715 },delay); 716 } 717 718 } 719 720 } 721 722 723 } 724 ); 725 } 726 727 //controllers 728 for(var bc = 0; bc < buttons_wrapper.length; bc++){//buttons control 729 var buttons_control = slider[bc].getAttribute("buttons"); 730 if(buttons_control=="off"){ 731 var s = slider[bc].getAttribute("order"); 732 buttons_wrapper[s].classList.remove("visible"); 733 } 734 } 735 736 for(var ac = 0; ac < arrows.length; ac++){//arrows control 737 var arrows_control = slider[ac].getAttribute("arrows"); 738 if(arrows_control=="off"){ 739 var s = slider[ac].getAttribute("order"); 740 arrows[s].classList.remove("visible"); 741 } 742 } 743 744 //slider mouse over/out events function handler 745 function mouse_over_out(event,arr){ 746 if(event === "mouseover"){ 747 for(var a = 0; a < arrows.length; a++){ 748 if(slider[arr].getAttribute("arrows")!="off"){ 749 arrows[arr].classList.add("visible"); 750 } 751 if(slider[arr].getAttribute("hover-pause") == "on" || slider[arr].getAttribute("hover-pause") == ""){ 752 if(slider[arr].getAttribute("autoplay") == "on" || slider[arr].getAttribute("autoplay") == ""){ 753 slider[arr].setAttribute("autoplay","pause"); 754 } 755 } 756 } 757 758 slider[arr].setAttribute("key","active"); 759 } 760 761 if(event === "mouseout"){ 762 for(var a = 0; a < arrows.length; a++){ 763 if(slider[arr].getAttribute("arrows")!="off"){ 764 arrows[arr].classList.remove("visible"); 765 } 766 if(slider[arr].getAttribute("hover-pause") == "on" || slider[arr].getAttribute("hover-pause") == ""){ 767 if(slider[arr].getAttribute("autoplay") == "pause"){ 768 slider[arr].setAttribute("autoplay","on"); 769 } 770 } 771 } 772 773 slider[arr].removeAttribute("key"); 774 } 775 } 776 777//slide function handler 778 function slide(i){ 779 var slides_elem = slides[i].children; 780 var btns_elem = buttons_wrapper[i].children;
781 var delay = 1000; 782 var getType = slider[i].getAttribute("type"); 783 var getMode = slider[i].getAttribute("mode"); 784 var getAnimate = slider[i].getAttribute("animate"); 785 var getOverlap = slider[i].getAttribute("overlap"); 786 var getWidth = slider[i].getAttribute("width"); 787 var getNumber = slider[i].getAttribute("number"); 788 var seLen = 0; 789 var reset = 0; 790 791 if(getType == null || getType != "carousel"){ 792 for(var s = 0; s < slides_elem.length; s++){ //same conditions with arrow Next 793 var order = slides_elem[s].getAttribute("order"); 794 var currentOrder = slides_elem[s].getAttribute("order"); 795 var currentSlide = slides_elem[s].getAttribute("class"); 796 var lastSlide = slides_elem.length - 1; 797 798 if(currentSlide){ 799 setTimeout(function(e){ 800 for(var i = 0; i < slides_elem.length; i++){ 801 slides_elem[i].removeAttribute("class"); 802 btns_elem[i].removeAttribute("class"); 803 } 804 },delay); 805 806 if(order == 0){ 807 setTimeout(function(e){ 808 order++; 809 slides_elem[order].removeAttribute("style"); 810 slides_elem[order].setAttribute("class","visible"); 811 btns_elem[order].setAttribute("class","active"); 812 },delay); 813 814 return; 815 } 816 if(order != 0){ 817 if(order >= 1 && order != lastSlide){ 818 setTimeout(function(e){ 819 order++; 820 slides_elem[order].removeAttribute("style"); 821 slides_elem[order].setAttribute("class","visible"); 822 btns_elem[order].setAttribute("class","active"); 823 },delay); 824 825 return; 826 } 827 if(order == lastSlide){ 828 setTimeout(function(e){ 829 slides_elem[0].removeAttribute("style"); 830 slides_elem[0].setAttribute("class","visible"); 831 btns_elem[0].setAttribute("class","active"); 832 },delay); 833 } 834 835 } 836 837 } 838 839 } 840 } 841 842 if(getType == "carousel"){ 843 //version 1 844 if(getMode == "custom" || getMode == null){ 845 if(getAnimate == "moveRight"){ 846 getAnimate = "moveLeft"; 847 } 848 slides[i].firstElementChild.setAttribute("style","--animate: " + getAnimate + " " + sec); 849 850 setTimeout(function(e){ 851 slides[i].append(slides[i].firstElementChild); 852 slides[i].lastElementChild.setAttribute("style","--animate: none; margin-right: 20%"); 853 slides[i].lastElementChild.removeAttribute("style"); 854 },delay-500); 855 } 856 857 //version 2 858 if(getMode == "common"){ 859 carouselModeEffect(getAnimate,slides_elem,"setStyle"); 860 861 setTimeout(function(e){ 862 carouselModeEffect(getAnimate,slides_elem,"removeStyle"); 863 slides[i].append(slides[i].firstElementChild); 864 slides[i].lastElementChild.setAttribute("style","--animate: none;"); 865 }, 100); 866 } 867 868 //version 3 869 if(getMode == "facebook"){ 870 if(getOverlap != "yes"){ 871 seLen = slides_elem.length - getNumber; 872 reset = slides_elem.length - getNumber + 1; 873 } 874 875 if(getOverlap == "yes"){ 876 seLen = slides_elem.length - 3; 877 reset = slides_elem.length - 2; 878 } 879 880 carouselModeEffect(getAnimate,slides_elem,"setStyle"); 881 882 setTimeout(function(e){ 883 carouselModeEffect(getAnimate,slides_elem,"removeStyle"); 884 slides[i].append(slides[i].firstElementChild); 885 slides[i].lastElementChild.setAttribute("style","--animate: none;"); 886 887 var getSfirstC = slides[i].firstElementChild.getAttribute("order"); 888 889 if(getSfirstC != 0 || getSfirstC != slides_elem.length - 1){//not first nor last 890 arrows[i].children[0].removeAttribute("class"); 891 892 if(getOverlap == "yes"){ 893 slides[i].firstElementChild.setAttribute("style","--animate: none; margin-left: -28%;"); 894 } 895 896 if(getOverlap != "yes"){ 897 slides_elem[getNumber-1].setAttribute("style","--animate: none;"); 898 slides_elem[getNumber-1].removeAttribute("class"); 899 slides[i].lastElementChild.setAttribute("class","hidden"); 900 arrows[i].children[1].removeAttribute("class"); 901 } 902 } 903 904 if(getSfirstC == 0){//first 905 arrows[i].children[1].removeAttribute("class"); 906 arrows[i].children[0].setAttribute("class","hidden"); 907 } 908 909 if(getSfirstC == seLen){//last 910 arrows[i].children[1].setAttribute("class","hidden"); 911 912 if(getOverlap == "yes"){ 913 slides[i].firstElementChild.setAttribute("style","--animate: none; margin-left: -17%;"); 914 } 915 } 916 917 if(getSfirstC == reset){//reset 918 if(getOverlap == "yes"){ 919 arrows[i].children[0].setAttribute("class","hidden"); 920 arrows[i].children[1].removeAttribute("class"); 921 slides[i].firstElementChild.setAttribute("style","--animate: none;"); 922 for(var ap = 0; ap < slides_elem.length - reset; ap++){ 923 slides[i].append(slides[i].firstElementChild); 924 } 925 } 926 927 if(getOverlap != "yes"){ 928 arrows[i].children[0].setAttribute("class","hidden"); 929 for(var sl = 0; sl < slides_elem.length; sl++){ 930 var getClass = slides_elem[sl].getAttribute("class"); //get hidden class 931 932 if(getClass != null){ 933 slides_elem[sl].removeAttribute("class"); //remove hidden class 934 } 935 936 //console.log(slides_elem[sl]); 937 } 938 939 var count = slides_elem.length - reset; 940 941 slides[i].firstElementChild.setAttribute("style","--animate: none;"); //remove animation 942 943 while(count > 0){ 944 slides[i].append(slides[i].firstElementChild); //append to reset 945 count--; 946 } 947 948 949 for(var h = 0; h < slides_elem.length; h++){ 950 if(h >= getNumber){
951 slides_elem[h].setAttribute("class","hidden"); //add hidden class to carousel based on numbers to hide or show 952 } 953 } 954 955 } 956 } 957 958 }, 100); 959 } 960 } 961 } 962 963function carouselModeEffect(m,e,a){ 964 for(var i = 0; i < e.length; i++){ 965 if(m=="moveLeft"){ 966 if(a=="setStyle"){ 967 e[i].children[0].setAttribute("style","right: -60%; --animate: none;"); 968 } 969 if(a=="removeStyle"){ 970 e[i].children[0].removeAttribute("style"); 971 } 972 } 973 974 if(m=="moveRight"){ 975 if(a=="setStyle"){ 976 e[i].children[0].setAttribute("style","left: -60%; --animate: none;"); 977 } 978 if(a=="removeStyle"){ 979 e[i].children[0].removeAttribute("style"); 980 } 981 } 982 983 } 984} 985 986setTimeout( 987function(e){ 988 for(var l = 0; l < loader.length; l++){ 989 loader[l].classList.add("hidden"); 990 } 991},500 992); 993 994//arrows keypress function handler 995function ArrowsKeypress(id){ 996 document.addEventListener("keydown", function(e){ 997 if(slider[id].getAttribute("key") == "active" && slider[id].getAttribute("arrows") != "off"){ 998 if(e.code == "ArrowRight"){ 999 if(slider[id].getAttribute("type") != "carousel"){ 1000 pn_slide("Next",id); 1001 } 1002 if(slider[id].getAttribute("type") == "carousel" && slider[id].getAttribute("mode") != "facebook"){ 1003 pn_slide("Next",id); 1004 } 1005 if(slider[id].getAttribute("type") == "carousel" && slider[id].getAttribute("mode") == "facebook"){ 1006 if(slides[id].firstElementChild.getAttribute("order") != slides[id].children.length){ 1007 pn_slide("Next",id); 1008 } 1009 } 1010 } 1011 if(e.code == "ArrowLeft"){ 1012 if(slider[id].getAttribute("type") != "carousel"){ 1013 pn_slide("Prev",id); 1014 } 1015 if(slider[id].getAttribute("type") == "carousel" && slider[id].getAttribute("mode") != "facebook"){ 1016 pn_slide("Prev",id); 1017 } 1018 if(slider[id].getAttribute("type") == "carousel" && slider[id].getAttribute("mode") == "facebook"){ 1019 if(slides[id].firstElementChild.getAttribute("order") != 0){ 1020 pn_slide("Prev",id); 1021 } 1022 } 1023 } 1024 } 1025 }); 1026}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.