Create an Slider in HTML CSS and Javascript step by step

Hello mọi người chào mừng mọi người quay trở lại với kênh YouTube của lồng đèn trong bài tập ngày hôm nay chúng mình sẽ cùng nhau đi tạo dựng một slide điều quan trọng đó là trong bài tập này mọi người sẽ có cách làm Slide đơn giản hơn có một cách nhìn bao quát và dễ hiểu hơn về slide từ đó có thể dễ dàng sáng tạo và biến những sáng tạo của mọi người trở thành cos nếu mọi người thấy hay cho mình xin 1 Follow nhé Cảm ơn mọi người rất nhiều Và

giờ chúng ta bắt đầu nè đầu tiên là công đoạn chuẩn bị mình sẽ tạo ra 3 file đó là Index và cuối cùng là một file mình tiến hành nhúng lên CF bạn và cả lên switch Ngoài ra thì các bạn sử dụng đầu tiên đây là một thư viện hỗ trợ chúng ta tạo ra những ai cần trang web nhanh hơn mình copy luôn lên đầu tiên này sau đó mình sẽ dán ngay sau lưng Style và tiến hành trang web đây là trang web hiện tại của bọn mình tiếp tục đến với

phần tạo khung mình khai báo một container và một cái gồm có một email làm logo và đương nhiên nó còn có class đó là Logo tiếp tục trong nó sẽ là một cái ul chứa menu Cơ bản mình sẽ ghi bàn và con giờ mình sẽ wifi đầu tiên là sẽ khai báo body cho nó một cái tiếp tục đó là một cái phone family là bằng your Ok tiếp tục đối với Container là bằng 1.000 Pixel một cái nghe là bằng 600 Pixel 50% dùng Translate lui về bên trái 50 và lui lên

top 50 để căn vào giữa tiếp tục mình cho nó một cái background email và sử dụng credient để làm màu cho nó với hai màu khác nhau màu đầu tiên sẽ dùng trung tâm nhất và màu thứ hai sẽ rời ra ngoài việc thì đây chính là tiếp tục mình cho một cái overlail những gì nằm bên ngoài sẽ biến mất giờ đi đến với logo trước khi đến với logo thì mình sẽ đi đến với logo trước thì header này mình sẽ cho nó một cái để nó có thể quy định đó là

nó cách tắt mình không nó sẽ 100% logo nằm trong How do vậy như thế này mình sẽ cho logo này nó có một cái một cái hang cũng bằng 40 pixel để không bị rớt hàng tiếp tục là đến với ul và chọn x sẽ cho nó một cái bằng không một cái meging cũng bằng 0 và cũng Display ai bằng blog để nằm cùng một hàng với cái logo và một cái transform để căn chỉnh vị trí thôi một cái Play nó sẽ tăng lên trên Tab bằng tầm Âm 14 Pixel sau đó

là mình di chuyển đi xuống đây và chọn đến li đối với lại y mình cũng cho nó mục đích Play bằng inline để nằm chung một hàng sau đó thì mình sẽ cho nó thêm một cái bonsai bằng 13 Pixel là được đối với logo này header này thì mình sẽ cho nó một cái Pixel chúng ta đã xong phần logo và header tiếp tục bây giờ mình sẽ quay về Index và tạo ra hai cái thanh điều hướng để làm cho nó như sau nó sẽ nằm ở trong header sau đó unider nó

sẽ có một classional chúng ta truy cập vào trang chủ giờ mình chọn vào icon Sau đó mình điền là led để tìm ra biểu tượng qua bên trái đây Bây giờ mình sẽ chọn một cái icon bất kỳ nha mọi người thích icon nào thì cứ chọn thôi Mình sẽ chọn một cái nào đơn giản thôi Mình sẽ chọn cái này Mình thích bạn Sau đó sẽ hiện lên một cái model Để mình chọn lấy cái mạng của nó đây sau đó mình sẽ đóng cho mày lại Bên cạnh đó thì một thời gian

