Как создать рабочий слайдер с помощью HTML и CSS?
Ползунок - это набор кадров в последовательности, которые можно перемещать соответственно. В этой статье демонстрируется подход к созданию слайд-шоу с использованием только 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 : 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 : 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
РЕКОМЕНДУЕМЫЕ СТАТЬИ |