Advertisement
Guest User

Untitled

a guest
May 22nd, 2019
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.87 KB | None | 0 0
  1. <html>
  2.   <head>
  3.     <title>Slideshow</title>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <link rel="stylesheet" href="dist/slideshow.css">
  6.     <!-- <script type="text/javascript" src ="jquery-1.11.1.min.js"></script> -->
  7.     <script src="dist/slideshow.js"></script>
  8.   </head>
  9.   <body>
  10.     <h1>Vanilla Js Slideshow</h1>
  11.     <div class="che-slideshow">
  12.         <ol class="slideshow-indicator-container">
  13.             <li class="slideshow-indicator">
  14.             </li>
  15.             <li class="slideshow-indicator inactive-indicator" >
  16.             </li>
  17.             <li class="slideshow-indicator inactive-indicator" >
  18.             </li>
  19.         </ol>
  20.       <div class="slideshow-left-control slideshow-control">
  21.             <img src="images/left-arrow.png" class="slideshow-left-arrow slideshow-arrow" />
  22.       </div>
  23.       <div class="slideshow-right-control slideshow-control">
  24.             <img src="images/right-arrow.png" class="slideshow-right-arrow slideshow-arrow" />
  25.       </div>
  26.         <div class="che-slideshow-slide">
  27.             <img src="1.jpg" />
  28.             <div class="che-slideshow-caption">
  29.                 This is a caption for a photo.
  30.             </div>
  31.         </div>
  32.         <div class="che-slideshow-slide inactive">
  33.             <img src="2.jpg" />
  34.             <div class="che-slideshow-caption">
  35.                 This is a caption for a photo.
  36.             </div>
  37.         </div>
  38.         <div class="che-slideshow-slide inactive">
  39.             <img src="3.jpg" />
  40.             <div class="che-slideshow-caption">
  41.                 This is a caption for a photo.
  42.             </div>
  43.         </div>
  44.     </div>
  45.     <script>
  46.     // add event listeners
  47.     (function () {
  48.       var prevArrow = document.getElementsByClassName('slideshow-left-control')[0];
  49.       var nextArrow = document.getElementsByClassName('slideshow-right-control')[0];
  50.  
  51.       prevArrow.addEventListener('click', CHESLIDESHOW.prevSlide);
  52.       nextArrow.addEventListener('click', CHESLIDESHOW.nextSlide);
  53.     })();
  54.     </script>
  55.   </body>
  56. </html>
  57.  
  58. --------------------------------------------------
  59.  
  60. var CHESLIDESHOW = (function () {
  61.     var numSlides = 3,
  62.         currentSlideIndex = 0,
  63.         running = false,
  64.         slideSelector = document.getElementsByClassName('che-slideshow-slide'),
  65.         indicatorSelector = document.getElementsByClassName('slideshow-indicator'),
  66.         currentSlide,
  67.         newSlide,
  68.         mode;
  69. console.log("blyat");
  70.     function animateSlides (newMode) {
  71.         console.log("hey");
  72.         // prevents function from running while an animation is active
  73.         if (running) {
  74.             return false;
  75.         }
  76.         running = true;
  77.  
  78.         //define target slides factoring in passed-in mode argument
  79.         mode = newMode;
  80.         setTargets(newMode);
  81.  
  82.         // set indicators to next state
  83.         indicatorSelector[currentSlideIndex].classList.add('inactive-indicator');
  84.         indicatorSelector[newSlideIndex].classList.remove('inactive-indicator');
  85.  
  86.         //set staging position
  87.         newSlide.style.left = mode === 'prev' ? '-100%' : '100%';
  88.         currentSlide.style.left = '0%';
  89.  
  90.         newSlide.classList.remove("inactive");
  91.    
  92.         //begins both animations
  93.         animate(newSlide);
  94.         animate(currentSlide);
  95.     }
  96.  
  97.     // defines target slides according to direction of animation
  98.     function setTargets() {
  99.         // get the index of the next slide. hard reset to 0 or numSlides (-1) so slideshow can loop back
  100.         if (mode === "prev") {
  101.             newSlideIndex = slideSelector[currentSlideIndex - 1] === undefined ? (numSlides - 1) : currentSlideIndex - 1;
  102.         } else {
  103.             newSlideIndex = slideSelector[currentSlideIndex + 1] === undefined ? 0 : currentSlideIndex + 1;
  104.         }
  105.  
  106.         currentSlide = slideSelector[currentSlideIndex];
  107.         newSlide = slideSelector[newSlideIndex];
  108.     }
  109.  
  110.     function animate (slide) {
  111.         var i = 0;
  112.  
  113.         // animation interval
  114.         var animationInt = setInterval(function(){
  115.             //animate one tick according to direction
  116.             slide.style.left = mode === 'prev' ? ( parseInt(slide.style.left) + 2 ) + "%"
  117.                                                 : ( parseInt(slide.style.left) - 2 ) + "%";
  118.            
  119.             i++;
  120.             if(i >= 50) {
  121.                 stopAnimation();
  122.             }
  123.         }, 12);
  124.  
  125.         // clears interval, returns all elements to a nominal state
  126.         function stopAnimation () {
  127.             currentSlide.classList.add('inactive');
  128.             newSlide.style.left = '0%';
  129.             clearInterval(animationInt);
  130.             currentSlideIndex = newSlideIndex; 
  131.             running = false;
  132.         }
  133.     }
  134.  
  135.     // sets the container height to the height of slides. height not defined in css.
  136.     window.onload = setContainerSize;
  137.     window.onresize = setContainerSize;
  138.  
  139.     function setContainerSize() {
  140.         console.log("123");
  141.         var container = document.getElementsByClassName('che-slideshow')[0];
  142.         container.style.height = getComputedStyle(slideSelector[currentSlideIndex]).height;
  143.     }
  144.  
  145.     var delays = setInterval(function () {
  146.         console.log("hello");
  147.             animateSlides('next')}, 5000);
  148.    
  149.     // expose the private animate function & call with appropriate argument
  150.     return {
  151.         nextSlide: function () {
  152.             animateSlides('next');
  153.         },
  154.         prevSlide: function () {
  155.             animateSlides('prev');
  156.         }
  157.     };
  158.    
  159.    
  160. })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement