Skip to content Skip to sidebar Skip to footer

PROJECT SLIDE HTML 5

Saya percaya bahwa belajar pengembangan web dalam praktik lebih efektif daripada teori kosong: semuanya jelas, dan solusi yang diperoleh selama pengembangan dapat digunakan dalam proyek masa depan. Karena itulah saya menyiapkan tutorial membuat slider gambar sederhana dengan penjelasan setiap langkahnya.



Catatan: Artikel ini hanya sedikit menyelami dunia pengembangan front-end karena web modern tidak terbatas pada pengetahuan HTML/CSS/JavaScript . Untuk menjadi pengembang web yang dicari, Anda perlu menguasai pustaka dan kerangka kerja tambahan, yang sering kali secara ketat dibagi antara frontend dan backend.


Apa yang kamu butuhkan?



Anda dapat langsung mengunduh IDE seperti WebStorm, tetapi ketika mempelajari pengembangan web dari awal, Anda juga dapat memulai dengan editor online. Kami akan menggunakan CodePen , editor online populer untuk pengembang web dengan hasil instan. Tetapi jika Anda sudah mulai bekerja di lingkungan lain dan berpikir itu jauh lebih nyaman, pastikan ada dukungan HTML / CSS / JavaScript.


Menulis kode



Dalam berbagai kursus pengembangan web, pengenalan front-end dimulai dengan deskripsi teknologi utama, yaitu:


HTML adalah bahasa markup hypertext yang digunakan untuk menulis "kerangka" situs. Jika kita menggambar analogi dengan rumah, maka ini adalah bingkai. Secara kasar, Anda membangun markup, di mana desain akan jatuh.


CSS — Cascading Style Sheets atau desain yang sama. Mari kita kembali ke contoh dengan rumah: setelah membangunnya perlu diperbaiki, dicat, dibuat rapi, dan CSS-lah yang menggambarkan tampilan situs.


JavaScript adalah bahasa pemrograman yang menyediakan fungsionalitas. Anda dapat berinteraksi dengan barang-barang di rumah Anda — menyalakan lampu, peralatan, menyalakan dan mematikan air, dan banyak lagi. Demikian pula, Anda dapat berinteraksi dengan situs dengan mengklik tombol, mengarahkan kursor ke gambar, dan mengisi formulir. JavaScript menangani semua interaksi ini, dan seperti bahasa skrip, JavaScript dapat memberikan aturan dan logika untuk menentukan apa yang harus terjadi selanjutnya.


HTML


Anda harus mulai mempelajari pengembangan web dengan HTML, karena ini adalah kerangka situs. Setiap dokumen HTML memiliki struktur standar:



Code :


<!DOCTYPE html>

<html>

<head>

<title>SLIDE HTML5</title>

</head>

<body>


</body>

</html>


Namun dalam contoh kita, tidak perlu menentukan struktur seluruh halaman, karena kita bekerja dengan komponen terpisah, yang kemudian akan ditempatkan di antara tag <body></body>. Semuanya sederhana di sini: kami memiliki blok utama (tag <div>), yang merupakan induk dan berisi tiga atau lebih blok lagi dengan gambar berbeda - slide mendatang:


Code :


<div class="slider">

    <!-- The first slide -->

    <div class="item">

    <img src="https://1.bp.blogspot.com/-vZEbsDbog1A/X_X8nBCid2I/AAAAAAAACVM/3Gis8YaBymA4P-ShJ4koREIIy4ImYzSiACLcBGAsYHQ/s900/FB_IMG_1609955888595.jpg">

    </div>

    

    <div class="item">

    <img src="https://1.bp.blogspot.com/-eoE-sF6vigg/X_X8m7i73AI/AAAAAAAACVI/J-xgtxsJ59w7EyqyapHXDCQYB3_GbepFwCLcBGAsYHQ/s900/FB_IMG_1609955902427.jpg">

    </div>

    

    <div class="item">

    <img src="https://1.bp.blogspot.com/-wxd1Y2d-fPw/X_X8nPGf4VI/AAAAAAAACVQ/svtAD6TLqI0MTX33VjkPfnhwSKKPd0_sgCLcBGAsYHQ/s831/FB_IMG_1609955878271.jpg">

    </div>

    

    <div class="item">

    <img src="https://1.bp.blogspot.com/-vZEbsDbog1A/X_X8nBCid2I/AAAAAAAACVM/3Gis8YaBymA4P-ShJ4koREIIy4ImYzSiACLcBGAsYHQ/s900/FB_IMG_1609955888595.jpg">

    </div>

    

    <div class="item">

    <img src="https://1.bp.blogspot.com/-eoE-sF6vigg/X_X8m7i73AI/AAAAAAAACVI/J-xgtxsJ59w7EyqyapHXDCQYB3_GbepFwCLcBGAsYHQ/s900/FB_IMG_1609955902427.jpg">

    </div>



