Halo semuanya. Dalam video ini, Anda akan mempelajari cara mendesain Image Slider (slideshow/carousel) dengan Putar Otomatis dan Navigasi Manual menggunakan CSS, HTML, dan Javascript. Navigasi manual dengan tombol dan Anda dapat menavigasi ke slide apa pun menggunakan tombol ini. Navigasi putar otomatis mengubah slide secara otomatis karena pengatur waktu yang diatur dengan menggunakan javascript. Mari kita lihat cara mendesain penggeser gambar yang mengagumkan ini

First, create the index.html file and the style.css file. After you created these two files, Start the HTML part of the 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 link the style.css file to the index.html file between the tags. Then complete the styling part of the image slider as you can see in the video. After you complete the styling part of the image slider then go back to the index.htm file to code the javascript part of the image slider slide transition. In the index.html file before the body tag close open the tags and complete the javascript part of the image slider slide transition interval function in between that tags. So that's hope this video will be helpful to design an attractive image slider using CSS, HTML, and Javascript.

Direkomendasikan untukmu

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

Anda Mungkin Juga Suka

• Menu Bilah Samping. Dengan Sub Menu
• Penggeser Gambar Responsif. Dengan Tombol Manual & Visibilitas Navigasi Putar Otomatis
• 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

HTML

Bungkus dengan div sebagai slide, yang dapat berisi konten apa pun

<div id="slideshow">
  <div>
    <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
  </div>
  <div>
    <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
  </div>
  <div>
    Pretty cool eh? This slide is proof the content can be anything.
  </div>
</div>

CSS

Slide harus benar-benar ditempatkan di dalam bungkusnya. Ini memiliki sedikit pizazz ekstra

#slideshow { 
  margin: 50px auto; 
  position: relative; 
  width: 240px; 
  height: 240px; 
  padding: 10px; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  right: 10px; 
  bottom: 10px; 
}

jQuery

Jalankan setelah DOM siap

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
  .fadeOut(1000)
  .next()
  .fadeIn(1000)
  .end()
  .appendTo('#slideshow');
}, 3000);

Lihat itu

CodePen Embed Fallback

Yang sangat mirip dari Snook

Setelah mendapatkan banyak umpan balik, hari ini saya memiliki rencana untuk berbagi dengan Anda pemutaran otomatis tayangan slide CSS murni tanpa JavaScript. Muncul dengan dukungan navigasi titik. Selain itu, ini juga mendukung teks judul dan deskripsi pada setiap gambar slider. Anda dapat dengan mudah menyesuaikan teks tajuk dengan mengedit CSS

Fungsi hebat lainnya dari penggeser ini, ini mendukung fungsi putar otomatis. Itu artinya memungkinkan Anda untuk mengatur apakah penggeser menggeser gambar secara otomatis atau tidak

Setiap penggeser gambar khusus CSS memiliki cara pembuatan dan fungsionalitasnya sendiri. Slider ini tidak mendukung fungsi thumbnail tetapi Anda dapat melihat slider gambar thumbnail CSS kami yang juga dibuat dengan CSS

Tapi Ini adalah carousel yang sepenuhnya responsif dan mendukung berbagai browser termasuk IE. Ini memiliki beberapa opsi animasi untuk memungkinkan menggeser slider dengan cara yang berbeda

Anda dapat dengan mudah memilih versi yang Anda suka. Anda hanya perlu memanggil file CSS terpisah, dan file HTML-nya sama kecuali versi ringannya. Versi yang lebih ringan tidak memiliki legenda atau peluru

Penggeser ini dibuat oleh Elitewares dan dia telah melakukan pekerjaan dengan baik. Itu membuat penggeser tanpa menyentuh javascript dan menyediakan semua kemungkinan fungsi yang memiliki penggeser jquery sederhana

Slider mencakup efek kiri ke kanan, kanan ke kiri, atas ke bawah dan bawah ke atas. Itu juga memungkinkan menambahkan teks overlay dengan animasi

