Как сделать не стандартный css слайдер?

html { 
    overflow-x: hidden; 
    width: 100%; 
} 
 
.main { 
    padding: 3.5em 0 0 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 940px; 
    padding-bottom: 45px; 
} 
 
#slider { 
    height: 160px; 
    width: 4000px; 
    overflow: visible; 
    word-spacing: -.36em; 
    line-height: 0; 
    position: absolute; 
} 
 
.slide { 
    width: 180px; 
    height: 160px; 
    background-color: green; 
    display: inline-block; 
    word-spacing: normal; 
    margin-right: 10px; 
    border-radius: 4px; 
} 
 
.slider__buttons input[type="radio"] { 
    display: none; 
} 
 
.slider__buttons label { 
    background-image: url(../img/unchecked.svg); 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-right: 30px; 
    width: 25px; 
    height: 25px; 
    cursor: pointer; 
    float: left; 
} 
 
.slider__buttons input[type="radio"]:checked + label { 
    background-image: url(../img/checked.svg); 
    background-repeat: no-repeat; 
    background-position: center; 
} 
 
.marginfix { 
    margin-top: 180px; 
    padding-bottom: 30px;  
} 
 
.clearfix::after { 
    content: ""; 
    clear: both; 
    display: table; 
}

<div class="main clearfix"> 
            <h2 class="arcticle__header">ILLUSTRATIVE WORKS</h2> 
            <p class="arcticle__text">Sed suscipit risus vel sapien fringilla elementum. Donec vulputate sapien suscipit nulla tincidunt sodales. Ut ut nisi in nisl convallis ultricies!<br> 
                Curabitur tristique faucibus tincidunt. Donec rutrum mi faucibus nisi luctus sodales facilisis neque semper.</p> 
                <div id="slider" class="clearfix"> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                </div> 
                <div class="slider__buttons marginfix"> 
                    <input name="1" type="radio" id="radio1" checked> 
                    <label for="radio1"></label> 
                    <input name="1" type="radio" id="radio2"> 
                    <label for="radio2"></label> 
                    <input name="1" type="radio" id="radio3"> 
                    <label for="radio3"></label> 
                    <input name="1" type="radio" id="radio4"> 
                    <label for="radio4"></label> 
                </div> 
            <h2 class="arcticle__header">GRAPHICAL WORKS</h2> 
            <p class="arcticle__text">Sed suscipit risus vel sapien fringilla elementum. Donec vulputate sapien suscipit nulla tincidunt sodales. Ut ut nisi in nisl convallis ultricies!<br> 
                Curabitur tristique faucibus tincidunt. Donec rutrum mi faucibus nisi luctus sodales facilisis neque semper.</p> 
                <!--Slider--> 
            <h2 class="arcticle__header">CORPORATES</h2> 
            <p class="arcticle__text">Sed suscipit risus vel sapien fringilla elementum. Donec vulputate sapien suscipit nulla tincidunt sodales. Ut ut nisi in nisl convallis ultricies!<br> 
                Curabitur tristique faucibus tincidunt. Donec rutrum mi faucibus nisi luctus sodales facilisis neque semper.</p> 
                <!--Slider-->