javascript - Image Slider: Working with the widths -
<body> <div id="parent_scroll"> <div id="slider"> <div class="slides">slide1</div> <div class="slides">slide2</div> <div class="slides">slide3</div> </div> </div> </body> <style> #parent_scroll{ width: 800px; height: 350px; border: 1px solid grey; margin-left: auto; margin-right: auto; overflow: hidden; position: relative; } #slider{ width: 2430px; border: 1px solid green; height: 350px; position: absolute; } .slides{ width: 800px; height: 350px; border: 1px dotted blue; float: left; background-color: grey; font-size: 30px; text-align: center; }
i trying implement slide show sort of feature. not sure logic goes javascript on here, know need utilize setinterval() function. part how work out width of element id:"slider". pointers helpful edit: trying implement without jquery
i see in css widths static, if add together slides should calculate #slider width using width of .slides times amount of slides..
then, save .slides width (including margin) offset, , animate #slider's left position using offset..
edit: actually, there's technique i've been fiddling won't have calculate widths, , that's using display inline-block this:
#slider { white-space:nowrap;} .slides { display:inline-block;} this automatically have slides on same line , can animate using margins.
let me know if clears you.. need code example?
edit: illustration (using css animations)
javascriptvar slider, slides, offset, amount, _timer, _curindex = 0; function initslider() { slider = document.getelementbyid("slider"); slides = document.getelementsbyclassname("slides"); offset = slides[0].offsetwidth+2; amount = slides.length; slider.style.width = offset*amount; _timer = setinterval(moveslide, 3000); } function moveslide() { _curindex = (_curindex == amount-1) ? 0 : _curindex+1; slider.style.left = -_curindex*offset+"px"; } initslider(); fiddle
javascript html css
No comments:
Post a Comment