Bagaimana Anda membuat slider di javascript?

Question

Table of Contents Show

Oleh Stefan Vitasovic
Bagaimana saya bisa membuat penggeser?
Bagaimana cara mengatur nilai slider dalam JavaScript?
Bagaimana cara membuat slider menggunakan HTML CSS JavaScript?
Bagaimana cara membuat slider menggunakan JavaScript murni?

Orang suka melihat gambar & grafik dan efek slider adalah salah satu cara terbaik untuk menampilkan ini di situs web. Sebagai seorang desainer, Anda selalu mencari kode penggeser gambar jQuery/JavaScript di google dan mengintegrasikannya dengan desain Anda. Juga sebagian besar desainer berpikir bahwa akan sulit untuk membuat sendiri kode penggeser gambar khusus. Tetapi tidak terlalu sulit jika Anda ingin membuat slider khusus dengan JavaScript

Di sini, di artikel ini saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat efek penggeser khusus untuk gambar dengan menggunakan JavaScript dengan HTML & CSS. Anda harus memiliki pemahaman dasar tentang HTML, CSS & JavaScript dan bagaimana JavaScript berinteraksi dengan objek dom HTML

Pada awalnya kita akan membuat node elemen HTML yang sangat sederhana



 Slide 1

 Slide 1

 Slide 1

Ini menciptakan area kode tayangan slide. Sekarang kita dapat menulis beberapa kode CSS dasar untuk peragaan slide ini

#slider{
position: relative;
width: 300px;
height: 100px;
line-height: 50px;
border: 3px solid black;
text-align: center;
background-color: black;
color: wheat;
overflow: hidden;
}

#slide1, #slide2, #slide3{
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 100px;
text-align: center;
}

.show{
display:block;
}

.hide{
display:none;
}

_

kami dapat membuat Kode JS untuk aplikasi ini. Di sini kami menulis Kode JS untuk ditambahkan

sembunyikan status untuk elemen slide HTML
tampilkan pengaturan status untuk HTML satu slide setelah disembunyikan

Kode JavaScript Untuk ini

var sliderId = "slider";

var count = document.getElementById(sliderId).childElementCount;

function hideAll(){
for(var i = 1; i<=count;i++){
var id = 'slide'+i;
var slide = document.getElementById(sliderId).children[i-1];
slide.className = 'hide';
}
}

function show(no,name,duretion){
hideAll();
var slide = document.getElementById(sliderId).children[no-1];
slide.className = 'show';
slide.style.animationName = name;
slide.style.animationDuration = duretion;
}

show();

Setelah kode ini Jika Anda dapat menggunakan kode untuk animasi

var current = 1;
var time =  5;
var effect =  'show';
var effectTime =  '1s';

// First Time Init
show(current,effect,effectTime);

// Auto Slide Mode
setInterval(function auto(){
if(current>=count){
current = 1;
}else{
current++;
}
show(current,effect,effectTime);
},(1000*time));

Melalui kode ini Anda dapat membuat tayangan slide otomatis dengan durasi 5 detik. sintaks setInterval dapat membuat pemanggilan fungsi animasi. Sintaks ini memberikan aktivitas pemanggilan fungsi berulang kali dan juga dapat mengatur beberapa waktu tunda yang dapat kita gunakan di sini misalnya. setInterval(fungsi(){. },1000);

Tetapi ketika kita menggunakan beberapa efek khusus di slider kita, maka kita perlu membuat beberapa kode CSS untuk gaya dan animasi

@keyframes show{
0%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}

@keyframes shake {
0% {
position: absolute;
background-color: black;
color: white;
left: 0px;
}
25%{
background-color: black;
color: white;
left: -300px;
}
50% {
background-color:white;
color: black;
left: 300px;
}
100% {
background-color: black;
color: wheat;
left: 0px;
}

}

@keyframes zoom {
0%{
background-color: black;
color: white;
left: 145px;
top: 45px;
width: 0px;
height: 0px;
font-size: 9pt;
overflow: hidden;
}
50%{
background-color: white;
color: black;
left: 0px;
top: 0px;
width: 300px;
height: 150px;
font-size: 20pt;
overflow: hidden;
}
100%{
background-color: black;
color: wheat;
left: 0px;
}
}

@keyframes flip{
0%{
background-color: black;
color: black;
opacity: 1.0;
overflow: hidden;
}
50%{
background-color: white;
color: white;
opacity: 1.0;
width: 1px;
left: 150px;
overflow: hidden;
}
100%{
opacity: 1.0;
background-color: black;
}
}

_

Kode ini membuat Slideshow Interaktif Anda. Ini adalah konsep utama Slideshow menggunakan HTML, CSS dan JavaScript tanpa menggunakan jQuery

Ada sejumlah cara untuk mengimplementasikan tata letak layar penuh animasi dengan banyak interaksi manusia, dan banyak pengembang akan menggunakan plugin JavaScript untuk menghemat waktu. Dalam artikel ini, Toptal JavaScript Developer Stefan Vitasovic mendemonstrasikan bagaimana Anda dapat melakukannya hanya dengan menggunakan CSS dan JavaScript, tanpa menyertakan library atau plugin yang membengkak di project Anda

Membagikan

Ada sejumlah cara untuk mengimplementasikan tata letak layar penuh animasi dengan banyak interaksi manusia, dan banyak pengembang akan menggunakan plugin JavaScript untuk menghemat waktu. Dalam artikel ini, Toptal JavaScript Developer Stefan Vitasovic mendemonstrasikan bagaimana Anda dapat melakukannya hanya dengan menggunakan CSS dan JavaScript, tanpa menyertakan library atau plugin yang membengkak di project Anda

Oleh Stefan Vitasovic

Pakar Terverifikasi di bidang Teknik

Stefan adalah insinyur front-end yang terinspirasi oleh tata letak interaktif yang modern. Dia telah mengerjakan ratusan proyek, dengan fokus pada UI dan UX kelas atas