Penggeser gambar responsif dengan teks html css

Halo semuanya. Dalam video ini, Anda akan mempelajari cara mendesain Slider Gambar Responsif (Slideshow / Carousel) dengan Tombol Navigasi Manual dan fungsi Navigasi Putar Otomatis hanya menggunakan javascript murni. Di Slider Gambar ini, Anda dapat menambahkan lebih banyak gambar yang Anda inginkan tanpa mengubah gaya CSS apa pun karena transisi gambar manual dan transisi gambar putar otomatis bekerja dengan javascript vanilla. Penggeser gambar ini sepenuhnya responsif dan sangat baik untuk layar perangkat apa pun. Dan ada judul teks dan deskripsi paragraf teks pada setiap gambar di slider

First, create the index.html file and the style.css file. After you created these two files, Add the responsive meta tag and link the style.css file in between tags to the index.html file. Then start the HTML part of the responsive image slider in the index.html file as you can see in the video. After the HTML part of the image slider is complete, then go to the style.css file and do the styling part of the product card as you can see in the video. After the styling part with the responsive styling part of the image slider is complete, then go to the index.html file to start the javascript part of the image slider manual and auto transitions. In the index.html file before the body close tag open tags and then complete the javascript part of the image slider to transition images when clicking navigation buttons and auto transition on a time out as you can see in the video. Here we are using CSS clip-path property to the slide transition. So that's all, Hope this video will be helpful to design an awesome responsive image slider using HTML, CSS, and Vanilla Javascript.

Direkomendasikan untukmu

• Penggeser Gambar Responsif Dengan Tombol Berikutnya & Sebelumnya. Putar Otomatis - Jeda/Putar

Anda Mungkin Juga Suka

• Menu Bilah Samping. Dengan Sub Menu
• Bilah Navigasi Lengket Responsif. Untuk Situs Web
• Kartu Produk Responsif. Dengan Tampilan Popup Cepat
• Animasi Kursor. Saat Mousemove, Mouseout, Mouse Berhenti
• Mengungkapkan Elemen Situs Web Pada Gulir. Pada Halaman Gulir ke Bawah

Semua kode sumber dan file sumber dan tersedia untuk diunduh dari sini. Gunakan tombol unduh atau salin dan tempel kode dari editor teks. Pendapat saya adalah pertama coba lakukan dengan mengikuti video baris demi baris. Ini akan membantu Anda untuk memahami semua itu. Setelah itu, jika kode Anda salah atau tidak berfungsi, gunakan kode sumber yang diberikan untuk membandingkannya dengan kode Anda. Ini akan membantu Anda untuk memahami semua kesalahan Anda

Di blog Responsive Image Slider ini, terdapat tiga gambar namun hanya akan muncul satu gambar di bagian depan. Ada tombol di sisi kiri dan kanan gambar yang bekerja secara manual dengan mengklik di kedua sisi tombol. Tombol-tombol ini menggeser gambar-gambar ini maju dan mundur satu per satu dengan satu klik tombol. Dengan mengklik tombol, Anda dapat meneruskan atau memundurkan gambar sesuai keinginan

Ada tiga tombol bulat di bagian bawah gambar, yang memungkinkan Anda mengeklik gambar mana pun yang Anda pilih atau inginkan. Fungsi forward, backward, dan onclick ini dilakukan dengan menggunakan JavaScript. Properti kueri media CSS telah digunakan untuk membuat laman web menjadi responsif.

Kode sumber Slider Gambar Responsif ini diberikan di bawah ini, jika Anda menginginkan kode sumber program ini, Anda dapat menyalinnya. Anda dapat menggunakan Penggeser Gambar Responsif ini dengan kreativitas Anda dan dapat membawa proyek ini ke tingkat selanjutnya

Penggeser Gambar Responsif [Kode Sumber]

Untuk membuat website ini, Anda ingin membuat tiga file. file HTML, file CSS & file JavaScript. Pertama, buat file HTML dengan nama index. html dan ingat, Anda harus membuat file dengan a. ekstensi html

<. DOCTYPE html>

1 / 3

Teks Keterangan

2 / 3

Caption Two

3 / 3

Teks Tiga

❮

CSS menyediakan gaya ke halaman HTML. Untuk bentuk halaman yang menarik buatlah sebuah file CSS dengan nama style. css dan ingat bahwa Anda harus membuat file dengan a. ekstensi css

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0;
    background: #f2709c;  
    background: -webkit-linear-gradient(to right, #ff9472, #f2709c);  
    background: linear-gradient(to right, #ff9472, #f2709c); 
}
.mySlides {display: none}
img {vertical-align: middle;
height:500px;
border-radius: 10px;
}
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin:20px auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width:auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius:10px;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 10px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #202124;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
.credit{
    text-align: center;
    color: #202124;
    padding-top:15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

JavaScript membuat halaman berfungsi secara fungsional. Terakhir, buat file JavaScript dengan nama skrip. js, dan ingat bahwa Anda harus membuat file dengan a. ekstensi js