Простой слайдер на js

function action1() { 
    hideAll(); 
    var img1 = document.getElementById('img1'); 
    img1.style.display = "block"; 
} 
 
function action2(){ 
    hideAll(); 
    var img2 = document.getElementById('img2'); 
    img2.style.display = "block"; 
} 
 
function action3(){ 
    hideAll(); 
    var img3 = document.getElementById('img3'); 
    img3.style.display = "block"; 
} 
 
function hideAll() { 
    var images = document.querySelectorAll('#polosa>img'); 
    for (var i = 0; i < images.length; ++i) { 
        images[i].style.display = 'none'; 
    } 
}

.slider { 
    margin-left: auto; 
    margin-right: auto; 
    height: 128px; 
    width: 128px; 
    border: 1px solid #000; 
    overflow: hidden; 
} 
 
#polosa { 
    height: 128px;   
    display: block; 
} 
#polosa img { 
    display: none; 
} 
.buttons { 
    border: 1px solid #000; 
    width: 128px; 
    height: 50px; 
    margin: 10px auto; 
} 
 
.buttons .button { 
    display: inline-block; 
    vertical-align: middle; 
    width: 15px; 
    height: 15px; 
    background-color: red; 
    margin-top: 16px; 
    margin-left: 18px; 
    cursor: pointer; 
    border-radius: 50%; 
}

<div class="slider"> 
    <div id="polosa"> 
        <img src="https://cdn4.iconfinder.com/data/icons/social-media-2110/64/Facebook-01-128.png" id="img1"> 
        <img src="https://cdn1.iconfinder.com/data/icons/social-vol-2-1/200/4-128.png" id="img2"> 
        <img src="https://cdn3.iconfinder.com/data/icons/social-network-icon/112/vk-128.png" id="img3"> 
    </div> 
</div> 
 
<div class="buttons"> 
    <div class="button" onclick="action1()"></div> 
    <div class="button" onclick="action2()"></div> 
    <div class="button" onclick="action3()"></div> 
</div>