Hal penting dan signifikan tentang slider ini adalah autoplay dengan peluru. Artinya, ketika slide mengubah gambar, itu akan menggantikan poin status secara otomatis

Struktur HTML untuk Tampilan Slide Otomatis

Saya tidak akan menjelaskan kepada Anda seluruh proses tetapi beberapa hal yang diperlukan. Anda akan mendapatkan kode sumber lengkap dan demo di bawah ini. Ok sekarang mari kita lihat HTML

Sebelum saya melanjutkan, saya ingin menyebutkan bahwa HTML agak rumit dibandingkan dengan slider lainnya. Perlu menambahkan beberapa div tambahan, tetapi ini mungkin karena fungsinya yang luar biasa

Slider HTML dimulai dengan ID utama slider dan selanjutnya, ia memiliki nama kelas div anak slides yang menampung setiap slide

<div id="slider">
  <div class="slides">
	........	
  </div>
  <div class="switch">
    <ul>
      <li>
        <div class="on"></div>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Titik-titik sakelar ditempatkan tepat di bawah div anak slides dan ditentukan dengan daftar yang tidak diurutkan. Setiap LI mewakili titik

Selanjutnya, setiap id slider didefinisikan dengan nama kelas slider dan kita perlu menempatkan tepat di bawah,slides Seperti contoh di bawah ini

<div id="slider">
  <div class="slides">
	
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Lorem ipsum dolor</h1>
          <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
        </div>
      </div>
      <div class="image">
        <img src="https://img11.hostingpics.net/pics/767361311.jpg">
      </div>
    </div>

  </div>
  <div class="switch">
    <ul>
      <li>
        <div class="on"></div>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Sekarang Anda dapat melihat div slider memiliki beberapa div anak dan konten HTML dll. Anda juga dapat melihat nama kelas div

<div id="slider">
  <div class="slides">
	
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Lorem ipsum dolor</h1>
          <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
        </div>
      </div>
      <div class="image">
        <img src="https://img11.hostingpics.net/pics/767361311.jpg">
      </div>
    </div>

  </div>
  <div class="switch">
    <ul>
      <li>
        <div class="on"></div>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

CSS untuk Tayangan Slide Putar Otomatis

ID penggeser berfungsi dengan mengatur lebar dan tinggi. Itu juga membutuhkan posisi relatif dan luapan tersembunyi

#slider{
  width:100%;
  height:500px;
  position:relative;
  overflow:hidden;
}

Mirip, kelas slide membutuhkan lebar dan tinggi dengan posisi relatif. Itu juga perlu menambahkan animasi slide yang akan dibuat menggunakan properti @keyframe CSS

.slides{
  width:400%;
  height:100%;
  position:relative;
  -webkit-animation:slide 30s infinite;
  -moz-animation:slide 30s infinite;
  animation:slide 30s infinite;
}

Setiap rumus slide digunakan mirip dengan banyak slider berbasis CSS lainnya, dan membagi lebar dari slider angka. Seperti jika mereka memiliki total empat slider maka rumusnya akan terlihat seperti 100%/4 = 25%

.slider{
  width:25%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}

Untuk membuatnya responsif, perlu mengatur lebar dan tinggi menjadi 100% untuk gambar slider dan div gambar. Baris CSS murni berikut menampilkan item tayangan slide yang responsif dengan fitur putar otomatis tanpa JavaScript apa pun

.slide img{
  width:100%;
  height:100%;
}
.image{
  width:100%;
  height:100%;
}
.image img{
  width:100%;
  height:100%;
}

Ini awalnya CSS membutuhkan slider untuk membuatnya berfungsi tetapi agar terlihat sempurna dan berfungsi dengan fungsinya, lihat saja demo di atas

Bagaimana Anda membuat penggeser otomatis di CSS?

Bagaimana cara membuat slider putar otomatis di HTML dan CSS?

(with Autoplay at the beginning)