<div class='mainsna-medomai'>
    <input type="radio" name="slider4" id="slider4_1" checked="checked">
    <label for="slider4_1"></label>
    <label for="slider4_4"></label>
    <label for="slider4_2"></label>

    <input type="radio" name="slider4" id="slider4_2">
    <label for="slider4_2"></label>
    <label for="slider4_1"></label>
    <label for="slider4_3"></label>

    <input type="radio" name="slider4" id="slider4_3">
    <label for="slider4_3"></label>
    <label for="slider4_2"></label>
    <label for="slider4_4"></label>

    <input type="radio" name="slider4" id="slider4_4">
    <label for="slider4_4"></label>
    <label for="slider4_3"></label>
    <label for="slider4_1"></label>

    <div>
        <div>
            <p>Делаем для сайта</p>
            <img src='Ссылка на изображение' alt=''>
        </div><div>
            <p>Содержимое кадров</p>
            <img src='Ссылка на изображение' alt=''>
        </div><div>
            <p>Старое изображение</p>
            <img src='Ссылка на изображение' alt=''>
        </div><div>
            <p>Слайдер с эффектом прокрутки</p>
            <img src='Ссылка на изображение' alt=''>
        </div>
    </div>

</div>

    .mainsna-medomai {
        width: 400px;
        height: 250px;
        border: 8px solid #fff;
        box-shadow: 1px 1px 4px #666;
        border-radius: 5px;
        position: relative;
        text-align: center;
        overflow: hidden;
    }

    .mainsna-medomai > input {
        display: none;
    }

    .mainsna-medomai > input + label {
        width: 10px;
        height: 10px;
        border-radius: 8px;
        background: rgba(90, 90, 90, 0.5);
        border: 2px solid rgba(190, 190, 190, 1);

        cursor: pointer;

        z-index: 100;
        position: relative;

        display: inline-block;
        margin-right: 4px;
        top: 90%;

        transition: border 0.8s ease-out 0s;
    }

    .mainsna-medomai > input + label:after {
        content: ' ';
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        border: 2px solid rgba(90, 90, 90, 0.8);
        background: rgba(230, 230, 230, 1);
        opacity: 0;
        transition: opacity 0.8s ease-out 0s;
    }

    .mainsna-medomai > input + label:hover,
    .mainsna-medomai > input:checked + label {
        border: 2px solid rgba(230, 230, 230, 1);
    }

    .mainsna-medomai > input:checked + label:after {
        opacity: 1;
    }

    .mainsna-medomai > input + label + label,
    .mainsna-medomai > input + label + label + label {
        display: none;
    }

    .mainsna-medomai > input:checked + label + label,
    .mainsna-medomai > input:checked + label + label + label {
        display: block;
        width: 50px;
        height: 50px;

        opacity: 0.4;
        transition: opacity 0.8s ease-out 0s;

        cursor: pointer;

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
    }

    .mainsna-medomai > input:checked + label + label:hover,
    .mainsna-medomai > input:checked + label + label + label:hover {
        opacity: 0.6;
    }

    .mainsna-medomai > input:checked + label + label {
        left: 0px;
        background: url('https://lh3.googleusercontent.com/-tacAA4lVYgc/VeVDqFrDRRI/AAAAAAAAAT4/RBongekAUqI/s800-Ic42/prev.png')
    }

    .mainsna-medomai > input:checked + label + label + label {
        right: 0px;
        background: url('https://lh3.googleusercontent.com/-gy6RMZnCdAc/VeVDqJF1S5I/AAAAAAAAAT0/D4nN8T9RGro/s800-Ic42/next.png')
    }

    .mainsna-medomai > div {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        z-index: 0;
        width: 1000%;
        text-align: left;
        transition: left 800ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    }

    .mainsna-medomai > input:nth-of-type(2):checked ~ div { left: -100%; }
    .mainsna-medomai > input:nth-of-type(3):checked ~ div { left: -200%; }
    .mainsna-medomai > input:nth-of-type(4):checked ~ div { left: -300%; }
    .mainsna-medomai > input:nth-of-type(5):checked ~ div { left: -400%; }
    .mainsna-medomai > input:nth-of-type(6):checked ~ div { left: -500%; }
    .mainsna-medomai > input:nth-of-type(7):checked ~ div { left: -600%; }
    .mainsna-medomai > input:nth-of-type(8):checked ~ div { left: -700%; }
    .mainsna-medomai > input:nth-of-type(9):checked ~ div { left: -800%; }
    .mainsna-medomai > input:nth-of-type(10):checked ~ div { left: -900%; }

    .mainsna-medomai > div > div {
        display: inline-block;
        position: relative;
    }

    .mainsna-medomai > div > div > p {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px 2px #000;
    }