Referans Kaydırıcısı Oluşturun (HTMLve CSS)

KERİM ERBAY · 24 Kas 2023

Bu blogda Codepen ile HTML, CSS ve JavaScript Kullanarak Referans Kaydırıcısının nasıl oluşturulacağını öğreniyoruz. Her Referans Slaytında bir profil fotoğrafı, isim ve referans bulunur.

Referans Kaydırıcısı İçin HTML Kodu: -

< vücut >
< bölüm kimliği= "testim" class = "testim" >
< !-- < div sınıfı = "testim-cover" > -- >
< div sınıfı = "sarma" >
< aralık
kimlik= "sağ ok"
class = "sağ ok fa fa-şivron-sağ"
>< /açıklık >
< span id= "sol-ok" class = "sol ok fa fa-şerit-sol" >< /span >
< ul id= "testim-dots" class = "noktalar" >
< li sınıfı = "nokta etkin" >< /li >
< !-- -- >
< li sınıfı = "nokta" >< /li >
< !-- -- >
< li sınıfı = "nokta" >< /li >
< !-- -- >
< li sınıfı = "nokta" >< /li >
< !-- -- >
< li sınıfı = "nokta" >< /li >
< /ul >
< div id= "testim-content" class = "devam" >
< div sınıfı = "etkin" >
< div sınıfı = "img" >
< resim
src= "https://source.unsplash.com/1600x900/?doğa,su"
alt= ""
/ >
< /div >
< h2 > Lorem P. Ipsum < /h2 >
< p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed eiusmod geçici olay ut emek ve dolore yapar
harika aliqua. Ut enim ad minim veniam, quis nostrud
egzersiz ullamco.
< /p >
< /div >
< div >
< div sınıfı = "img" >
< resim
src= "https://source.unsplash.com/1600x900/?doğa,su"
alt= ""
/ >
< /div >
< h2 > Bay Lorem Ipsum < /h2 >
< p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed eiusmod geçici olay ut emek ve dolore yapar
harika aliqua. Ut enim ad minim veniam, quis nostrud
egzersiz ullamco.
< /p >
< /div >
< div >
< div sınıfı = "img" >
< resim
src= "https://source.unsplash.com/1600x900/?doğa,su"
alt= ""
/ >
< /div >
< h2 > Lorem Ipsum < /h2 >
< p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed eiusmod geçici olay ut emek ve dolore yapar
harika aliqua. Ut enim ad minim veniam, quis nostrud
egzersiz ullamco.
< /p >
< /div >
< div >
< div sınıfı = "img" >
< resim
src= "https://source.unsplash.com/1600x900/?doğa,su"
alt= ""
/ >
< /div >
< h2 > Lorem De Ipsum < /h2 >
< p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed eiusmod geçici olay ut emek ve dolore yapar
harika aliqua. Ut enim ad minim veniam, quis nostrud
egzersiz ullamco.
< /p >
< /div >
< div >
< div sınıfı = "img" >
< resim
src= "https://source.unsplash.com/1600x900/?doğa,su"
alt= ""
/ >
< /div >
< h2 > Bayan Lorem R. Ipsum < /h2 >
< p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed eiusmod geçici olay ut emek ve dolore yapar
harika aliqua. Ut enim ad minim veniam, quis nostrud
egzersiz ullamco.
< /p >
< /div >
< /div >
< /div >
< !-- < /div > -- >
< /bölüm >
< script src= "

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

" >< /script >
< /gövde >

Kahve dükkanının web sitesinde görebileceğimiz gibi, o kahve hakkında çeşitli kaynaklardan gelen çok sayıda müşteri referansının yer aldığı bir inceleme kısmı olacak. Müşteriye ürünlerin ne kadar mükemmel olduğunu göstermek için web sitesine referanslar eklenir. Müşterinin güvenini kazanmak öncelikli amaçtır.

Sırasız bir liste oluşturmak için önce sırasız liste etiketini kullanacağız, ardından yapı eklemek amacıyla referanslarımıza bir resim eklemek için resim etiketini kullanacağız. Biraz içerik ve bunun altına başlık eklemek için h2 ve p etiketlerini kullanacağız. Referans kaydırıcımız için daha fazla bölme ekleyeceğiz.

