If you are looking for, how to slide HTML elements using only JavaScript then this article may can help you. Below is an idea to do this-
<html> <head> <style> .carousel-container { margin: 10px; width: 1240px; } .item { width: 200px; background-color: red; height: 100px; display: inline-block; position: relative; } </style> <script> function MoveRight() { var containerWidth = document.getElementsByClassName('carousel-container')[0].offsetWidth; var itemWidth = document.getElementsByClassName('item')[0].offsetWidth; var widthToMove = containerWidth - itemWidth; var temp = 0; var time = window.setInterval(function () { if (temp >= widthToMove) { window.clearInterval(time); } else { document.getElementsByClassName('item')[0].style.left = temp + 'px'; temp += 1; } }, 10); } </script> </head> <body> <div class="carousel-container"> <div class="item"></div> </div> <button class="btnMove" onclick="MoveRight();">MoveRight</button> </body> </html>
We can use properties like left, right, top, bottom, margin-left, margin-right, margin-top and margin-bottom as per need.
Programming is Easy…