Slideshows(Multiple) for HTML/Webpage

Question

I am attempting to put two slideshows on the same page, both of which would be ran by the same css, and java script. My issue is that I can not seem to figure out why my second slideshow is pushing one of the images down. Notice in the photo provided that the second slideshow is pushing the image of a white circle vertically down and to the left of the page. If anyone can explain what I have done wrong, I would appreciate it and any other advice as well! Thank you

The Image of the result of my slideshows( two of them)

<script>
   

     //1. set ul width
        //2. image when click prev/next button
        var ul;
        var li_items;
        var imageNumber;
    var imageWidth;
    var prev, next;
    var currentPostion = 0;
    var currentImage = 0;


    function init(){
    	ul = document.getElementById('image_slider');
    	li_items = ul.children;
    	imageNumber = li_items.length;
    	imageWidth = li_items[0].children[0].clientWidth;
    	ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
    	prev = document.getElementById("prev");
    	next = document.getElementById("next");
    	//.onclike = slide(-1) will be fired when onload;
    	/*
    	prev.onclick = function(){slide(-1);};
    	next.onclick = function(){slide(1);};*/
    	prev.onclick = function(){ onClickPrev();};
    	next.onclick = function(){ onClickNext();};
    }

    function animate(opts){
    	var start = new Date;
    	var id = setInterval(function(){
    		var timePassed = new Date - start;
    		var progress = timePassed / opts.duration;
    		if (progress > 1){
    			progress = 1;
    		}
    		var delta = opts.delta(progress);
    		opts.step(delta);
    		if (progress == 1){
    			clearInterval(id);
    			opts.callback();
    		}
    	}, opts.delay || 17);
    	//return id;
    }

    function slideTo(imageToGo){
    	var direction;
    	var numOfImageToGo = Math.abs(imageToGo - currentImage);
    	// slide toward left

    	direction = currentImage > imageToGo ? 1 : -1;
    	currentPostion = -1 * currentImage * imageWidth;
    	var opts = {
    		duration:1000,
    		delta:function(p){return p;},
    		step:function(delta){
    			ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px';
    		},
    		callback:function(){currentImage = imageToGo;}
    	};
    	animate(opts);
    }

    function onClickPrev(){
    	if (currentImage == 0){
    		slideTo(imageNumber - 1);
    	}
    	else{
    		slideTo(currentImage - 1);
    	}
    }

    function onClickNext(){
    	if (currentImage == imageNumber - 1){
    		slideTo(0);
    	}
    	else{
    		slideTo(currentImage + 1);
    	}
    }

    window.onload = init;
    </script>

    /* Silent Auction */
/* SLIDESHOW */

  .container2{
    	width:800px;
    	height:400px;
    	padding:5px;
    	border:1px solid #E6E6FA;
    	-webkit-box-sizing:border-box;
    	-moz-box-sizing:border-box;
    	box-sizing:border-box;
    	background: #E6E6FA;
    }
.slider_wrapper{
	overflow: hidden;
	position:relative;
	height:500px;
	top:auto;
}
#image_slider{

	position: relative;
	height: auto;
	list-style: none;
	overflow: hidden;
	float: left;
	/*Chrom default padding for ul is 40px */
	padding:0px;
	margin:0px;
}
#image_slider li{
	position: relative;
	float: left;
}
.nvgt{
	position:absolute;
	top: 120px;
	height: 50px;
	width: 30px;
	opacity: 0.6;
}
.nvgt:hover{
	opacity: 0.9;
}
#prev{
	background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center;
	left: 0px;
}
#next{
	background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center;
	right: 0px;
}
h1.slideshowtitle{
  font-style: italic;
  font-size: 50px;
  font-family: cursive;
  color: black;
  

    <h1> Silent Auction </h1>


    <!-First Slideshow->
    <div class="container2">
      <div class="slider_wrapper">
        <ul id="image_slider">
          <li><img src=""></li>
          <li><img src=""></li>
          <li><img src=""></li>
        </ul>
        <span class="nvgt" id="prev"></span>
        <span class="nvgt" id="next"></span>
      </div>
    </div>
    <!-Second slide show ->
    <div class="container2">
      <div class="slider_wrapper">
        <ul id="image_slider">
          <li><img src=""></li>
          <li><img src=""></li>
          <li><img src=""></li>
        </ul>
        <span class="nvgt" id="prev"></span>
        <span class="nvgt" id="next"></span>
      </div>
    </div>

Answer 1

Ids should be unique within the document, but you are styling w/ id selectors and multiple elements with the same id. Switch to classes. E.g. -

Use

class="image_slider"

and

.image_slider { <yourcss> }