Harap dicatat bahwa setiap tag <div>memiliki kelasnya sendiri. Untuk kelas-kelas inilah gaya CSS akan diterapkan. Dalam tag, <img>kami menunjukkan tautan ke gambar-gambar yang akan ditampilkan. Dalam atribut “onclick”, kami merujuk ke fungsi JavaScript tertentu dengan mengikat tindakan klik ke tombol.


CSS


Dalam gaya cascading, kita mengatur lebar, tinggi, posisi, warna, dan animasi. Dalam kasus kami, kami bekerja secara terpisah dengan wadah penggeser, secara terpisah dengan wadah gambar yang ditentukan sebagai item, tombol, menambahkan latar belakang ke dalamnya dan menganimasikan slide:


Code :


/* The slider: */

  .slider{

  max-width: 90%;

  /* The position of the element is set relative to its original position: */

  position: relative;

  /* Center horizontally: */

  margin: auto;

  height: 300px;

  }

  /* The picture is scaled in relation to the parent element: */

  .slider .item img {

  /* The element is resized to fill the block and maintain proportions: */

  object-fit: cover;

  width: 100%;

  height: 300px;

  }

  /* Back and forward buttons: */

  .slider .previous, .slider .next {

  /* Adds an icon to the cursor when it is over the button: */

  cursor: pointer;

  /* The position of the element is set relative to the borders of the browser: */

  position: absolute;

  top: 50%;

  width: auto;

  margin-top: -22px;

  padding: 16px;

  /* Styling the buttons themselves: */

  color: white;

  font-weight: bold;

  font-size: 16px;

  /* Background fading on hover: */

  transition: 0.6s ease;

  /* Rounding the borders: */

  border-radius: 0 3px 3px 0;

  }

  .slider .next {

  right: 0;

  border-radius: 3px 0 0 3px;

  }

  /* When you hover over the buttons, add the background of the buttons: */

  .slider .previous:hover,

  .slider .next:hover {

  background-color: rgba(0, 0, 0, 0.2);

  }

  /* Slide animation: */

  .slider .item {

  animation-name: fade;

  animation-duration: 5s;

  }

  @keyframes fade {

  /* Set and change the transparency: */

  from {

  opacity: 0.4

  }

  to {

  opacity: 1

  }

  }



Kita dapat bereksperimen dengan semua nilai dalam editor. Jika Anda memiliki keraguan tentang salah satu atribut, hapus saja dan lihat apa yang berubah.


JavaScript


Pengembang web yang pelatihannya terbatas pada HTML dan CSS lebih merupakan perancang web. Kami beralih ke bahasa frontend utama, yang mampu menghembuskan kehidupan ke dalam solusi visual:



Code :


/* Setting the default slide start index: */

  let slideIndex = 1;

  /* We call the function that is implemented below: */

  showSlides(slideIndex);

  /* Increase the index by 1 - show the next slide: */

  function nextSlide() {

  showSlides(slideIndex += 1);

  }

  /* Decrease the index by 1 - show the previous slide: */

  function previousSlide() {

  showSlides(slideIndex -= 1);  

  }

  /* Set the current slide: */

  function currentSlide(n) {

  showSlides(slideIndex = n);

  }

  /* Flip function: */

  function showSlides(n) {

  let i;

  /* We refer to the elements with the class name "item", that is, to the pictures: */

  let slides = document.getElementsByClassName("item");

  

  /* Checking the number of slides: */

  if (n > slides.length) {

  slideIndex = 1

  }

  if (n < 1) {

  slideIndex = slides.length

  }

  

  /* Loop through each slide in a for loop: */

  for (let slide of slides) {

  slide.style.display = "none";

  }

  /* Making an element block: */

  slides[slideIndex - 1].style.display = "block";    

  }



