• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать слайдер для сайта на HTML + CSS (Как самостоятельно создать красивый слайдер для сайта)
Создать слайдер для сайта на HTML + CSS
Kosten
Дата: Вторник, 2019-01-08, 22:14 | Сообщение 1
Администраторы
Сообщений:23569
Награды: 56


Иногда нужно на сайт поставить слайдер, который отвечает за функцию, можно сказать та же навигация. Но бывает такое, что необходимо установка на запланированное время, где можно выставить простой слайдер, что по своей стилистике и дизайну не как не будет отличатся от других.

Но разве немного другие эффекты, это простая смена изображение, но здесь главное чтоб все отлично работало, где можете изначально посмотреть на демонстраций.



HTML

Код
<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>


CSS

Код
    .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;
    }


На этом вся установка, где имеем полностью рабочий слайд с переключателями.

Демонстрация
Прикрепления: 0111308.jpg(24.8 Kb) · sdrtv.zip(2.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать слайдер для сайта на HTML + CSS (Как самостоятельно создать красивый слайдер для сайта)
  • Страница 1 из 1
  • 1
Поиск: