Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>Slideshow</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="dist/slideshow.css">
- <!-- <script type="text/javascript" src ="jquery-1.11.1.min.js"></script> -->
- <script src="dist/slideshow.js"></script>
- </head>
- <body>
- <h1>Vanilla Js Slideshow</h1>
- <div class="che-slideshow">
- <ol class="slideshow-indicator-container">
- <li class="slideshow-indicator">
- </li>
- <li class="slideshow-indicator inactive-indicator" >
- </li>
- <li class="slideshow-indicator inactive-indicator" >
- </li>
- </ol>
- <div class="slideshow-left-control slideshow-control">
- <img src="images/left-arrow.png" class="slideshow-left-arrow slideshow-arrow" />
- </div>
- <div class="slideshow-right-control slideshow-control">
- <img src="images/right-arrow.png" class="slideshow-right-arrow slideshow-arrow" />
- </div>
- <div class="che-slideshow-slide">
- <img src="1.jpg" />
- <div class="che-slideshow-caption">
- This is a caption for a photo.
- </div>
- </div>
- <div class="che-slideshow-slide inactive">
- <img src="2.jpg" />
- <div class="che-slideshow-caption">
- This is a caption for a photo.
- </div>
- </div>
- <div class="che-slideshow-slide inactive">
- <img src="3.jpg" />
- <div class="che-slideshow-caption">
- This is a caption for a photo.
- </div>
- </div>
- </div>
- <script>
- // add event listeners
- (function () {
- var prevArrow = document.getElementsByClassName('slideshow-left-control')[0];
- var nextArrow = document.getElementsByClassName('slideshow-right-control')[0];
- prevArrow.addEventListener('click', CHESLIDESHOW.prevSlide);
- nextArrow.addEventListener('click', CHESLIDESHOW.nextSlide);
- })();
- </script>
- </body>
- </html>
- --------------------------------------------------
- var CHESLIDESHOW = (function () {
- var numSlides = 3,
- currentSlideIndex = 0,
- running = false,
- slideSelector = document.getElementsByClassName('che-slideshow-slide'),
- indicatorSelector = document.getElementsByClassName('slideshow-indicator'),
- currentSlide,
- newSlide,
- mode;
- console.log("blyat");
- function animateSlides (newMode) {
- console.log("hey");
- // prevents function from running while an animation is active
- if (running) {
- return false;
- }
- running = true;
- //define target slides factoring in passed-in mode argument
- mode = newMode;
- setTargets(newMode);
- // set indicators to next state
- indicatorSelector[currentSlideIndex].classList.add('inactive-indicator');
- indicatorSelector[newSlideIndex].classList.remove('inactive-indicator');
- //set staging position
- newSlide.style.left = mode === 'prev' ? '-100%' : '100%';
- currentSlide.style.left = '0%';
- newSlide.classList.remove("inactive");
- //begins both animations
- animate(newSlide);
- animate(currentSlide);
- }
- // defines target slides according to direction of animation
- function setTargets() {
- // get the index of the next slide. hard reset to 0 or numSlides (-1) so slideshow can loop back
- if (mode === "prev") {
- newSlideIndex = slideSelector[currentSlideIndex - 1] === undefined ? (numSlides - 1) : currentSlideIndex - 1;
- } else {
- newSlideIndex = slideSelector[currentSlideIndex + 1] === undefined ? 0 : currentSlideIndex + 1;
- }
- currentSlide = slideSelector[currentSlideIndex];
- newSlide = slideSelector[newSlideIndex];
- }
- function animate (slide) {
- var i = 0;
- // animation interval
- var animationInt = setInterval(function(){
- //animate one tick according to direction
- slide.style.left = mode === 'prev' ? ( parseInt(slide.style.left) + 2 ) + "%"
- : ( parseInt(slide.style.left) - 2 ) + "%";
- i++;
- if(i >= 50) {
- stopAnimation();
- }
- }, 12);
- // clears interval, returns all elements to a nominal state
- function stopAnimation () {
- currentSlide.classList.add('inactive');
- newSlide.style.left = '0%';
- clearInterval(animationInt);
- currentSlideIndex = newSlideIndex;
- running = false;
- }
- }
- // sets the container height to the height of slides. height not defined in css.
- window.onload = setContainerSize;
- window.onresize = setContainerSize;
- function setContainerSize() {
- console.log("123");
- var container = document.getElementsByClassName('che-slideshow')[0];
- container.style.height = getComputedStyle(slideSelector[currentSlideIndex]).height;
- }
- var delays = setInterval(function () {
- console.log("hello");
- animateSlides('next')}, 5000);
- // expose the private animate function & call with appropriate argument
- return {
- nextSlide: function () {
- animateSlides('next');
- },
- prevSlide: function () {
- animateSlides('prev');
- }
- };
- })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement