body{
  height: 340vh; // 100vh x the number of slides you have (+ however much for a footer, in this case 40vh)
}

.slide{
  height: 100vh; //slides are full viewport height
}

.slide0{ //very first slide
  position: relative;       //first slide needs relative positioning if using z-indeces
  z-index: 3;               //top-most z-index for the first slide
}

.container1{	
  position: absolute;	
  top: 0;	        //all containers are given absolute positioning (so they stack like a deck)
  left: 0;	
  height: 200vh;  //100vh x the number of the slide (in this case, 2). This is so the script knows how far to scroll	
  z-index: 2;     //the z-index goes on the containers hereafter (only the first slide needs an index)
}

.slide1{    
  width: 100vw;   //IMPORTANT: divs need a width if they're fixed or they won't be visible  
  position: fixed;	
  background-image: url(slide2.jpg); 
  background-position: center;    
  background-repeat: none;
}

.container-footer{      //if you're making a footer, give it a container
  height: 340vh;        //since the footer is last, the container is the height of the body  
  position: absolute;  
  top: 0;  
  left: 0;  
  z-index: 0;           //footer has 0 index (or -1 so you don't have to worry about numbers)
 }

footer{  
  height: 40vh;  
  width: 100vw;  
  position: fixed;      //the footer will be fixed to the bottom of its container.
  bottom: 0;            //it'll be visible when scrolling past the last slide
  right: 0;  
  background-color: black;
}