Как создать рабочий слайдер с помощью HTML и CSS?

Опубликовано: 5 Января, 2022

Ползунок - это набор кадров в последовательности, которые можно перемещать соответственно. В этой статье демонстрируется подход к созданию слайд-шоу с использованием только HTML и CSS.

Сначала введите базовый HTML-код, а затем добавьте переключатели для кадров, используя тип в качестве переключателя. После этого последовательно реализуйте конструкции кадров. С помощью margin-left кадры можно настраивать и перемещать с помощью переключателей, а также меток элементов управления. В рамки также может быть включено изображение, а не текст. Благодаря этому браузер потребляет меньше памяти и меньше вычислительной мощности.

Учитывая документ HTML и CSS для создания слайдера.

Первый раздел: этот раздел содержит HTML-часть страницы. Слайды, которые необходимо показать, определяются с соответствующим им текстом.

HTML-код:

HTML

<!DOCTYPE html>
<html>
    
<body>
    <div id="frame">
        <input type="radio" name="frame" id="frame1" checked />
        <input type="radio" name="frame" id="frame2" />
        <input type="radio" name="frame" id="frame3" />
        <input type="radio" name="frame" id="frame4" />
        <div id="slides">
            <div id="overflow">
                <div class="inner">
                    <div class="frame frame_1">
                        <div class="frame-content">
                            <h2>Slide 1</h2>
                        </div>
                    </div>
                    <div class="frame frame_2">
                        <div class="frame-content">
                            <h2>Slide 2</h2>
                        </div>
                    </div>
                    <div class="frame frame_3">
                        <div class="frame-content">
                            <h2>Slide 3</h2>
                        </div>
                    </div>
                    <div class="frame frame_4">
                        <div class="frame-content">
                            <h2>Slide 4</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="controls">
            <label for="frame1"></label>
            <label for="frame2"></label>
            <label for="frame3"></label>
            <label for="frame4"></label>
        </div>
        <div id="bullets">
            <label for="frame1"></label>
            <label for="frame2"></label>
            <label for="frame3"></label>
            <label for="frame4"></label>
        </div>
    </div>
</body>
    
</html>

Второй раздел: этот раздел состоит из всех стилей, которые будут использоваться для создания слайд-шоу. Анимация, которая будет использоваться для перемещения каждого из слайдов, определяется установкой свойства margin-left в соответствии с требованиями для каждого слайда. Это создает впечатление плавного перехода между слайдами.

Код CSS:

CSS

 #frame {
    margin : 0 auto ;
    width : 800px ;
    max-width : 100% ;
    text-align : center ;
 }
 
#frame input[type=radio] {
    display : none ;
 }
 
#frame label {
    cursor : pointer ;
    text-decoration : none ;
 }
 
#slides {
    padding : 10px ;
    border : 5px solid #0F0 ;
    background : #00F ;
    position : relative ;
    z-index : 1 ;
 }
 
#overflow {
    width : 100% ;
    overflow : hidden ;
 }
 
#frame 1: checked~#slides .inner {
    margin-left : 0 ;
 }
 
#frame 2: checked~#slides .inner {
    margin-left : -100% ;
 }
 
#frame 3: checked~#slides .inner {
    margin-left : -200% ;
 }
 
#frame 4: checked~#slides .inner {
    margin-left : -300% ;
 }
 
#slides .inner {
    transition: margin- left 800 ms
        cubic-bezier( 0.770 , 0.000 , 0.175 , 1.000 );
    width : 400% ;
    line-height : 0 ;
    height : 300px ;
 }
 
#slides .frame {
    width : 25% ;
    float : left ;
    display : flex;
    justify- content : center ;
    align-items: center ;
    height : 100% ;
    color : #FFF ;
 }
 
#slides .frame_ 1 {
    background : #90C ;
 }
 
#slides .frame_ 2 {
    background : #F90 ;
 }
 
#slides .frame_ 3 {
    background : #606 ;
 }
 
#slides .frame_ 4 {
    background : #C00 ;
 }
 
#controls {
    margin : -180px 0 0 0 ;
    width : 100% ;
    height : 50px ;
    z-index : 3 ;
    position : relative ;
 }
 
#controls label {
    transition: opacity 0.2 s ease-out;
    display : none ;
    width : 50px ;
    height : 50px ;
    opacity: . 4 ;
 }
 
#controls label:hover {
    opacity: 1 ;
 }
 
#frame 1: checked~#controls label:nth-child( 2 ),
 #frame 2: checked~#controls label:nth-child( 3 ),
 #frame 3: checked~#controls label:nth-child( 4 ),
 #frame 4: checked~#controls label:nth-child( 1 ) {
    background :
 url ( https://image.flaticon.com/icons/svg/ 130 / 130884 .svg) no-repeat ;
    float : right ;
    margin : 0 -50px 0 0 ;
    display : block ;
 }
 
#frame 1: checked~#controls label:nth-last-child( 2 ),
 #frame 2: checked~#controls label:nth-last-child( 3 ),
 #frame 3: checked~#controls label:nth-last-child( 4 ),
 #frame 4: checked~#controls label:nth-last-child( 1 ) {
    background :
 url ( https://image.flaticon.com/icons/svg/ 130 / 130882 .svg) no-repeat ;
    float : left ;
    margin : 0 0 0 -50px ;
    display : block ;
 }
 