Referans Kaydırıcısı için tüm Html Kodları mevcuttur. Artık çıktıyı Css ve JavaScript olmadan görebilirsiniz. daha sonra Testimonial Slider'ı şekillendirmek için Css yazıyoruz ve Testimonial Slider'da Sliding animasyonu için JavaScript kullanıyoruz.

Html Kod Çıkışı: -

Referans Kaydırıcısı için CSS Kodu: -

@import url ( //cdn.rawgit.com/rtaibah/dubai-font-cdn/master/dubai-font.css);
*,
*:sonrasında,
*:önce {
kenar boşluğu: 0 ;
dolgu: 0 ;
-webkit-kutusu-boyutlandırma: kenarlık kutusu;
-moz-kutu-boyutlandırma: kenar-kutusu;
-ms-kutusu-boyutlandırma: kenarlık kutusu;
-o-kutu-boyutlandırma: kenarlık kutusu;
kutu boyutlandırma: kenarlık kutusu;
-webkit-user-select: yok;
-ms-user-select: yok;
-o-user-select: yok;
-moz-user-select: yok;
kullanıcı seçimi: yok;
imleç: varsayılan;
}
HTML {
genişlik: % 100 ;
yükseklik: otomatik;
}
vücut {
genişlik: % 100 ;
yükseklik: otomatik;
yazı tipi boyutu: 16 piksel;
yazı tipi ailesi: Dubai-Light;
arka plan: rgba ( 30 , 30 , 30 ) ;
}
.testim {
genişlik: % 100 ;
konum: mutlak;
üst: % 50 ;
-webkit-transform: çeviri ( -50 % ) ;
-moz-transform: çeviri ( -50 % ) ;
-ms-transform: çeviri ( -50 % ) ;
-o-transform: çeviri ( -50 % ) ;
transform: çeviri ( -50 % ) ;
}
.testim .wrap {
konum: göreceli;
genişlik: % 100 ;
maksimum genişlik: 1020 piksel;
dolgu: 40 piksel 20 piksel;
kenar boşluğu: otomatik;
}
.testim .arrow {
Ekran bloğu;
konum: mutlak;
renk: #eee;
imleç: işaretçi;
yazı tipi boyutu: 2em;
üst: % 50 ;
-webkit-transform: TranslateY ( -50 % ) ;
-ms-transform: TranslateY ( -50 % ) ;
-moz-transform: TranslateY ( -50 % ) ;
-o-transform#eeeanslateY ( -50 % ) ;
transform: translateY ( -50 % ) ;
-webkit-transition: tümü 0,3 saniyelik giriş -çıkış kolaylığı;
-ms-geçişi: tümü 0,3 saniyelik giriş -çıkış kolaylığı;
-moz-geçiş: tüm 0,3 saniyelik giriş -çıkış kolaylığı;
-o-geçiş: tümü 0,3 saniyelik giriş -çıkış kolaylığı;
geçiş: tümü 0,3 saniyelik giriş -çıkış kolaylığı;
dolgu: 5px;
z-endeksi: 22222222 ;
}
.testim .arrow:önce {
imleç: işaretçi;
}
.testim .arrow:hover {
renk: #ea830e;
}
.testim .arrow. sol {
sol: 10 piksel;
}
.testim .arrow. Sağ {
sağ: 10 piksel;
}
.testim .noktalar {
metin hizalama: ortala;
konum: mutlak;
genişlik: % 100 ;
alt: 60 piksel;
sol: 0 ;
Ekran bloğu;
z-endeksi: 3333 ;
yükseklik: 12 pik#ea830e.testim .dots .dot {
liste stili türü: yok;
ekran: satır içi blok;
genişlik: 12 piksel;
yükseklik: 12 piksel;
sınır yarıçapı: % 50 ;
kenarlık: 1 piksel katı #eee;
kenar boşluğu: 0 10 piksel;
imleç: işaretçi;
-webkit-geçişi: tümü 0,5 saniyelik giriş -çıkış kolaylığı;
-ms-geçişi: tümü 0,5 saniyelik giriş -çıkış kolaylığı;
-moz-geçiş: tüm 0,5 saniyelik giriş -çıkış kolaylığı;
-o-geçiş: tümü 0,5 saniyelik giriş -çıkış kolaylığı;
g#eee: tümü 0,5 saniyelik giriş -çıkış kolaylığı;
konum: göreceli;
}
.testim .noktalar .nokta. aktif ,
.testim .dots .dot:hover {
arka plan: #ea830e;
kenarlık rengi: #ea830e;
}
.testim .noktalar .nokta. aktif {
-webkit-animasyonu: testim ölçeğinde 0,5 saniyelik ileri doğru giriş -çıkış kolaylığı;
-moz-animasyon: testim ölçeğinde 0,5 sn ileri doğru giriş -çıkış kolaylığı;
-ms-animasyon: testim ölçeğinde 0,5 sn ileri doğru giriş -çıkış kolaylığı;
-o-animasyon: testim ölçeğinde 0,5 sn#ea830edoğru giriş -çıkış kola#ea830e animasyon: testim ölçeğinde 0,5 sn'lik giriş -çıkış kolaylığı ileri;
}
.testim .cont {
konum: göreceli;
taşma: gizli;
}
.testim .cont > div {
metin hizalama: ortala;
konum: mutlak;
üst: 0 ;
sol: 0 ;
dolgu: 0 0 70px 0 ;
opaklık: 0 ;
}
.testim .cont > div. etkin değil {
opaklık: 1 ;
}
.testim .cont > div. aktif {
konum: göreceli;
opaklık: 1 ;
}
.testim .cont div .img img {
Ekran bloğu;
genişlik: 100 piksel;
yükseklik: 100 piksel;
kenar boşluğu: otomatik;
sınır yarıçapı: % 50 ;
}
.testim .cont div h2 {
renk: #ea830e;
yazı tipi boyutu: 1em;
kenar boşluğu: 15 piksel 0 ;
}
.testim .cont div p {
yazı tipi boyutu: 1,15 cm;
renk: #eee;
genişlik: % 80 ;
kenar boşluğu: otomatik;
}
.testim .cont div. aktif .img img {
-webkit-animasyon: testim-show 0,5 saniyelik ileri giriş -çıkış kolaylığı;
-moz-animasyon: testim-show 0,5 sn ileri doğru giriş -çıkış kolaylığı;
-ms-animasyon: testim-show 0,5 sn ileri doğru giriş -çıkış#ea830eığı;
-o-animasyon: testim-show 0,5 sn ileri doğru giriş -çıkış kolaylığı;
animasyon: testim-show 0,5 saniyelik ileri doğru #eeeş -çıkış kolaylığı;
}
.testim .cont div. aktif h2 {
-webkit-animasyon: testim-içerik- 0,4 saniyelik ileri-geri giriş -çıkış kolaylığı ;
-moz-animasyon: testim-content- 0,4 saniyede içeri -dışarı ilerleme kolaylığı ;
-ms-animasyon: testim-içerik- 0,4 saniyede içeri -dışarı ilerleme kolaylığı ;
-o-animasyon: testim-içerik- 0,4 saniyelik ilerleme - çıkış kolaylığı ;
animasyon: testim-içerik- 0,4 saniyelik ileri - geri giriş -çıkış;
}
.testim .cont div. aktif p {
-webkit-animasyon: testim-içerik- 0,5 saniyelik ileri-geri giriş -çıkış kolaylığı ;
-moz-animasyon: testim-içerik- 0,5 saniyelik ilerleme - çıkış kolaylığı;
-ms-animasyon: testim-içerik- 0,5 saniyelik ilerleme - çıkış kolaylığı;
-o-animasyon: testim-içerik- 0,5 saniyelik ilerleme - çıkış kolaylığı;
animasyon: testim-içerik- 0,5 saniyelik ileri - geri giriş -çıkış;
}
.testim .cont div. etkin değil .img img {
-webkit-animasyon: testim-hide 0,5 saniyelik ileri doğru giriş -çıkış kolaylığı;
-moz-animasyon: testim-hide 0,5 saniyelik ileri doğru giriş -çıkış kolaylığı;
-ms-animasyon: testim-hide 0,5 saniyelik ileri doğru giriş -çıkış kolaylığı;
-o-animasyon: testim-hide 0,5 saniyelik ileri doğru giriş -çıkış kolaylığı;
animasyon: testim-hide 0,5 saniyelik ileri doğru giriş -çıkış kolaylığı;
}
.testim .cont div. etkin değil h2 {
-webkit-animasyon: testim-content-out 0,4 saniyelik ileri-geri giriş -çıkış kolaylığı ;
-moz-animation: testim-content-out 0,4 sn ileri doğru giriş -çıkış kolaylığı ;
-ms-animasyon: testim-content-out 0,4 sn ileri doğru giriş -çıkış kolaylığı ;
-o-animasyon: testim-content-out 0,4 sn ileri doğru giriş -çıkış kolaylığı ;
animasyon: testim-content-out 0,4 sn ileri doğru giriş -çıkış kolaylığı;
}
.testim .cont div. etkin değil p {
-webkit-animasyon: testim-content-out 0,5 saniyelik ileri-geri giriş -çıkış kolaylığı ;
-moz-animation: testim-content-out 0,5 saniyelik ileri-geri giriş -çıkış;
-ms-animasyon: testim-content-out 0,5 saniyelik ileri doğru giriş -çıkış kolaylığı ;
-o-animasyon: testim-içerik-çıkışı 0,5 saniyelik ileri doğru giriş -çıkış kolaylığı ;
animasyon: testim-content-out 0,5 sn ileri doğru giriş -çıkış kolaylığı;
}
@-webkit-keyframes testim-scale {
% 0 {
-webkit-kutusu-gölge: 0px 0px 0px 0px #eee;
kutu gölgesi: 0px 0px 0px 0px #eee;
}
% 35 {
-webkit-kutusu-gölge: 0px 0px 10px 5px #eee;
kutu gölgesi: 0px 0px 10px 5px #eee;
}
% 70 {
-webkit-kutusu-gölge: 0px 0px 10px 5px #ea830e;
kutu gölgesi: 0px 0px 10px 5px #ea830e;
}
100 % {
-webkit-kutusu-gölge: 0px 0px 0px 0px #ea830e;
kutu gölgesi: 0px 0px 0px 0px #ea830e;
}
}
@-moz-keyframes testim-scale {
% 0 {
-moz-kutusu-gölge: 0px 0px 0px 0px #eee;
kutu gölgesi: 0px 0px 0px 0px #eee;
}
% 35 {
-moz-kutusu-gölge: 0px 0px 10px 5px #eee;
kutu gölgesi: 0px 0px 10px 5px #eee;
}
% 70 {
-moz-box-gölge: 0px 0px 10#eeepx #ea830e;
kutu gölgesi: 0px 0px#eeex 5px #ea830e;
}
100 % {
-moz-box-gölge: 0px 0px 0p#eeex #ea830e;
kutu gölgesi: 0px 0px 0#eeepx #ea830e;
}
}
@-ms-keyframes testim-scale {
% 0 {
#ea830etusu-gölge: 0px 0px 0px 0px #eee;
#ea830elgesi: 0px 0px 0px 0px #eee;
}
% 35 {
-ms-kutusu-gö#ea830ex 0px 10px 5px #eee;
kutu gölgesi#ea830epx 10px 5px #eee;
}
% 70 {
-ms-box-gölge: 0px 0px 10px 5px #ea830e;
kut#eeelgesi: 0px 0px 10px 5px #ea830e;
}
#eee0 % {
-ms-box-gölge: 0px 0px 0px 0px #ea830e;
ku#eeeölgesi: 0px 0px 0px 0px #ea830e;
}
}
@#eeeeyframes test ölçeği {
% 0 {
-o-kutu-gölge: 0px 0#ea830e0px #eee;
kutu gölgesi: 0px 0px 0p#ea830eeee;
}
% 35 {
-o-kutu-gölge: 0px 0px 10px 5px#ea830e kutu gölgesi: 0px 0px 10px 5px #e#ea830e }
% 70 {
-o-box-gölge: 0px 0px 10px 5px #ea830e;
kutu gölgesi: 0px 0px 1#eee5px #ea830e;
}
100 % {
-o#eee-gölge: 0px 0px 0px 0px #ea830e;
kutu gölgesi: 0px 0px #eee0px #ea830e;
}
}
@keyframes test ölçeğ#eee % 0 {
kutu gölgesi: 0px 0px 0px 0px #eee;
}
#ea830e5 {
kutu gölgesi: 0px 0px 10px 5px#ea830e }
% 70 {
kutu gölgesi: 0px 0px 10px 5px #ea8#ea830e }
100 % {
kutu gölgesi: 0px#ea830ex 0px #ea830e;
}
}
@-webkit-keyframes testim-content- in {
itibaren {
opak#eee 0 ;
-webkit-transform: Translate#eee% 100 ) ;
transform: translateY ( % 100 ) ;
}
#eeee {
opaklık: 1 ;
-webkit-t#eeeform: TranslateY ( 0 ) ;
dönüşüm: TranslateY ( 0 ) #ea830e
}
@-moz-keyframes testim-content- in {
#ea830earen {
opaklık: 0 ;
-moz-transform: Transla#ea830e 100 ) ;
transform: translateY ( #ea830e ;
}
ile {
opaklık: 1 ;
-moz-transform: TranslateY ( 0 ) ;
#eeedönüşüm: TranslateY ( 0 ) ;
}
}
@-ms-keyframes testim-c#eeent- in {
itibaren {
opaklık: 0 ;
-ms-t#ea830em: TranslateY ( % 100 ) ;
transform: translateY ( %#ea830e;
}
ile {
opaklık: 1 ;
-ms-transform: TranslateY ( 0 ) ;
dönüşüm: TranslateY ( 0 ) ;
}
}
@-o-keyframes testim-content- in {
itibaren {
opaklık: 0 ;
-o-transform: TranslateY ( % 100 ) ;
transform: translateY ( % 100 ) ;
}
ile {
opaklık: 1 ;
-o-dönüştürme: TranslateY ( 0 ) ;
dönüşüm: TranslateY ( 0 ) ;
}
}
@keyframes testim-content- in {
itibaren {
opaklık: 0 ;
transform: translateY ( % 100 ) ;
}
ile {
opaklık: 1 ;
dönüşüm: TranslateY ( 0 ) ;
}
}
@-webkit-keyframes testim-content-out {
itibaren {
opaklık: 1 ;
-webkit-transform: TranslateY ( 0 ) ;
dönüşüm: TranslateY ( 0 ) ;
}
ile {
opaklık: 0 ;
-webkit-transform: TranslateY ( -100 % ) ;
transform: translateY ( -100 % ) ;
}
}
@-moz-keyframes testim-content-out {
itibaren {
opaklık: 1 ;
-moz-transform: TranslateY ( 0 ) ;
dönüşüm: TranslateY ( 0 ) ;
}
ile {
opaklık: 0 ;
-moz-transform: TranslateY ( -100 % ) ;
transform: translateY ( -100 % ) ;
}
}
@-ms-keyframes testim-content-out {
itibaren {
opaklık: 1 ;
-ms-transform: TranslateY ( 0 ) ;
dönüşüm: TranslateY ( 0 ) ;
}
ile {
opaklık: 0 ;
-ms-transform: TranslateY ( -100 % ) ;
transform: translateY ( -100 % ) ;
}
}
@-o-keyframes testim-content-out {
itibaren {
opaklık: 1 ;
-o-dönüştürme: TranslateY ( 0 ) ;
dönüşüm: TranslateY ( 0 ) ;
}
ile {
opaklık: 0 ;
transform: translateY ( -100 % ) ;
transform: translateY ( -100 % ) ;
}
}
@keyframes testim-content-out {
itibaren {
opaklık: 1 ;
dönüşüm: TranslateY ( 0 ) ;
}
ile {
opaklık: 0 ;
transform: translateY ( -100 % ) ;
}
}
@-webkit-keyframes testim-show {
itibaren {
opaklık: 0 ;
-webkit-transform: ölçek ( 0 ) ;
dönüşüm: ölçek ( 0 ) ;
}
ile {
opaklık: 1 ;
-webkit-transform: ölçek ( 1 ) ;
dönüşüm: ölçek ( 1 ) ;
}
}
@-moz-keyframes testim-show {
itibaren {
opaklık: 0 ;
-moz-transform: ölçek ( 0 ) ;
dönüşüm: ölçek ( 0 ) ;
}
ile {
opaklık: 1 ;
-moz-transform: ölçek ( 1 ) ;
dönüşüm: ölçek ( 1 ) ;
}
}
@-ms-keyframes testim-show {
itibaren {
opaklık: 0 ;
-ms-transform: ölçek ( 0 ) ;
dönüşüm: ölçek ( 0 ) ;
}
ile {
opaklık: 1 ;
-ms-transform: ölçek ( 1 ) ;
dönüşüm: ölçek ( 1 ) ;
}
}
@-o-keyframes testim-show {
itibaren {
opaklık: 0 ;
-o-dönüştürme: ölçek ( 0 ) ;
dönüşüm: ölçek ( 0 ) ;
}
ile {
opaklık: 1 ;
-o-dönüştürme: ölçek ( 1 ) ;
dönüşüm: ölçek ( 1 ) ;
}
}
@keyframes test-show {
itibaren {
opaklık: 0 ;
dönüşüm: ölçek ( 0 ) ;
}
ile {
opaklık: 1 ;
dönüşüm: ölçek ( 1 ) ;
}
}
@-webkit-keyframes testim-hide {
itibaren {
opaklık: 1 ;
-webkit-transform: ölçek ( 1 ) ;
dönüşüm: ölçek ( 1 ) ;
}
ile {
opaklık: 0 ;
-webkit-transform: ölçek ( 0 ) ;
dönüşüm: ölçek ( 0 ) ;
}
}
@-moz-keyframes testim-hide {
itibaren {
opaklık: 1 ;
-moz-transform: ölçek ( 1 ) ;
dönüşüm: ölçek ( 1 ) ;
}
ile {
opaklık: 0 ;
-moz-transform: ölçek ( 0 ) ;
dönüşüm: ölçek ( 0 ) ;
}
}
@-ms-keyframes testim-hide {
itibaren {
opaklık: 1 ;
-ms-transform: ölçek ( 1 ) ;
dönüşüm: ölçek ( 1 ) ;
}
ile {
opaklık: 0 ;
-ms-transform: ölçek ( 0 ) ;
dönüşüm: ölçek ( 0 ) ;
}
}
@-o-keyframes testim-hide {
itibaren {
opaklık: 1 ;
-o-dönüştürme: ölçek ( 1 ) ;
dönüşüm: ölçek ( 1 ) ;
}
ile {
opaklık: 0 ;
-o-dönüştürme: ölçek ( 0 ) ;
dönüşüm: ölçek ( 0 ) ;
}
}
@keyframes testim-hide {
itibaren {
opaklık: 1 ;
dönüşüm: ölçek ( 1 ) ;
}
ile {
opaklık: 0 ;
dönüşüm: ölçek ( 0 ) ;
}
}
@media tümü ve ( maksimum genişlik: 300 piksel ) {
vücut {
yazı tipi boyutu: 14 piksel;
}
}
@media tümü ve ( maksimum genişlik: 500 piksel ) {
.testim .arrow {
yazı tipi boyutu: 1,5 cm;
}
.testim .cont div p {
satır yüksekliği: 25 piksel;
}
}