Tetapi jangan lupa bahwa JavaScript tidak unik: pustaka dan kerangka kerja modern dapat menyederhanakan pengembangan dan meningkatkan fungsionalitas komponen web. Misalnya, Bootstrap memungkinkan Anda membuat situs web lebih cepat, dan bahkan pengembang pemula pun dapat membuat tata letak yang berfungsi menggunakan kerangka kerja ini. Anda juga dapat menulis penggeser dalam HTML/CSS murni untuk melatih keterampilan Anda dalam tata letak dan lembar gaya berjenjang.


Contoh yang diberikan dalam pelajaran ini cukup sederhana dan dimaksudkan untuk menunjukkan kemungkinan interaksi HTML, CSS, dan JavaScript standar.


Anda Dapat Menggunakan FULL SCORE Code SLIDE HTML 5 berikut ini : 


FULL CODE : 


<!-- Specifying the type of the current document: -->

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>SLIDE HTML 5</title>

  <script type="text/javascript">/* Setting the default slide start index: */

  let slideIndex = 1;

  /* We call the function that is implemented below: */

  showSlides(slideIndex);

  /* Increase the index by 1 - show the next slide: */

  function nextSlide() {

  showSlides(slideIndex += 1);

  }

  /* Decrease the index by 1 - show the previous slide: */

  function previousSlide() {

  showSlides(slideIndex -= 1);  

  }

  /* Set the current slide: */

  function currentSlide(n) {

  showSlides(slideIndex = n);

  }

  /* Flip function: */

  function showSlides(n) {

  let i;

  /* We refer to the elements with the class name "item", that is, to the pictures: */

  let slides = document.getElementsByClassName("item");

  

  /* Checking the number of slides: */

  if (n > slides.length) {

  slideIndex = 1

  }

  if (n < 1) {

  slideIndex = slides.length

  }

  

  /* Loop through each slide in a for loop: */

  for (let slide of slides) {

  slide.style.display = "none";

  }

  /* Making an element block: */

  slides[slideIndex - 1].style.display = "block";    

  }

  </script>

  <style type="text/css">/* The slider: */

  .slider{

  max-width: 90%;

  /* The position of the element is set relative to its original position: */

  position: relative;

  /* Center horizontally: */

  margin: auto;

  height: 300px;

  }

  /* The picture is scaled in relation to the parent element: */

  .slider .item img {

  /* The element is resized to fill the block and maintain proportions: */

  object-fit: cover;

  width: 100%;

  height: 300px;

  }

  /* Back and forward buttons: */

  .slider .previous, .slider .next {

  /* Adds an icon to the cursor when it is over the button: */

  cursor: pointer;

  /* The position of the element is set relative to the borders of the browser: */

  position: absolute;

  top: 50%;

  width: auto;

  margin-top: -22px;

  padding: 16px;

  /* Styling the buttons themselves: */

  color: white;

  font-weight: bold;

  font-size: 16px;

  /* Background fading on hover: */

  transition: 0.6s ease;

  /* Rounding the borders: */

  border-radius: 0 3px 3px 0;

  }

  .slider .next {

  right: 0;

  border-radius: 3px 0 0 3px;

  }

  /* When you hover over the buttons, add the background of the buttons: */

  .slider .previous:hover,

  .slider .next:hover {

  background-color: rgba(0, 0, 0, 0.2);

  }

  /* Slide animation: */

  .slider .item {

  animation-name: fade;

  animation-duration: 5s;

  }

  @keyframes fade {

  /* Set and change the transparency: */

  from {

  opacity: 0.4

  }

  to {

  opacity: 1

  }

  }

  </style>

  </head>

  <body>

    <p>SLIDER</p>

    <! - Main slider block ->

    <div class="slider">

    <!-- The first slide -->

    <div class="item">

    <a href="https://www.alhikmah.my.id/2021/01/wanita-menurut-islam.html?m=1"><img src="https://1.bp.blogspot.com/-vZEbsDbog1A/X_X8nBCid2I/AAAAAAAACVM/3Gis8YaBymA4P-ShJ4koREIIy4ImYzSiACLcBGAsYHQ/s900/FB_IMG_1609955888595.jpg">

    </div>

    

    <div class="item">

    <a href="https://www.alhikmah.my.id/2021/01/wanita-menurut-islam.html?m=1"><img src="https://1.bp.blogspot.com/-eoE-sF6vigg/X_X8m7i73AI/AAAAAAAACVI/J-xgtxsJ59w7EyqyapHXDCQYB3_GbepFwCLcBGAsYHQ/s900/FB_IMG_1609955902427.jpg">

    </div>

    

    <div class="item">

    <a href="https://www.awgroupchannel.my.id/2021/07/live-vidio-aw-group-channel.html"><img src="https://1.bp.blogspot.com/-wxd1Y2d-fPw/X_X8nPGf4VI/AAAAAAAACVQ/svtAD6TLqI0MTX33VjkPfnhwSKKPd0_sgCLcBGAsYHQ/s831/FB_IMG_1609955878271.jpg">

    </div>

    

    <div class="item">

    <a href="https://www.alhikmah.my.id/2021/01/wanita-menurut-islam.html?m=1"><img src="https://1.bp.blogspot.com/-vZEbsDbog1A/X_X8nBCid2I/AAAAAAAACVM/3Gis8YaBymA4P-ShJ4koREIIy4ImYzSiACLcBGAsYHQ/s900/FB_IMG_1609955888595.jpg">

    </div>

    

    <div class="item">

    <a href="https://www.alhikmah.my.id/2021/01/wanita-menurut-islam.html?m=1"><img src="https://1.bp.blogspot.com/-eoE-sF6vigg/X_X8m7i73AI/AAAAAAAACVI/J-xgtxsJ59w7EyqyapHXDCQYB3_GbepFwCLcBGAsYHQ/s900/FB_IMG_1609955902427.jpg">

    </div>

    

    <div class="item">

    <a href="https://kata-h.blogspot.com"><img src="https://1.bp.blogspot.com/-wxd1Y2d-fPw/X_X8nPGf4VI/AAAAAAAACVQ/svtAD6TLqI0MTX33VjkPfnhwSKKPd0_sgCLcBGAsYHQ/s831/FB_IMG_1609955878271.jpg"></a>

    </div>

    <!-- Arrow buttons -->

    <a class="previous" onclick="previousSlide()">&#10094;</a>

    <a class="next" onclick="nextSlide()">&#10095;</a>

    </div>

    <div style = "background-color:#00000; clear:both">

    <center>

    Copyright © 2021 @ <a href="https://www.awgroupchannel.my.id/p/kontak.html">awgroupchannel.com

    </a></center></div>

    <!--

    Copyright (c) 2020, Aw Score Code - Desain by : Aw Group Channel All rights reserved.

    For licensing, see LICENSE.html or https://www.awgroupchannel.my.id/license

    -->

  </body>

