|
|
| (4 ενδιάμεσες αναθεωρήσεις από τον ίδιο χρήστη δεν εμφανίζεται) |
| Γραμμή 1: |
Γραμμή 1: |
| // get elements
| |
| let presentation = document.querySelector(".presentation");
| |
| let slides = document.querySelectorAll(".slide");
| |
| let currentSlide = document.querySelector(".slide.show");
| |
|
| |
|
| var slideNumber = document.querySelector(".counter");
| | $(document).ready(function () { |
| var toLeftBtn = document.querySelector("#left-btn");
| | |
| var toRightBtn = document.querySelector("#right-btn");
| |
|
| |
|
| let presentationController = document.querySelector("#presentation-area");
| | $('.scroll-control .one').click(function () { |
| var toFullScreenBtn = document.querySelector("#full-screen");
| | $.scrollify.move('#s-one'); |
| var toSmallScreenBtn = document.querySelector("#small-screen");
| | }); |
| | $('.scroll-control .two').click(function () { |
| | $.scrollify.move('#s-two'); |
| | }); |
| | $('.scroll-control .three').click(function () { |
| | $.scrollify.move('#s-three'); |
| | }); |
| | }); |
|
| |
|
| // initailize defualt values | | |
| var screenStatus = 0;
| | function applyScroll() { |
| var currentSlideNo = 1;
| | $.scrollify({ |
| var totalSides = 0;
| | section: '.scroll', |
| | sectionName: 'section-name', |
| | //standardScrollElements: 'section', |
| | easing: 'easeOutExpo', |
| | scrollSpeed: 1100, |
| | offset: 0, |
| | scrollbars: true, |
| | setHeights: true, |
| | overflowScroll: true, |
| | updateHash: false, |
| | touchScroll: true, |
| | }); |
| | } |
|
| |
|
| // run init script
| | } |
| init();
| |
| | |
| function init() {
| |
| getCurrentSlideNo();
| |
| totalSides = slides.length;
| |
| setSlideNo();
| |
| hideLeftButton();
| |
| hideRightButton();
| |
| }
| |
| | |
| // handle clicks on left and right icons
| |
| toLeftBtn.addEventListener("click", moveToLeftSlide);
| |
| toRightBtn.addEventListener("click", moveToRightSlide);
| |
| | |
| // handle full screen and small screen modes
| |
| toFullScreenBtn.addEventListener("click", fullScreenMode);
| |
| toSmallScreenBtn.addEventListener("click", smallScreenMode);
| |
| | |
| // hide left button at first page
| |
| function hideLeftButton() {
| |
| if (currentSlideNo == 1) {
| |
| toLeftBtn.classList.remove("show");
| |
| } else {
| |
| toLeftBtn.classList.add("show");
| |
| }
| |
| }
| |
| | |
| // hide right button at last page
| |
| function hideRightButton() {
| |
| if (currentSlideNo === totalSides) {
| |
| toRightBtn.classList.remove("show");
| |
| } else {
| |
| toRightBtn.classList.add("show");
| |
| }
| |
| }
| |
| | |
| // moves to left slide
| |
| function moveToLeftSlide() {
| |
| var tempSlide = currentSlide;
| |
| currentSlide = currentSlide.previousElementSibling;
| |
| tempSlide.classList.remove("show");
| |
| currentSlide.classList.add("show");
| |
| | |
| init();
| |
| }
| |
| | |
| // moves to right slide
| |
| function moveToRightSlide() {
| |
| var tempSlide = currentSlide;
| |
| currentSlide = currentSlide.nextElementSibling;
| |
| tempSlide.classList.remove("show");
| |
| currentSlide.classList.add("show");
| |
| | |
| init();
| |
| }
| |
| | |
| // get current slide
| |
| function getCurrentSlideNo() {
| |
| let counter = 0;
| |
| | |
| slides.forEach((slide, i) => {
| |
| counter++;
| |
| | |
| if (slide.classList.contains("show")) {
| |
| currentSlideNo = counter;
| |
| }
| |
| });
| |
| }
| |
| | |
| // go full screen
| |
| function fullScreenMode() {
| |
| presentationController.classList.add("full-screen");
| |
| toFullScreenBtn.classList.remove("show");
| |
| toSmallScreenBtn.classList.add("show");
| |
| | |
| screenStatus = 1;
| |
| }
| |
| | |
| // switch to small screen
| |
| function smallScreenMode() {
| |
| presentationController.classList.remove("full-screen");
| |
| toFullScreenBtn.classList.add("show");
| |
| toSmallScreenBtn.classList.remove("show");
| |
| | |
| screenStatus = 0;
| |
| }
| |
| | |
| // update counter
| |
| function setSlideNo() {
| |
| slideNumber.innerText = `${currentSlideNo} of ${totalSides}`;
| |
| } | |