CSS'mizin içinde, önce referans kaydırıcımız için bazı yeni Google yazı tiplerini içe aktaracağız ve ardından evrensel seçiciyi kullanarak dolguyu ve kenar boşluğunu "sıfır" ve web boyutlandırmasını "kenarlık kutusu" olarak ayarlayacağız, ardından html özelliğinde genişliği “%100”, yüksekliği ise auto olarak ayarlayacağız.
Referansların stili daha sonra sınıf seçici tekniği kullanılarak eklenecektir. Yazı tipi rengini “beyaz” olarak ayarlamak için font özelliğini, ekranı “block” olarak ayarlamak için display özelliğini kullanacağız. Animasyon ve ana kare özelliklerini kullanarak stil ve kaydırıcıyı referanslara uygulayacağız.

CSS kavramlarını öğrenmek ve projede pratik deneyim kazanmak için CSS'yi bir kez okuyup kendi tarzınızı birleştirmeye çalışmanızı tavsiye ederim.

Artık Css bölümümüzü tamamladık. İşte güncellenmiş çıktımız HTML + CSS.

Html + Css Çıktısı: -

Şimdi Referans Kaydırıcısı işlevi için javascript ekleyin.

Referans Kaydırıcısı için JavaScript Kodu: -

// değişkenler
'kesin kullanın'
var testim = belge. getElementById ( "testim" ) ,
testimDots = Dizi. prototip . dilim . çağrı ( document.getElementById ( "testim-dots " ) . çocuklar ) ,
testimContent = Dizi. prototip . dilim . çağrı ( document.getElementById ( "testim-content " ) . çocuklar ) ,
testimLeftArrow = belge. getElementById ( "sol ok" ) ,
testimRightArrow = belge. getElementById ( "sağ ok" ) ,
testimHız = 4500 ,
akımSlayt = 0 ,
akımAktif = 0 ,
testimZamanlayıcı,
dokunmatikBaşlangıçPos,
dokunmatikEndPos,
dokunmatikPosDiff,
görmezdenDokunma = 30 ;
;