</html>



Penggeser gambar siap


Versi terakhir dari penggeser menggunakan beberapa gambar, dua tombol dengan perubahan latar belakang saat melayang, dan animasi transisi yang mulus. Seperti yang dapat Anda lihat dari contoh kami, pelatihan pengembangan web dapat didasarkan pada praktik: ini tidak hanya membangkitkan minat tetapi juga memungkinkan Anda untuk bereksperimen, meningkatkan, mengubah fungsionalitas komponen sesuai kebijaksanaan Anda, sekaligus menambah pengetahuan dan keterampilan.


Sekarang Anda dapat mencoba cara implementasi lain, lanjutkan menggunakan alat tambahan seperti Bootstrap.


Anda dapat berlatih dengan slider lebih keras, dengan efek tambahan, mengandalkan kode dari proyek ini:


Backend dan fitur tambahan


Dan jika Anda menambahkan backend ke apa yang kami miliki, Anda dapat menggunakan API untuk menggunakan gambar dari sumber lain, misalnya, Instagram, atau menyimpan semua gambar di database Anda, tanpa takut gambar akan dihapus dan eksternal link akan menjadi tidak relevan.


Tapi tidak dengan praktek saja: jangan lupa belajar teori, agar tidak mandek lama-lama pada soal-soal yang sulit. Untuk ini, buku atau video cocok. Kursus pengembangan web dari awal juga merupakan cara yang baik untuk menggabungkan teori dan praktik.


Post a Comment for "PROJECT SLIDE HTML 5 "