Codepen ile HTML ve CSS Kullanarak Referans Kaydırıcısı Oluşturun

KERİM ERBAY · 23 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.

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.

Umarım blogumuzu beğenirsiniz, o halde Hadi Referans Kaydırıcısı için temel bir html yapısıyla başlayalım.

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" >
< açıklı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 >

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: -

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: -

@import url(//cdn.rawgit.com/rtaibah/dubai-font-cdn/master/dubai-font.css);
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: default;
}
html {
width: 100%;
height: auto;
}
body {
width: 100%;
height: auto;
font-size: 16px;
font-family: Dubai-Light;
background: rgba(30, 30, 30);
}
.testim {
width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translatey(-50%);
-moz-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-50%);
transform: translatey(-50%);
}
.testim .wrap {
position: relative;
width: 100%;
max-width: 1020px;
padding: 40px 20px;
margin: auto;
}
.testim .arrow {
display: block;
position: absolute;
color: #eee;
cursor: pointer;
font-size: 2em;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY#eee%);
-webkit-transition: all 0.3s ease-in-out;
-ms-trans#eeen: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding: 5px;
z-index: 22222222;
}
.testim .arrow:before {
cursor: pointer;
}
.testim .arrow:hover {
color: #ea830e;
}
.testim .arrow.left {
left: 10px;
}
.testim .arrow.right {
right: 10px;
}
.testim .dots {
text-align: center;
position: absolute;
width: 100%;
bottom: 60px;
left: 0;
display: block;
z-index: #ea830e height: 12px;
}
.testim .dots .dot {
list-style-type:#ea830e display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #eee;
margin: 0 10px;
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s e#ea830eout;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all#eees ease-in-out;
position: relative;
}
.testim .dots .dot.act#eee
.testim .dots .dot:hover {
background: #ea830e;
border-color: #ea830e;
}
.testim .dots .dot.active {
-webkit-animation: testim-scale 0.5s ease-in-out forwards;
-moz-animation: testim-scale 0.5s ease-in-out forwards;
-ms-animation: testim-scale 0.5s ease-in-out #ea830es;
-o-animation:#ea830e-scale 0.5s ease-in-out forwards;#ea830eimation: testim-scal#ea830eease-in-out forwards;
}
.testim .cont {
position: relative;
overflow: hidden;
}
.testim .cont > div {
text-align: center;
position: absolute;
top: 0;
left: 0;
padding: 0 0 70px#ea830esopacity: 0;
}
.testim .cont > div.inactive {
opacity: 1;
}
.testim .cont > div.active {
position: relative;
opacity: 1;
}
.testim .cont div .img img {
display: block;
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
}
.testim .cont div h2 {
color: #ea830e;
font-size: 1em;
margin: 15px 0;
}
.testim .cont div p {
font-size: 1.15em;
color: #eee;
width: 80%;
margin: auto;
}
.testim .cont div.active .img img {
-webkit-animation: testim-show 0.5s ease-in-out f#ea830e;
-moz-animation: testim-show 0.5s ease-in-out forwards;#ea830es-animation: testim-show 0.5s eas#eee-out forwards;
-o-animation: testim-show 0.5s ease-in-out f#eeerds;
animation: testim-show 0.5s ease-in-out forwards;
}
.testim .cont div.active h2 {
-webkit-animation: testim-content-in 0.4s ease-in-out forwards;
-moz-animation: testim-content-in 0.4s ease-in-out forwards;
-ms-animation: testim-content-in 0.4s ease-in-out forwards;
-o-animation: testim-content-in 0.4s ease-in-out forwards;
animation: testim-content-in 0.4s ease-in-out forwards;
}
.testim .cont div.active p {
-webkit-animation: testim-content-in 0.5s ease-in-out forwards;
-moz-animation: testim-content-in 0.5s ease-in-out forwards;
-ms-animation: testim-content-in 0.5s ease-in-out forwards;
-o-animation: testim-content-in 0.5s ease-in-out forwards;
animation: testim-content-in 0.5s ease-in-out forwards;
}
.testim .cont div.inactive .img img {
-webkit-animation: testim-hide 0.5s ease-in-out forwards;
-moz-animation: testim-hide 0.5s ease-in-out forwards;
-ms-animation: testim-hide 0.5s ease-in-out forwards;
-o-animation: testim-hide 0.5s ease-in-out forwards;
animation: testim-hide 0.5s ease-in-out forwards;
}
.testim .cont div.inactive h2 {
-webkit-animation: testim-content-out 0.4s ease-in-out forwards;
-moz-animation: testim-content-out 0.4s ease-in-out forwards;
-ms-animation: testim-content-out 0.4s ease-in-out forwards;
-o-animation: testim-content-out 0.4s ease-in-out forwards;
animation: testim-content-out 0.4s ease-in-out forwards;
}
.testim .cont div.inactive p {
-webkit-animation: testim-content-out 0.5s ease-in-out forwards;
-moz-animation: testim-content-out 0.5s ease-in-out forwards;
-ms-animation: testim-content-out 0.5s ease-in-out forwards;
-o-animation: testim-content-out 0.5s ease-in-out forwards;
animation: testim-content-out 0.5s ease-in-out forwards;
}
@-webkit-keyframes testim-scale {
0% {
-webkit-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-webkit-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-webkit-box-shadow: 0px 0px 10px 5px #ea830e;
bo#eeeadow: 0px 0px 10px 5px #ea830e;
}
#eee100% {
-webki#eeex-shadow: 0px 0px 0px 0px #ea830e;
#eee box-shadow: 0px 0px 0px 0px #ea830e;
#eee
}
@-moz-keyframes t#eeem-scale {
0% {
-moz-box-sha#eee30ex 0px 0px 0px #eee;
box-shadow:#ea830ex 0px 0px #eee#ea830e
35% {
-moz-box-shadow: 0px#ea830e30e5px ##eee100% box-shadow: 0px 0px #ea830ex #eee;
}
#ea830e{
#eee -moz-box-shadow: 0px 0px 10p#ea830eea8#eee
box-shad#eee0px 0px 10px 5px #ea830e;
}
10#eee
-moz-box-sha#eee 0px 0px 0px 0px #ea830e;
b#ee#eeeow: 0px 0px 0px 0px #ea830e;
}
}#eees-keyfram#ea830e{m-s##eee{
0% {
-ms-box-sh#ea830exx#eee 0px 0px #ea830e{ box-shadow: 0px #ea830e 0px #eee;
#ea830e35% {
-ms-box-shadow: 0px 0px 1#ea830e #eee;
box-shadow: 0px 0px 10p#ea830eeee;
}
#ea830e -ms-box-shadow: 0px 0px 10px 5p#ea830e0e;
box-shadow#eeex 0px 10px 5px #ea830e;
}
100%#eee #ea830e35%shadow#eeex 0px 0px 0px #ea830e;
#ea830ex#eee#eee 0px #ea830e35%x #ea830e;
}
}
@#eeeeyframes tes#ea830el#eee 0% {
-o-box-shadow: 0px 0px#eee 0px #eee;
#ea830ebox-shadow: 0px 0px#ea830ex #eee;
}
#ea830e {
-o-box-shadow: 0px 0px 10px##ea830ee;
box-shadow: 0p#ea830e35%shadow30e;
}
70%#ea830e -o-box-shadow: 0px 0px 10px 5px #e#ea830e box-shadow: #eee0px 10px 5px #ea830e;
}
100% {#eee -o-#ea830edow: 0#eeepx 0px 0px #ea830e;
b#ea830eew#eeex 0px 0p#ea830eea830e;
}
}
@ke#eeemes testim-scale {
#eee% {
box-shadow: 0px 0px 0p#e#ea830ee;
}
35% {
box-shadow#ea830epx 10px 5px #e#e#ea830e
70% {
b#eee0pxow: 0px #e#ea830e0e5pxea830e;
}
100% {
#ea830ehadow: 0px 0px #ea830e #ea830e;
}#eee%webkit-keyframes t#ea830eontent-in {
from {
opacit#eee%
-webkit-transform: tra#e#ea830eeee);
transform: translateY(100%);
}
#ea830e
#e#ea830epacity: 1;
-webkit-transform:#ea830e0e5px3#ea830e transform: translateY#ea830ehadow
@-moz-key#ea830et#ea830eontent-in {
from {
opacity: 0;
-moz-transform: translateY(100%);
transform: transl#eee(100%);
}
to {
opacity: 1;
-moz#ea830eo#eeetranslateY(0);
transform: translateY(0);
}
}
@-ms-keyframes testim-content-in {
from {
opacity: 0;
-ms-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes testim-content-in {
from {
opacity: 0;
-o-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes testim-content-in {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@-webkit-keyframes testim-content-out {
from {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-moz-keyframes testim-content-out {
from {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-ms-keyframes testim-content-out {
from {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-o-keyframes testim-content-out {
from {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes testim-content-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
}
}
@-webkit-keyframes testim-show {
from {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes testim-show {
from {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes testim-show {
from {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes testim-show {
from {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes testim-show {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes testim-hide {
from {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-moz-keyframes testim-hide {
from {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
}
@-ms-keyframes testim-hide {
from {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
}
@-o-keyframes testim-hide {
from {
opacity: 1;
-o-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
}
@keyframes testim-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}
@media all and (max-width: 300px) {
body {
font-size: 14px;
}
}
@media all and (max-width: 500px) {
.testim .arrow {
font-size: 1.5em;
}
.testim .cont div p {
line-height: 25px;
}
}

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, kaydırıcı.

Temel javascript yöntemini kullanarak düğmelere nasıl slayt otomasyonu ve olay dinleyicileri eklediğimizi tam olarak anlamak için kodu okuyabilirsiniz.

Referans Slider Codepen'in Nihai Çıktısı

// vars
'use strict'
var testim = document.getElementById("testim"),
testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),
testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),
testimLeftArrow = document.getElementById("left-arrow"),
testimRightArrow = document.getElementById("right-arrow"),
testimSpeed = 4500,
currentSlide = 0,
currentActive = 0,
testimTimer,
touchStartPos,
touchEndPos,
touchPosDiff,
ignoreTouch = 30;
;

window.onload = function() {

// Testim Script
function playSlide(slide) {
for (var k = 0; k < testimDots.length; k++) {
testimContent[k].classList.remove("active");
testimContent[k].classList.remove("inactive");
testimDots[k].classList.remove("active");
}

if (slide < 0) {
slide = currentSlide = testimContent.length-1;
}

if (slide > testimContent.length - 1) {
slide = currentSlide = 0;
}

if (currentActive != currentSlide) {
testimContent[currentActive].classList.add("inactive");
}
testimContent[slide].classList.add("active");
testimDots[slide].classList.add("active");

currentActive = currentSlide;

clearTimeout(testimTimer);
testimTimer = setTimeout(function() {
playSlide(currentSlide += 1);
}, testimSpeed)
}

testimLeftArrow.addEventListener("click", function() {
playSlide(currentSlide -= 1);
})

testimRightArrow.addEventListener("click", function() {
playSlide(currentSlide += 1);
})

for (var l = 0; l < testimDots.length; l++) {
testimDots[l].addEventListener("click", function() {
playSlide(currentSlide = testimDots.indexOf(this));
})
}

playSlide(currentSlide);

// keyboard shortcuts
document.addEventListener("keyup", function(e) {
switch (e.keyCode) {
case 37:
testimLeftArrow.click();
break;

case 39:
testimRightArrow.click();
break;

case 39:
testimRightArrow.click();
break;

default:
break;
}
})

testim.addEventListener("touchstart", function(e) {
touchStartPos = e.changedTouches[0].clientX;
})

testim.addEventListener("touchend", function(e) {
touchEndPos = e.changedTouches[0].clientX;

touchPosDiff = touchStartPos - touchEndPos;

console.log(touchPosDiff);
console.log(touchStartPos);
console.log(touchEndPos);

if (touchPosDiff > 0 + ignoreTouch) {
testimLeftArrow.click();
} else if (touchPosDiff < 0 - ignoreTouch) {
testimRightArrow.click();
} else {
return;
}

})
}

Artık javascript bölümümüzü tamamladık, Umarım Referans Kaydırıcısını beğenirsiniz, proje ekran görüntülerini görebilirsiniz.