Swiftie_Slider(fetch)

by mhouser_nowmediagroup

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>

<main id="main">
  <section id="slider_01" class="slider">
    <aside class="arrow left"></aside>
    <ul class="slide_wrap">
      <li class="slide first active"><img src="https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x21600x10800.jpg" alt=""></li>
      <li class="slide" data-src="https://upload.wikimedia.org/wikipedia/commons/d/d1/Wikimania_2014_tshirt_design_very_large.jpg"><img src="#" alt=""></li>
      <li class="slide" data-src="https://www.eso.org/public/archives/print_posters/large/print_poster_0025.jpg"><img src="#" alt=""></li>
      <!--<li class="slide"><img data-src="https://ichef.bbci.co.uk/images/ic/960x540/p025k871.jpg" alt=""></li>-->
      <li class="slide last" data-src="https://cdn.spacetelescope.org/archives/images/large/heic1601b.jpg"><img src="#" alt=""></li>
    </ul>
    <aside class="arrow right"></aside>
  </section>
</main>

CSS

#main {
  position: relative;
  width: 85%;
  max-width: 1100px;
  margin: 25px auto;
}

.slider, .slide_wrap, .slide {
  padding: 0;
  margin: 0;
}
.slider, .slide_wrap {
  position: relative;
}
.slide_wrap {
  /*overflow: hidden;*/)
}

.arrow {
  position: absolute;
  top: calc(50% - 25px);
  width: 60px;
  height: 50px;
  outline: dashed 2px #f00;
  z-index: 400;
}
.arrow.left {
  right: 100%;
}
.arrow.right {
  left: 100%;
}

.slide {
  position: absolute;
  width: 100%;
  left: 100%;
  top: 0px;
  list-style: none;
}
.slide.active {
  left: 0;
  position: relative;
}
.slide img {
  width: 100%;
}

JavaScript

let sliders = Array.prototype.slice.call(document.getElementsByClassName('slider'))


function slide(is_left, active_slide){

  let next_slide = (is_left) ? active_slide.previousElementSibling : active_slide.nextElementSibling  

	TweenLite.to(active_slide, 0.5, {left: ((is_left) ? '100%' : '-100%'), function(){ active_slide.classList.remove('active') }})
  TweenLite.to(next_slide, 0.5, {left: '0', onComplete: function(){
  	next_slide.classList.add('active')
  }})
}


function build_slides(slides){
  //console.log(slides[0])
  if(slides[0].dataset.src){
  	console.log(slides[0].dataset.src)//.firstElementChild.src)
  fetch(slides[0].dataset.src)
  .then(response => response.body)
.then(body => {
  const reader = body.getReader();

  return new ReadableStream({
    start(controller) {
      return pump();

      function pump() {
        return reader.read().then(({ done, value }) => {
          // When no more data needs to be consumed, close the stream
          if (done) {
            controller.close();
            return;
          }

          // Enqueue the next data chunk into our target stream
          controller.enqueue(value);
          return pump();
        });
      }
    }
  })
})
.then(stream => new Response(stream))
.then(response => response.blob())
.then(blob => URL.createObjectURL(blob))
.then(url => slides[0].firstElementChild.src = url)
.then(url => console.log(slides[0].dataset.src))
.catch(err => console.error(err));
  
  /*	.then(function(response){
    
    
      var canvas = HTMLCanvasElement
			console.log(response.body)
    	slides[0].firstElementChild.src = canvas.toDataURL(response.body) //slides[0].dataset.src;
    	
      
    })
    */
  }
  if(!(typeof slides[1] === 'undefined' || slides[1] === null)){
  	//console.log(slides.slice(1, slides.length))
  	build_slides(slides.slice(1, slides.length))
    }
}




sliders.forEach(function(slider){
	let arrows = Array.prototype.slice.call(slider.getElementsByClassName('arrow'))
	let...