nó xuống dưới đây và khi Lấy bằng rồi và giờ mình sẽ làm việc khai báo một cái mình dán xuống đây và khai báo một cái sân này mình sẽ cho nó một cái bằng 50 Pixel và một cái nghe bằng 50 Pixel sau đó thì mình sẽ cho nó một cái color màu trắng một cái background color thì sẽ là trên spearl nghĩa là trong suốt không có màu gì cả và brother thì mình cho điểm Việt Nam để không dùng border thì opacity này nè mình sẽ cho lên 1 để nó nhìn

rõ ràng như ban đầu đối với slide đối với thẻ slide thì mình sẽ cho nó một TechOne Ok giờ đến các iTunes để nhận phần relatin và 100% Ngoài ra mình chỉ cần phải biết là bằng 1 giờ đến với những cái hình bên trong nó thì sao nó sẽ nằm trong class tên là IMEI email Bây giờ mình chỉ muốn cho nó tầm khoảng 75% thôi không quá bự một cái tép online bằng Center một cái Display bằng Black để làm gì để mình có thể căn chỉnh vị trí của tấm hình nằm

ở vị trí nào đó Center trong classema sẽ có một thẻ IMEI thì bây giờ thẻ email này mình sẽ cho nó một cái vít là tầm 65% thôi một cái Trends để nhận Amazon tiếp theo và có một cái hia bằng 60 Pixel một cái vít sẽ bằng 60% của mẹ nó một cái background color bằng màu đen và phải có một cái đây chính là nó mình sẽ không phải viết bằng tâm 1 để nằm sau tấm hình sau đó mình sẽ cho nó một cái đĩa bằng 50% để và cuối cùng mình

sẽ dùng một cái bóng hơn tầm 30 phút khi email này được photo mèo thì IMEI này dùng transform zoom lên tầng 1.1 nghĩa là nó lớn hơn 1.1 lần so với ban đầu và phải là người hình ảnh đã xong Tiếp tục cho đến phần content bên trong content bên trong nó gồm có 2 loại cầm tay là một bên trái và một bên phải thì bây giờ mình sẽ làm bên trái trước thì đương nhiên nó đều nằm trong một classon sau đó là một thẻ decription để làm thông tin giới thiệu sau

đó thì chúng ta sẽ đến với một cái bức ảnh để làm nút xem thêm Ngoài ra thì mình sẽ copy cái icon này nè mình dán vào nó Ok chính là nó giờ qua xin phép chúng ta làm việc như sau nó nằm trong tình trạng và Pink Vậy thì chúng ta cho một cái lúc để có thể căn chỉnh vị trí bên led cho nó mình sẽ cho nó cách led tầm 40 feet giờ đi có thể hack một bên trong thì hết 1 bên trong là của trăm mét vậy thì nét cho

đến H1 thì sao đối với thể H1 này mình sẽ cho nó một cái bự vào bự nhất có thể thì mình dùng đây rất bự rồi nha mọi người tiếp tục mình cho một cái mainboard tầm 10 Pixel tiếp tục giờ đến với thầy cái đây thì theo mình sẽ bonsai cho nó thật nhỏ vào thì là đấy Ok tiếp tục là đến với thẻ bức tranh có chữ Border một cách color sẽ bằng màu trắng đây chính là nó và ngoài ra thì mình muốn ba cái dấu gạch ngang này cách xa nó

một tí thì sao mình sẽ dựa vào cái cái thẻ y đầu tiên trong nó cái đầu tiên chính là cái mũi tên đầu tiên một nhà chỉ chúng ta đã xong cái đầu tiên giờ tiếp tục quay lại chúng ta làm việc với cái thứ hai đó là bên ngoài thì sao đây chúng ta có một lá thư cấu hình sau đó là điểm hẹn ulton với lại y như thế này chẳng hạn là năm sản xuất ok xuống cái này tôi có thể hát hay thì sao mình lại copy như thế này đối

