滑块不工作，控制台上没有错误 - Javascript Vanilla

Question

I am trying to create a slider with Javascript, However i cannot seem to get it to work, It is not showing any errors in the console as to why it doesn't seem to work.

It appears the overflow:hidden in the css, seems to hide everything, instead of what overflows...

From what i can see, is that it is not grabbing the li images, although i do not know why, unless the var li Items assignment does not work.

Here is the code:

 function Slide (){ ul = document.getElementById("slide"); liItems = ul.children; imageNumber = liItems.length; imageWidth = liItems[0].children[0].offsetwidth; // Set UL's Width as total width of all images in slider. ul.style.width = parseInt(imageWidth * imageNumber) + "px"; // Left + Right Arrows leftArrow = document.getElementById("left"); rightArrow = document.getElementById("right"); function slider(ul){ animate({ delay: 17, duration: 4000, delta:function(p){ return Math.max(0, -1 + 2 * p)}, step:function(delta){ ul.style.left = "-"+ parseInt(currentImage * imageWidth + delta * imageWidth) + "px"; }, callback:function(){ currentImage++; //Keep sliding if not last image if (currentImage < imageNumber -1){ slider(ul); } // Slide back to first image, if last image else { leftPosition = (imageNumber -1) * imageWidth; //after set seconds, call goback for first image setTimeout(function(){goBack(leftPosition)},3000); setTimeout(function(){slider(ul)},5000); } } }); function goBack (leftPosition){ currentImage = 0; id = setInterval(function(){ if (leftPosition >= 0){ ul.style.left = '-' + parseInt(leftPosition) + "px"; leftPosition -= imageWidth/10; }else { clearInterval(id); } }, 17); } function animate(opts){ start = new Date; id = setInterval (function(){ timePassed = new Date - start; progress = timePassed / opts.duration if (progress > 1){ progress = 1; } delta = opts.delta(progress); opts.step(delta); if (progress == 1){ clearInterval(id); opts.callback(); } }, opts.delay || 17); } } } window.onload = Slide;

 #sliderwrap { width: 100%; height: 100%; position: relative; overflow: hidden; } #left { width: 10%; height: 75px; top: 50%; left: 20px; background-color: rgba(255,255,255,0.5); font-size: 4vmax; position: absolute; z-index: 1; } #left p, #right p { text-align: center; line-height: 75px; vertical-align: middle; color: #ff69b4; } #right { width: 10%; height: 75px; top: 50%; right: 20px; background-color: rgba(255,255,255,0.5); font-size: 4vmax; position: absolute; z-index: 1; } #slide { position: absolute; z-index: 0; } #slide li { max-width: 100%; list-style-type: none; } #slide img { width: 100%; height: 75%; }

 <div id="sliderwrap"> <div id="left"> <p> < </p> </div> <ul id="slide"> <li><img src="http://www.wallpapercase.com/wp-content/uploads/2016/05/My-Style-Photo-Wallpaper-810x506.jpg" alt="1" id="one"/></li> <li><img src="https://s-media-cache-ak0.pinimg.com/236x/c5/91/b2/c591b2dab7ef73898e65c4660d63696f.jpg" alt="2" id="two"/></li> <li><img src="https://s-media-cache-ak0.pinimg.com/236x/79/65/a2/7965a2e1141be21bdfc17d381360505a.jpg" alt="3" id="three"/></li> <li><img src="https://s-media-cache-ak0.pinimg.com/236x/63/01/9d/63019d238358413828cb533dc5277971.jpg" alt="4" id="four"/></li> </ul> <div id="right"> <p> > </p> </div> </div>

Answer 1

You seem to never call the function slider() which looks like it should initialize the slider. Try to add something like slider(document.getElementById('slider')) at the end of your Slide() function