pencere. yükleme = işlev () {

// Testim Komut Dosyası
playSlide işlevi ( slayt ) {
for ( var k = 0 ; k < testimDots.length ; k++ ) {
testimİçerik [ k ] . sınıf Listesi . kaldır ( "aktif" ) ;
testimİçerik [ k ] . sınıf Listesi . kaldır ( "etkin değil" ) ;
testimNoktalar [ k ] . sınıf Listesi . kaldır ( "aktif" ) ;
}

eğer ( slayt < 0 ) {
slayt = currentSlide = testimContent. uzunluk - 1 ;
}

if ( Slide > testimContent.length - 1 ) { _
slayt = geçerliSlayt = 0 ;
}

if ( currentActive != currentSlide ) {
testimContent [ currentActive ] . sınıf Listesi . ekle ( "etkin değil" ) ;
}
testimİçerik [ slayt ] . sınıf Listesi . ekle ( "aktif" ) ;
testimDots [ slayt ] . sınıf Listesi . ekle ( "aktif" ) ;

currentActive = currentSlide;

clearTimeout ( testimTimer ) ;
testimTimer = setTimeout ( function () {
playSlide ( currentSlide += 1 ) ;
} , testimHız )
}

testimLeftArrow. addEventListener ( "tıklayın" , işlev () {
playSlide ( currentSlide -= 1 ) ;
})

testimRightArrow. addEventListener ( "tıklayın" , işlev () {
playSlide ( currentSlide += 1 ) ;
})

for ( var l = 0 ; l < testimDots.length ; l++ ) {
testimDots [ l ] . addEventListener ( "tıklayın" , işlev () {
playSlide ( currentSlide = testimDots.indexOf ( this ) ) ;
})
}

playSlide ( currentSlide ) ;

// Klavye kısayolları
belge. addEventListener ( "anahtar yükleme" , işlev ( e ) {
anahtar ( e.keyCode ) { _
durum 37 :
testimLeftArrow. tıklamak () ;
kırmak;

durum 39 :
testimRightArrow. tıklamak () ;
kırmak;

durum 39 :
testimRightArrow. tıklamak () ;
kırmak;

varsayılan:
kırmak;
}
})

testi. addEventListener ( "dokunmatik başlangıç" , işlev ( e ) {
touchStartPos = e. değişti [ 0 ]' a dokunur . istemciX ;
})

testi. addEventListener ( "dokunma ucu" , işlev ( e ) {
touchEndPos = e. değişti [ 0 ]' a dokunur . istemciX ;

touchPosDiff = touchStartPos - touchEndPos;

konsol. günlük ( touchPosDiff ) ;
konsol. günlük ( touchStartPos ) ;
konsol. log ( touchEndPos ) ;

if ( touchPosDiff > 0 + yoksayTouch ) {
testimLeftArrow. tıklamak () ;
} else if ( touchPosDiff < 0 - yoksayTouch ) {
testimRightArrow. tıklamak () ;
} başka {
geri dönmek ;
}

})
}

Her HTML öğesini seçmek için öncelikle javascript'imizde document.queryselector yöntemini kullanacağız, ardından if else yöntemini kullanacağız. Daha sonra görüntülerin stili, pencere if else yöntemini kullanarak yüklenirken pencere yükleme işlevi kullanılarak eklenecektir ve click olay özelliğini kullanarak, kullanıcı simgelere dokunduğunda olay dinleyicisini düğmeye ekleyeceğiz.