{"id":26740,"date":"2023-03-23T10:49:52","date_gmt":"2023-03-23T03:49:52","guid":{"rendered":"https:\/\/www.caodangvietmy.edu.vn\/?p=26740"},"modified":"2023-04-05T13:57:44","modified_gmt":"2023-04-05T06:57:44","slug":"cach-tao-slider-voi-css-va-javascript","status":"publish","type":"post","link":"https:\/\/www.caodangvietmy.edu.vn\/en\/cach-tao-slider-voi-css-va-javascript\/","title":{"rendered":"How to Create a Slider with CSS and JavaScript"},"content":{"rendered":"

Ng\u00f4n ng\u1eef Css v\u00e0 Javascript l\u00e0 ng\u00f4n ng\u1eef gi\u00fap ch\u00fang ta thi\u1ebft k\u1ebf page nh\u1eb9 nh\u00e0ng nh\u01b0ng \u0111\u1ea7y s\u1ef1 quy\u1ebfn r\u0169. V\u1edbi nh\u1eefng d\u1ea1ng slider nh\u01b0 th\u1ebf n\u00e0y th\u00ec vi\u1ec7c gi\u00fap ng\u01b0\u1eddi truy c\u1eadp v\u00e0o trang web s\u1ebd t\u1eadp trung h\u01a1n so v\u1edbi c\u00e1c giao di\u1ec7n kh\u00e1c.<\/strong><\/span><\/p>\n

\u0110\u1ec3 t\u1ea1o slider, c\u00e1c b\u1ea1n theo d\u00f5i nh\u1eefng h\u01b0\u1edbng d\u1eabn d\u01b0\u1edbi \u0111\u00e2y.<\/span><\/p>\n

<\/span><\/p>\n

B\u01b0\u1edbc 1<\/strong>: T\u1ea1o c\u1ea5u tr\u00fac Website<\/span><\/p>\n

\"Graphical<\/span><\/p>\n

B\u01b0\u1edbc 2<\/strong>: D\u00f9ng c\u00f4ng c\u1ee5 thi\u1ebft k\u1ebf web b\u1ea5t k\u1ef3, v\u00ed d\u1ee5 nh\u01b0 visual studio code. Sau \u0111\u00f3 m\u1edf website MyAlbum \u0111\u1ec3 b\u1eaft \u0111\u1ea7u thi\u1ebft k\u1ebf<\/span><\/p>\n

\"A<\/span><\/p>\n

B\u01b0\u1edbc 3<\/strong>: T\u1ea1o trang web c\u00f3 t\u00ean album.html c\u00f3 c\u1ea5u tr\u00fac nh\u01b0 sau:<\/span><\/p>\n

\"Graphical<\/span><\/p>\n

B\u01b0\u1edbc 4:<\/strong> tr\u00ecnh b\u00e0y n\u1ed9i dung cho trang web, hi\u1ec3n th\u1ecb c\u00e1c h\u00ecnh \u1ea3nh l\u00ean web<\/span><\/p>\n

<div class=”slider”><\/span><\/p>\n

<div class=”slide slide-1″><\/span><\/p>\n

<div class=”slide-bg”><\/div><\/span><\/p>\n

<div class=”slide-content”><\/span><\/p>\n

<div class=”slide-image”><\/span><\/p>\n

<img src=”images\/VM1.jpeg”><\/span><\/p>\n

<\/div><\/span><\/p>\n

<div class=”slide-text”><\/span><\/p>\n

<p><\/span><\/p>\n

Th\u1eadt Tuy\u1ec7t V\u1eddi!<\/span><\/p>\n

<\/p><\/span><\/p>\n

<\/div><\/span><\/p>\n

<\/div><\/span><\/p>\n

<\/div><\/span><\/p>\n

<div class=”slide slide-2″><\/span><\/p>\n

<div class=”slide-bg”><\/div><\/span><\/p>\n

<div class=”slide-content”><\/span><\/p>\n

<div class=”slide-image”><\/span><\/p>\n

<\/span><\/p>\n

<img src=”images\/VM2.jpeg”><\/span><\/p>\n

<\/div><\/span><\/p>\n

<div class=”slide-text”><\/span><\/p>\n

<p><\/span><\/p>\n

H\u1ecdc C\u00f4ng Ngh\u1ec7 Th\u00f4ng Tin T\u1ea1i Vi\u1ec7t M\u1ef9 Th\u1eadt D\u1ec5<\/span><\/p>\n

<\/p><\/span><\/p>\n

<\/div><\/span><\/p>\n

<\/div><\/span><\/p>\n

<\/div><\/span><\/p>\n

<div class=”slide slide-3″><\/span><\/p>\n

<div class=”slide-bg”><\/div><\/span><\/p>\n

<div class=”slide-content”><\/span><\/p>\n

<div class=”slide-image”><\/span><\/p>\n

<\/span><\/p>\n

<img src=”images\/VM3.jpeg”><\/span><\/p>\n

<\/div><\/span><\/p>\n

<div class=”slide-text”><\/span><\/p>\n

<p><\/span><\/p>\n

Okay Ch\u1ecdn C\u00f4ng Ngh\u1ec7 Th\u00f4ng Tin \u0110\u1ec3 Tho\u1ea3 \u0110am M\u00ea N\u00e0o!<\/span><\/p>\n

<\/p><\/span><\/p>\n

<\/div><\/span><\/p>\n

<\/div><\/span><\/p>\n

<\/div><\/span><\/p>\n

<\/div><\/span><\/p>\n

<div class=”slider-controls”><\/span><\/p>\n

<button type=”button” class=”btn-slide-previous” onclick=”previousSlide()”>&#10094<\/button><\/span><\/p>\n

<button type=”button” class=”btn-slide-next” onclick=”nextSlide()”>&#10095<\/button><\/span><\/p>\n

<\/div><\/span><\/p>\n

B\u01b0\u1edbc 5:<\/strong> L\u00e0m \u0111\u1eb9p trang b\u1eb1ng css t\u1ea1i muc style<\/span><\/p>\n

* {<\/span><\/p>\n

font-family: sans-serif;<\/span><\/p>\n

}<\/span><\/p>\n

body {<\/span><\/p>\n

margin: 0;<\/span><\/p>\n

}<\/span><\/p>\n

.slider {<\/span><\/p>\n

width: 100%;<\/span><\/p>\n

height: 100vh;<\/span><\/p>\n

}<\/span><\/p>\n

.slide {<\/span><\/p>\n

width: 100%;<\/span><\/p>\n

height: 0;<\/span><\/p>\n

display: flex;<\/span><\/p>\n

visibility: hidden;<\/span><\/p>\n

overflow: hidden;<\/span><\/p>\n

}<\/span><\/p>\n

.slide.active {<\/span><\/p>\n

display: flex;<\/span><\/p>\n

height: 100%;<\/span><\/p>\n

visibility: visible<\/span><\/p>\n

}<\/span><\/p>\n

.slide-bg {<\/span><\/p>\n

height: 100%;<\/span><\/p>\n

clip-path: polygon(0 0, 0 90%, 150% 0%);<\/span><\/p>\n

z-index: 1;<\/span><\/p>\n

position: absolute;<\/span><\/p>\n

top: -100%;<\/span><\/p>\n

width: 100%;<\/span><\/p>\n

}<\/span><\/p>\n

.slide.active>.slide-bg {<\/span><\/p>\n

top: 0;<\/span><\/p>\n

-webkit-transition: all 1s ease;<\/span><\/p>\n

-moz-transition: all 1s ease;<\/span><\/p>\n

-ms-transition: all 1s ease;<\/span><\/p>\n

-o-transition: all 1s ease;<\/span><\/p>\n

transition: all 1s ease;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-image>img {<\/span><\/p>\n

z-index: 2;<\/span><\/p>\n

opacity: 0;<\/span><\/p>\n

}<\/span><\/p>\n

.slide.active .slide-image>img {<\/span><\/p>\n

opacity: 1;<\/span><\/p>\n

-webkit-transition: opacity 2ss ease-in;<\/span><\/p>\n

-moz-transition: opacity 2s ease-in;<\/span><\/p>\n

-ms-transition: opacity 2s ease-in;<\/span><\/p>\n

-o-transition: opacity 2s ease-in;<\/span><\/p>\n

transition: opacity 2s ease-in;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-image>img {<\/span><\/p>\n

max-height: 100%;<\/span><\/p>\n

max-width: 100%;<\/span><\/p>\n

z-index: 1;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-content {<\/span><\/p>\n

max-width: 900px;<\/span><\/p>\n

max-height: 90%;<\/span><\/p>\n

margin: auto;<\/span><\/p>\n

z-index: 2;<\/span><\/p>\n

position: relative;<\/span><\/p>\n

padding-left: 150px;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-image-bg {<\/span><\/p>\n

width: 0;<\/span><\/p>\n

height: 100%;<\/span><\/p>\n

position: absolute;<\/span><\/p>\n

top: 0;<\/span><\/p>\n

z-index: 1<\/span><\/p>\n

}<\/span><\/p>\n

.slide.active .slide-image-bg {<\/span><\/p>\n

width: 100%;<\/span><\/p>\n

-webkit-transition: all 1s ease;<\/span><\/p>\n

-moz-transition: all 1s ease;<\/span><\/p>\n

-ms-transition: all 1s ease;<\/span><\/p>\n

-o-transition: all 1s ease;<\/span><\/p>\n

transition: all 1s ease;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-text {<\/span><\/p>\n

background-color: #fff;<\/span><\/p>\n

padding: 1em 2em;<\/span><\/p>\n

position: absolute;<\/span><\/p>\n

top: 40%;<\/span><\/p>\n

left: -100%;<\/span><\/p>\n

z-index: 3;<\/span><\/p>\n

width: 250px;<\/span><\/p>\n

box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.2);<\/span><\/p>\n

text-align: justify;<\/span><\/p>\n

}<\/span><\/p>\n

.slide.active .slide-text {<\/span><\/p>\n

left: 0;<\/span><\/p>\n

-webkit-transition: all 2s ease;<\/span><\/p>\n

-moz-transition: all 2s ease;<\/span><\/p>\n

-ms-transition: all 2s ease;<\/span><\/p>\n

-o-transition: all 2s ease;<\/span><\/p>\n

transition: all 2s ease;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-1 .slide-text {<\/span><\/p>\n

border-left: 10px solid darkslategray;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-1 .slide-bg {<\/span><\/p>\n

background-color: cadetblue;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-2 .slide-text {<\/span><\/p>\n

border-left: 10px solid burlywood;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-2 .slide-bg {<\/span><\/p>\n

background-color: antiquewhite;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-3 .slide-text {<\/span><\/p>\n

border-left: 10px solid darkslateblue;<\/span><\/p>\n

}<\/span><\/p>\n

.slide-3 .slide-bg {<\/span><\/p>\n

background-color: deepskyblue;<\/span><\/p>\n

}<\/span><\/p>\n

.slider-controls {<\/span><\/p>\n

position: absolute;<\/span><\/p>\n

z-index: 5;<\/span><\/p>\n

bottom: 25px;<\/span><\/p>\n

right: 25px;<\/span><\/p>\n

}<\/span><\/p>\n

.btn-slide-next,<\/span><\/p>\n

.btn-slide-previous {<\/span><\/p>\n

cursor: pointer;<\/span><\/p>\n

width: 60px;<\/span><\/p>\n

height: 50px;<\/span><\/p>\n

color: #000;<\/span><\/p>\n

font-weight: bold;<\/span><\/p>\n

font-size: 20px;<\/span><\/p>\n

transition: 0.6s ease;<\/span><\/p>\n

user-select: none;<\/span><\/p>\n

background-color: #fff;<\/span><\/p>\n

border: 1px solid #000;<\/span><\/p>\n

}<\/span><\/p>\n

.btn-slide-previous:hover,<\/span><\/p>\n

.btn-slide-next:hover {<\/span><\/p>\n

background-color: #000;<\/span><\/p>\n

border: 1px solid #fff;<\/span><\/p>\n

color: #fff;<\/span><\/p>\n

}<\/span><\/p>\n

B\u01b0\u1edbc 6:<\/strong> B\u01b0\u1edbc cu\u1ed1i c\u00f9ng s\u1eed d\u1ee5ng javascript l\u00e0m cho trang c\u00f3 s\u1ef1 t\u01b0\u01a1ng t\u00e1c v\u1edbi ng\u01b0\u1eddi d\u00f9ng \u2013 Ngh\u0129a l\u00e0 khi ng\u01b0\u1eddi d\u00f9ng click chu\u1ecdt v\u00e0o c\u00e1c n\u00fat m\u0169i t\u00ean th\u00ec h\u00ecnh s\u1ebd thay \u0111\u1ed5i<\/span><\/p>\n

document.addEventListener(“DOMContentLoaded”, function() {<\/span><\/p>\n

setTimeout(function() {<\/span><\/p>\n

document.querySelector(“.slide”).classList.add(“active”);<\/span><\/p>\n

}, 500)<\/span><\/p>\n

});<\/span><\/p>\n

function nextSlide() {<\/span><\/p>\n

let currSlide = document.querySelector(“.slide.active”),<\/span><\/p>\n

nextSlide = currSlide.nextElementSibling;<\/span><\/p>\n

currSlide.classList.remove(“active”);<\/span><\/p>\n

if (nextSlide) {<\/span><\/p>\n

nextSlide.classList.add(“active”);<\/span><\/p>\n

} else {<\/span><\/p>\n

document.querySelectorAll(“.slide”)[0].classList.add(“active”);<\/span><\/p>\n

}<\/span><\/p>\n

}<\/span><\/p>\n

function previousSlide() {<\/span><\/p>\n

let currSlide = document.querySelector(“.slide.active”),<\/span><\/p>\n

prevSlide = currSlide.previousElementSibling,<\/span><\/p>\n

slideCount = document.querySelectorAll(“.slide”).length;<\/span><\/p>\n

currSlide.classList.remove(“active”);<\/span><\/p>\n

if (prevSlide) {<\/span><\/p>\n

prevSlide.classList.add(“active”);<\/span><\/p>\n

} else {<\/span><\/p>\n

document.querySelectorAll(“.slide”)[slideCount – 1].classList.add(“active”);<\/span><\/p>\n

}<\/span><\/p>\n

}<\/span><\/p>\n

K\u1ebft Lu\u1eadn:<\/strong> Sau h\u01b0\u1edbng d\u1eabn tr\u00ean c\u00e1c b\u1ea1n \u0111\u00e3 t\u1ea1o ra \u0111\u01b0\u1ee3c m\u1ed9t album \u1ea3nh d\u01b0\u1edbi d\u1ea1ng slider th\u1eadt \u0111\u1eb9p. T\u1eeb \u0111\u00e2y, c\u00e1c b\u1ea1n s\u1ebd c\u00f3 th\u00eam nhi\u1ec1u s\u1ef1 l\u1ef1a ch\u1ecdn trong vi\u1ec7c \u0111i t\u00ecm nh\u1eefng \u00fd t\u01b0\u1edfng v\u1ec1 slider<\/span><\/p>\n

\n","protected":false},"excerpt":{"rendered":"

CSS and Javascript are languages that help us design pages that are both lightweight and captivating. Slider designs like these help visitors focus more on the website compared to other interfaces. To create a slider, follow these steps\u2026<\/p>","protected":false},"author":63,"featured_media":26741,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,877,851,626,850],"tags":[],"_links":{"self":[{"href":"https:\/\/www.caodangvietmy.edu.vn\/en\/wp-json\/wp\/v2\/posts\/26740"}],"collection":[{"href":"https:\/\/www.caodangvietmy.edu.vn\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.caodangvietmy.edu.vn\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.caodangvietmy.edu.vn\/en\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.caodangvietmy.edu.vn\/en\/wp-json\/wp\/v2\/comments?post=26740"}],"version-history":[{"count":0,"href":"https:\/\/www.caodangvietmy.edu.vn\/en\/wp-json\/wp\/v2\/posts\/26740\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.caodangvietmy.edu.vn\/en\/wp-json\/wp\/v2\/media\/26741"}],"wp:attachment":[{"href":"https:\/\/www.caodangvietmy.edu.vn\/en\/wp-json\/wp\/v2\/media?parent=26740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.caodangvietmy.edu.vn\/en\/wp-json\/wp\/v2\/categories?post=26740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.caodangvietmy.edu.vn\/en\/wp-json\/wp\/v2\/tags?post=26740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}