với thẻ độ dày là tầm 500 đối với những trong đây cũng được nhỏ thôi một cái Toshiba một cái màu hơi sáng so với màu đen này tiếp tục đối với cái tệp ở vị trí 1 mình muốn đậm hơn mình cho thêm dung dịch không không thể thứ hai thì sao ngày thứ hai là những thẻ bên trong có chữ có 2022 đó thì mình không quen này mình cho tiền 100 Vậy là xong chúng ta đã hoàn thành các bước tạo hình bây giờ đến phần logic Quan trọng là như sau mọi

người chỉ cần quan tâm với cho mình như thế này thứ nhất hiện tại ở đây mình đang có 5 item trong slide và đánh dấu từ không được chưa mình luôn như thế này 200 đầu tiên luôn có hiệu ứng LG hiệu ứng LD là hiệu ứng bị biến mất dần và thay cho Active thứ hai người Được chưa vậy bây giờ mình chỉ cần quan tâm 2 vị trí đầu tiên này thôi những vị trí sau mình sẽ cho nó biến mất bởi vì nó đang trong hàng chờ nó không thuộc ao cũng

không thuộc các tiên cái không là cái vị trí it mình sẽ cho nó một cái hiệu ứng bị out còn cái vị trí tiếp theo mình sẽ cho nó một hiệu ứng được Active để nó hiện lên màn hình để người dùng có thể nhìn Ok và tiếp tục nếu mình muốn thay đổi cái itel thì đơn giản là mình chỉ cần kéo lùi nó về phía sau một đơn vị thì bây giờ cái thứ hai này nè là cái đầu tiên còn cái một này nè là cái ao còn bị giết không này

thì sao mình sẽ dời nó ra sau được chưa vậy luôn luôn là như thế này ai tâm đầu tiên là ao ai tâm thứ hai sẽ là ác tiên cho dù bạn muốn next thêm cái thứ ba đi chăng nữa thì nó buồn như thế này mà đúng không Qua đây và Số 1 khi ra ngoài rồi sẽ được rời ra sau vậy thì số 2 bây giờ được ao và số 3 được acti nhưng vị trí nó vẫn là số 1 và số 2 được chưa vị trí là đầu tiên và cái thứ

hai đó vậy bây giờ những cái không thuộc hai cái vị trí này mình sẽ cho ẩn đi còn những cái thuộc vị trí này mình sẽ cho nó hiện lên và bắt đầu tạo ra hiệu ứng áp dụng công thức này nha Và bây giờ mình tiến hành thực hiện cú click để thay đổi vị trí cho nó luôn Mình dùng khi được Click vào [Vỗ tay] Bạn đôi khi mình Ủa và chọn lấy clip ID đầu tiên ở đây với mọi người chính là vị trí đầu tiên và sau đó lấy vị trí

đầu tiên thay vào vị trí cuối cùng đó bán dịch là như vậy đúng không giờ mình thử lại nhé chấm lên ph -1 là vị trí cuối cùng và để thay vào vị trí đầu tiên thì phải dùng đây chính là nó tạo chiều ngược lại thôi mọi người đầu tiên thì nó sẽ bị biến mất nó nhỏ lại thành không luôn thì nó sẽ bị biến nhỏ lại dần nhỏ qua bên trong đó Ok chúng ta đã xong tiếp tục thì bây giờ mình sẽ cho cái thẻ Thứ hai này được giành quyền

ưu tiên Nghĩa là sao thì để dành được quyền ưu tiên nó thì mình sẽ cho cái giá cho nó cao lên ở vị trí thứ hai Ngoài ra thì nó sẽ bị dời lên bên trên tầm 100% và nó có hiệu ứng filter cùng với nó thì sẽ có một cây fram tạo hiệu ứng Edition đó là thành tình yêu ai cầm ở vị trí đầu tiên chọn hoang phẩy và cái thứ hai chấm nét Thì là Animation cho đến container hiệu ứng trong vòng 1,5 giây chạy một lần và giữ lại còn cái

ai tâm ở vị trí thứ hai thì sao nó sẽ có nhận được cái là contenting để tạo hiệu ứng chữa được zoom vào containing vậy là xong bọn mình chạy thử xem có lỗi gì không nha đó Mình lưu lại và chạy Lần Nữa rồi mình tiến hành chạy như sau ok ok