#bullets {
    margin : 150px 0 0 ;
    text-align : center ;
 }
 
#bullets label {
    display : inline- block ;
    width : 10px ;
    height : 10px ;
    border-radius: 100% ;
    background : #ccc ;
    margin : 0 10px ;
 }
 
#frame 1: checked~#bullets label:nth-child( 1 ),
 #frame 2: checked~#bullets label:nth-child( 2 ),
 #frame 3: checked~#bullets label:nth-child( 3 ),
 #frame 4: checked~#bullets label:nth-child( 4 ) {
    background : #444 ;
 }
 
@media screen and ( max-width : 900px ) {
    #frame 1: checked~#controls label:nth-child( 2 ),
    #frame 2: checked~#controls label:nth-child( 3 ),
    #frame 3: checked~#controls label:nth-child( 4 ),
    #frame 4: checked~#controls label:nth-child( 1 ),
    #frame 1: checked~#controls label:nth-last-child( 2 ),
    #frame 2: checked~#controls label:nth-last-child( 3 ),
    #frame 3: checked~#controls label:nth-last-child( 4 ),
    #frame 4: checked~#controls label:nth-last-child( 1 ) {
        margin : 0 ;
    }
    #slides {
        max-width : calc( 100% - 140px );
        margin : 0 auto ;
    }
 }

Полный код: здесь мы объединим два вышеупомянутых раздела в один для достижения упомянутой задачи.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < style >
        #frame {
            margin: 0 auto;
            width: 800px;
            max-width: 100%;
            text-align: center;
        }
 
        #frame input[type=radio] {
            display: none;
        }
 
        #frame label {
            cursor: pointer;
            text-decoration: none;
        }
 
        #slides {
            padding: 10px;
            border: 5px solid #0F0;
            background: #00F;
            position: relative;
            z-index: 1;
        }
 
        #overflow {
            width: 100%;
            overflow: hidden;
        }
 
        #frame1:checked~#slides .inner {
            margin-left: 0;
        }
 
        #frame2:checked~#slides .inner {
            margin-left: -100%;
        }
 
        #frame3:checked~#slides .inner {
            margin-left: -200%;
        }
 
        #frame4:checked~#slides .inner {
            margin-left: -300%;
        }
 
        #slides .inner {
            transition: margin-left 800ms
                cubic-bezier(0.770, 0.000, 0.175, 1.000);
            width: 400%;
            line-height: 0;
            height: 300px;
        }
 
        #slides .frame {
            width: 25%;
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            color: #FFF;
        }
 
        #slides .frame_1 {
            background: #90C;
        }
 
        #slides .frame_2 {
            background: #F90;
        }
 
        #slides .frame_3 {
            background: #606;
        }
 
        #slides .frame_4 {
            background: #C00;
        }
 
        #controls {
            margin: -180px 0 0 0;
            width: 100%;
            height: 50px;
            z-index: 3;
            position: relative;
        }
 
        #controls label {
            transition: opacity 0.2s ease-out;
            display: none;
            width: 50px;
            height: 50px;
            opacity: .4;
        }
 
        #controls label:hover {
            opacity: 1;
        }
 
        #frame1:checked~#controls label:nth-child(2),
        #frame2:checked~#controls label:nth-child(3),
        #frame3:checked~#controls label:nth-child(4),
        #frame4:checked~#controls label:nth-child(1) {
            background:
 url( https://image.flaticon.com/icons/svg/130/130884.svg ) no-repeat;
            float: right;
            margin: 0 -50px 0 0;
            display: block;
        }
 
        #frame1:checked~#controls label:nth-last-child(2),
        #frame2:checked~#controls label:nth-last-child(3),
        #frame3:checked~#controls label:nth-last-child(4),
        #frame4:checked~#controls label:nth-last-child(1) {
            background:
 url( https://image.flaticon.com/icons/svg/130/130882.svg ) no-repeat;
            float: left;
            margin: 0 0 0 -50px;
            display: block;
        }
 
        #bullets {
            margin: 150px 0 0;
            text-align: center;
        }
 
        #bullets label {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background: #ccc;
            margin: 0 10px;
        }
 
        #frame1:checked~#bullets label:nth-child(1),
        #frame2:checked~#bullets label:nth-child(2),
        #frame3:checked~#bullets label:nth-child(3),
        #frame4:checked~#bullets label:nth-child(4) {
            background: #444;
        }
 
        @media screen and (max-width: 900px) {
 
            #frame1:checked~#controls label:nth-child(2),
            #frame2:checked~#controls label:nth-child(3),
            #frame3:che
            

                    
                                            Technical Scripter
                                            Вопросы о Web технологиях 
                                            Picked
                                            HTML
                                            CSS-Misc
                                            HTML-Misc
                                            CSS
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИTrovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023


    


        
            
                
                    
                        
                        < PROGLER >
                    
                
                
                    
                        Общее
                        
                        Контакты
                        Политика конфиденциальности
                    
                    
                        Обучение
                        Блог
                    
                
            
            
                © progler.ru 2025. Все права защищены.