text: let slider = {
      slides:['ch01.jpg','ch02.jpg','ch03.jpg','ch04.jpg'],
      facetsOfClasses:['.back','.front'],
      frame:0, 
      rotateCash: 0,
      setImage: function(className, image) { 
  		document.querySelector(className).style.backgroundImage = `url(asset/${image})`;
      },
      init: function() { 
          this.setImage(this.facetsOfClasses[0],this.slides[this.frame+1]);
          this.setImage(this.facetsOfClasses[1],this.slides[this.frame]);
  	},
      bulkContent: function(){
          return document.querySelector('.bulkContent')
      },
      right: function() {
          this.frame++;
  		if(this.frame === this.slides.length) this.frame = 0;
          this.setImage(this.facetsOfClasses[0], this.slides[this.frame]);
          this.rotateCash += 180;
          this.bulkContent().style.transform = `rotateY(${this.rotateCash}deg)`;
          this.facetsOfClasses = this.facetsOfClasses.reverse();
      },
      left: function() {
          this.frame--;
  		if(this.frame < 0) this.frame = this.slides.length-1;
  		this.setImage(this.facetsOfClasses[0], this.slides[this.frame]);
          this.rotateCash -= 180;
          this.bulkContent().style.transform = `rotateY(${this.rotateCash}deg)`;
          this.facetsOfClasses = this.facetsOfClasses.reverse();
      }
  }
  window.onload = ()=>{
      slider.init();
  }