Horizontal slider with pure JS

Question

I have a stupid, easy question, but I am the beginner in JS. I want to create a horizontal slider. For now the JS code looks like this:

var slideIndex = 0;
slider();

function slider() {
var i;
var x = document.getElementsByClassName("part");
for (i = 0; i < x.length; i++) {
  x[i].style.display = "none"; 
}

slideIndex++;
if (slideIndex > x.length) {slideIndex = 1} 
x[slideIndex-1].style.display = "inline"; 
setTimeout(slider, 3000);

}

I know that i should use marginLeft property to make the images showed from left to right, but I don't know how to use this property in the code. Any help/hint would be really appreciated!

HTML code:

     <div class="container">
                <section class="content"> 
                        <div id="img1" class="slide">
                            <h2>...</h2>
                            <p>....</p>
                        </div>
                        <div id="img2" class="slide">
                            <h2>....</h2>
                            <p>....</p>
                        </div>
                </section>
            </div>

Answer 1

Maybe you could add a "slideOut" animation class

    var slideIndex = 0;
    slider();
    function slider() {
        var i;
        var x = document.getElementsByClassName("part");
        for (i = 0; i < x.length; i++) {
            x[i].classList.remove("slide");
            x[i].classList.remove("slideOut");
            x[i].className += " slideOut";
        }
        slideIndex++;
        if (slideIndex > x.length) {
            slideIndex = 1
        }
        x[slideIndex - 1].classList.remove("slideOut");
        x[slideIndex - 1].style.display = "inline";
        x[slideIndex - 1].className += " slide";
        setTimeout(slider, 1500);
    }

  .content {
            position: relative;
            width: 100px;
            height: 100px;
            overflow: auto;
        }

        .row {
            margin: 0 auto;
            width: 50%;
        }

        .slide {
            position: absolute;
            left: -100px;
            width: 100px;
            height: 100px;
            -webkit-animation: slide 0.5s forwards;
            -webkit-animation-delay: 0.5s;
            animation: slide 0.5s forwards;
            animation-delay: 0.5s;
        }

        @-webkit-keyframes slide {
            100% {
                left: 0;
            }
        }

        @keyframes slide {
            100% {
                left: 0;
            }
        }

        .slideOut {
            position: absolute;
            left: 0px;
            width: 100px;
            height: 100px;
            -webkit-animation: slideOut 0.5s forwards;
            -webkit-animation-delay: 0.5s;
            animation: slideOut 0.5s forwards;
            animation-delay: 0.5s;
        }

        @-webkit-keyframes slideOut {
            100% {
                left: 100px;
            }
        }

        @keyframes slideOut {
            100% {
                left: 100px;
            }
        }

        #img1 {
            background: red;
            text-align: center
        }

        #img2 {
            background: blue;
            text-align: center
        }

        #img3 {
            background: greenyellow;
            text-align: center
        }

        #img4 {
            background: orangered;
            text-align: center
        }

<div class="row">
    <section class="content">
        <div id="img1" class="part"><img src="" alt="">
            <h3>1</h3></div>
        <div id="img2" class="part"><img src="" alt="">
            <h3>2</h3></div>
        <div id="img3" class="part"><img src="" alt="">
            <h3>3</h3></div>
        <div id="img4" class="part"><img src="" alt="">
            <h3>4</h3></div>
    </section>
</div>