نحوه ایجاد اسلایدر با استفاده از Js و HTML و CSS

  • 179 بازدید
هادی بهادری
  • 27 خرداد 1403

مقدمه

اسلایدرها مجموعه ای از فریم ها هستند که در آن هر فریم به ترتیب قابل پیمایش است. فریم‌ها در اسلایدرها می‌توانند تصاویر، ویدیوها یا حتی عناصر HTML باشند (مانند توصیفات یا نظرات). اسلایدرها در چندین وب سایت مدرن وجود دارند. اسلایدرها توسط توسعه دهندگان زمانی استفاده می شوند که باید اطلاعات مربوط به وب سایت را منتقل کنند اما نمی خواهند فضای زیادی را اشغال کند.

به عنوان مثال، فرض کنید یک توسعه دهنده در حال توسعه یک وب سایت محصول است، سپس ممکن است بخواهد توصیفات یا نظرات خود را به کاربر نشان دهد تا بتواند به آنها اعتماد کند و محصول خود را بخرد. توسعه‌دهنده می‌تواند یک نوار لغزنده ایجاد کند که در آن کاربران می‌توانند هر بررسی را به راحتی مرور کنند و بخوانند. همین کار را می توان با تصاویر محصول نیز انجام داد، جایی که یک توسعه دهنده می تواند یک نوار لغزنده از تصاویر محصول ایجاد کند تا کاربر بتواند دید 360 درجه از محصول داشته باشد.

پیش نیازها

ما یاد خواهیم گرفت که چگونه با استفاده از HTML، CSS و جاوا اسکریپت یک اسلایدر تصویر CSS اولیه ایجاد کنیم. برای درک کامل آنچه در حال وقوع است و آنچه انجام می دهیم، مفاهیم خاصی وجود دارد که باید از قبل بدانید. بیایید نگاهی به آنها بیندازیم.

  • HTML: شما باید دانش پایه ای از HTML مانند عناصر و برچسب ها داشته باشید. ما از انواع تگ ها و عناصر برای ایجاد یک اسلایدر استفاده خواهیم کرد، بنابراین باید بدانید که نقش هر تگ یا عنصر در نوار لغزنده ما چیست.
  • CSS: ما از CSS به طور گسترده برای ایجاد اسلایدر استفاده خواهیم کرد. شما باید از چندین مفهوم متوسط ​​CSS مانند stacking، z-index، position و انیمیشن ها آگاه باشید. همه اینها هنگام ایجاد اسلایدر مورد نیاز خواهند بود.
  • جاوا اسکریپت: باید از جاوا اسکریپت اولیه مانند اعلان متغیر، استفاده از حلقه for و دستکاری DOM آگاه باشید. از اینها برای دستکاری اسلایدر و ایجاد افکت استفاده می شود.

هنگامی که با تمام این مفاهیم آشنا شدید، بیایید یک اسلایدر ایجاد کنیم. ما قدم به قدم به بررسی هر مفهوم و اینکه چرا کاری را که انجام می دهیم انجام می دهیم، خواهیم پرداخت.

مرحله 1: طرح اولیه اسلایدر تصویر را با استفاده از کد HTML ایجاد کنید

بیایید اسکلت اصلی اسلایدر خود را ایجاد کنیم. همانطور که در بالا به شما گفتیم اسلایدرها مجموعه ای از فریم ها هستند. ما یک اسلایدر تصویر CSS ایجاد خواهیم کرد.

ابتدا، div والد را ایجاد می کنیم که حاوی تصاویر کشویی و عملکرد است. همچنین استایل خاصی مانند تغییر رنگ پس‌زمینه و تنظیم ارتفاع و عرض div والد را اضافه می‌کنیم.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
</style>
</head>
<body>
<div id="parent-container">
<!-- This div will contain all images and buttons we will be using for Slider
-->
</div>
</body>
</html>

پس از انجام این کار، اجازه دهید به قسمت بعدی برویم.

مرحله 2: دکمه های قبلی و بعدی را اضافه کنید

اسلایدرها دارای دو دکمه قبلی و بعدی هستند. اینها برای عبور از قاب های لغزنده استفاده می شوند. ما دکمه های اساسی را به بخش والد خود اضافه خواهیم کرد. این دکمه ها به کاربر کمک می کند تا در میان تصاویر چرخ فلک حرکت کند. برای سادگی، از < و > به عنوان متن دکمه استفاده خواهیم کرد که به ترتیب قبلی و بعدی را نشان می دهد.

علاوه بر اضافه کردن دکمه‌های اولیه HTML، ما همچنین کمی آنها را به گونه‌ای طراحی می‌کنیم که به صورت عمودی تراز وسط باشند w.r.t center div. این کار به گونه ای انجام می شود که اسکرول در نوار لغزنده آسان تر می شود. ما از موقعیت نسبی برای تراز عمودی دکمه ها استفاده خواهیم کرد.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

</style>
</head>
<body>

<div id="parent-container">

<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

</div>

</body>
</html>
خروجی

مرحله 3: تصاویر و متن مورد نیاز را به اسلایدر اضافه کنید

هنگامی که دکمه ها را اضافه کردیم، اکنون زمان اضافه کردن تصاویر است. ما از تصاویر گل برای ایجاد یک اسلایدر تصویر CSS استفاده خواهیم کرد. تصاویر با کمک موقعیت و شاخص z روی یکدیگر چیده می شوند. از آنجایی که ما فقط به یک تصویر نیاز داریم تا قابل مشاهده باشد، از یک کلاس اصلی استفاده می کنیم و نمایش آن را روی قابل مشاهده تنظیم می کنیم. نمایش بقیه تصاویر برای جلوگیری از نمایش آنها برای کاربر مخفی خواهد بود.

اسلایدر همچنین دارای متنی است که نشان می دهد کاربر در حال حاضر به کدام تصویر دسترسی دارد. این به کاربر کمک می کند تا از تعداد تصاویر موجود در چرخ فلک و ترتیب آنها ایده بگیرد.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;

}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}

.images {
position: absolute;
display: none;
}

.main {
display: block;
}

.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}

</style>
</head>
<body>

<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
</body>
</html>
خروجی

مرحله 4: دو دکمه را با استفاده از کد جاوا اسکریپت فعال کنید

ما کلاس اسلایدر خود را ایجاد کرده ایم و تمام تصاویر را به آن اضافه کرده ایم. حالا باید دکمه های قبلی و بعدی را فعال کنیم. ما از جاوا اسکریپت استفاده خواهیم کرد.

ابتدا باید یک رویداد شنونده به این دکمه ها اضافه کنیم. هر بار که کاربر بر روی دکمه قبلی یا بعدی کلیک می کند، باید اقدامی مربوط به آن دکمه انجام شود. پس چگونه می خواهیم این کار را انجام دهیم؟

ما از کلاس اصلی برای نشان دادن اینکه کدام تصویر باید برای کاربر قابل مشاهده باشد استفاده کرده ایم. ما باید کنترل کنیم که کدام تصویر این کلاس را داشته باشد. هر تصویر دیگری مخفی خواهد شد و فقط تصویر با کلاس اصلی برای کاربر قابل مشاهده خواهد بود. برای دستیابی به این هدف از دستکاری DOM استفاده خواهیم کرد. دستکاری DOM به ما کمک می کند تا کلاس اصلی را از یک تصویر موجود حذف کنیم و آن را به یک تصویر جدید اضافه کنیم.

حال برای تعیین اینکه کدام تصویر باید کلاس اصلی را داشته باشد، از رویداد شنوندگان دکمه های قبلی و بعدی استفاده می کنیم. ابتدا باید تمام تصاویر موجود در اسلایدر را دریافت کنیم. ما می‌توانیم ببینیم که چرخ فلک لغزنده والد دارای تقسیم تصاویر است. ما می توانیم این را با استفاده از Query Selector در DOM دریافت کنیم. حالا وقتی همه تصویر div را داریم باید مورد مناسب را انتخاب کرده و کلاس اصلی را به آن اضافه کنیم. بقیه کلاس اصلی ندارند و از این رو برای کاربر نامرئی خواهند بود. می توانیم متغیری را که در ابتدا به 0 اشاره می کند مقداردهی اولیه کنیم. این متغیر به ما می گوید که در حال حاضر کدام تصویر برای کاربر قابل مشاهده است. هر بار که کاربر روی بعدی یا قبلی کلیک می کند، مقدار متغیر را بر اساس آن افزایش یا کاهش می دهیم. اگر مقدار 0 باشد و کاربر روی مقدار قبلی کلیک کند، مقدار را به (تعداد تصاویر div- 1) تغییر می دهیم. به همین ترتیب، اگر متغیر در تصویر آخر باشد و کاربر روی بعدی کلیک کند، مقدار را به 0 تغییر می دهیم.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;

}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}

.images {
position: absolute;
display: none;
}

.main {
display: block;
}

.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}

</style>
</head>
<body>

<div id="parent-container">

<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>

</div>

<script>

const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;


// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})

next.addEventListener('click', () => {
nextImage();
})


// Function to go to next Image
function nextImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}

images[currentIndex].classList.add('main');

}

// Function to go to previous Image
function previousImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}

images[currentIndex].classList.add('main');

}

</script>

</body>
</html>
خروجی

تبریک می‌گوییم، شما اسلایدر CSS را با استفاده از HTML، CSS و جاوا اسکریپت ایجاد کرده‌اید.

عملکرد نمایش اسلاید

Slider ما در حال حاضر از کنترل دستی برای کار استفاده می کند. یعنی تا زمانی که کاربر روی دکمه قبلی یا بعدی کلیک نکند، تصویر تغییر نخواهد کرد. با این حال، اکثر اسلایدرهای موجود به صورت آنلاین به این شکل کار نمی کنند. آنها دارای یک جلوه نمایش اسلاید هستند که به آنها اجازه می دهد تا پس از گذشت زمان تعیین شده به طور خودکار فریم ها را تغییر دهند.

ما نیز می توانیم این کار را در اسلایدر خود انجام دهیم. با استفاده از جاوا اسکریپت می توانیم از تابع setInterval استفاده کنیم که به طور خودکار تابع بعدی را پس از زمان تعیین شده فراخوانی می کند. این به لغزنده کمک می کند تا به طور خودکار کار کند و پس از گذشت زمان تعیین شده، نوار لغزنده را تغییر دهد.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;

}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}

.images {
position: absolute;
display: none;
}

.main {
display: block;
}

.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}

</style>
</head>
<body>

<div id="parent-container">

<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>

</div>

<script>

const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;


// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})

next.addEventListener('click', () => {
nextImage();
})

setInterval(()=>{
nextImage();
},1000);

// Function to go to next Image
function nextImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}

images[currentIndex].classList.add('main');

}

// Function to go to previous Image
function previousImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}

images[currentIndex].classList.add('main');

}

</script>

</body>
</html>
خروجی

نقاط ناوبری

به غیر از استفاده از عنوان یا متن تصویر در نوار لغزنده خود، می توانید از نقاط ناوبری نیز استفاده کنید. نقاط پیمایش مشابه متن یا عنوان کار می کنند. آنها به کاربر می گویند که در حال حاضر به کدام فریم دسترسی دارد. نقاط ناوبری در بسیاری از لغزنده های مدرن استفاده می شود زیرا ساخت آنها راحت و آسان است. نقاط ناوبری بیشتر دکمه های رادیویی هستند.

مزیت استفاده از نقاط ناوبری این است که به کاربر اجازه می دهد بدون هیچ مشکلی به هر فریم اسلایدر دسترسی داشته باشد. برخلاف نوار لغزنده رایج که کاربر باید به هر تصویر یکی یکی دسترسی داشته باشد، نقاط پیمایش به کاربر اجازه می‌دهد تا با کلیک بر روی نقطه ناوبری مربوط به آن تصویر، از هر فریم یا تصویری دیدن کند.

اصل اساسی پشت نقاط ناوبری شبیه به تصاویر کشویی است. تصویر فعلی دارای یک دکمه ناوبری مربوطه خواهد بود که دارای یک کلاس فعال است. پس از تغییر تصویر، کلاس فعال به تصویر فعلی و نقطه ناوبری فعلی منتقل یا اضافه می شود.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.images {display: none}

img {
vertical-align: middle;
width:100%;
}

/* Slideshow container */
.carousel-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.previous, .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: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit seethrough */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}


/* The dots/bullets/indicators */
.navigation-dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .navigation-dot:hover {
background-color: #717171;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>

<!-- Previous and Next Buttons -->
<a class="previous" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>

<!-- Navigation Dots-->
<div style="text-align:center">
<span class="navigation-dot" onclick="currentSlide(1)"></span>
<span class="navigation-dot" onclick="currentSlide(2)"></span>
<span class="navigation-dot" onclick="currentSlide(3)"></span>
</div>
<script>
var currentIndex = 1;

//Show current image
showSlides(currentIndex);

//Function to move Next
function plusSlides(n) {
showSlides(currentIndex += n);
}

//Function to move back
function currentSlide(n) {
showSlides(currentIndex = n);
}


//Initiate moving of slides
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("images");
var dots = document.getElementsByClassName("navigation-dot");
if (n > slides.length) {currentIndex = 1}
if (n < 1) {currentIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[currentIndex-1].style.display = "block";
dots[currentIndex-1].className += " active";
}
</script>
</body>
</html>
خروجی

مثال جایگزین

لغزنده های ایجاد شده با استفاده از جاوا اسکریپت تا زمانی که جاوا اسکریپت در مرورگر فعال باشد خوب هستند. به محض اینکه کاربر جاوا اسکریپت را خاموش کند، اسلایدر دیگر کار نخواهد کرد زیرا از جاوا اسکریپت برای دستیابی به عملکرد لغزنده استفاده می کند.

برای ساخت اسلایدر نیازی به استفاده از جاوا اسکریپت نیست. شما حتی می توانید فقط با استفاده از HTML و CSS یک نوار لغزنده بسازید. تنها چیزی که باید بفهمید این است که وقتی کاربر روی دکمه قبلی یا بعدی کلیک می کند چگونه کار می کنید. یک نوار لغزنده ایجاد شده با استفاده از HTML و CSS از حافظه مرورگر کمتری استفاده می کند و حتی اگر جاوا اسکریپت در مرورگر غیرفعال باشد، کار خواهد کرد.

شما می توانید از ویژگی ها و ویژگی های آنها برای ایجاد یک کلاس فعال استفاده کنید. برای دکمه ناوبری، می توانید یک کلاس فعال ایجاد کنید که با کلیک روی دکمه یا نقطه کار کند. این شبیه به جاوا اسکریپت عمل می کند، با این حال، به جای استفاده از دستکاری DOM، از عملکرد CSS مانند هدف و غیره برای رسیدن به این هدف استفاده خواهیم کرد.

ما یک اسلایدر نمونه برای شما با استفاده از HTML و CSS ایجاد کرده ایم. ما از کلاس‌های شبه فعال مانند بررسی استفاده کرده‌ایم تا مشخص کنیم کاربر روی کدام نقطه ناوبری اخیراً کلیک کرده است. سپس مطابق با آن تصویر را به کاربر نشان می دهیم. برای هر تصویر، ما حاشیه و padding را تنظیم کرده‌ایم، زیرا تصاویر را پنهان نمی‌کنیم.

<!DOCTYPE html>
<html>

<head>
<title> Slider using HTML and CSS </title>
<style>

img{
height:100%;
width:100%;
}

#frame {
margin: 0 auto;
height:400px;
width: 600px;
max-width: 100%;
}

#frame input[type=radio] {

display: none;
}

#frame label {
cursor: pointer;
text-decoration: none;
}

#slides {
padding: 10px;
background: #00F;
position: relative;
z-index: 1;
}

#overflow {
width: 100%;
overflow: hidden;
}

#frame1:checked~#slides .inner {
margin-left: 0;
}

#frame2:checked~#slides .inner {
margin-left: -100%;
}

#frame3:checked~#slides .inner {
margin-left: -200%;
}

#slides .inner {
transition: margin-left 800ms
cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 300px;
}

#slides .frame {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: black;
}

#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}

#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}

#controls label:hover {
opacity: 1;
}

/* active class for images*/
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(1){
float: right;
margin: 0 -50px 0 0;
display: block;
}

/* active class for navigation button*/
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(1){
float: left;
margin: 0 0 0 -50px;
display: block;
}

#bullets {
margin: 150px 0 0;
text-align: center;
}

#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}

#frame1:checked~#bullets label:nth-child(1),
#frame2:checked~#bullets label:nth-child(2),
#frame3:checked~#bullets label:nth-child(3){
background: #444;
}

</style>
</head>

<body>
<div id="frame">
<input type="radio" name="frame" id="frame1" checked />
<input type="radio" name="frame" id="frame2" />
<input type="radio" name="frame" id="frame3" />
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>
</div>
</div>
</div>
<div id="controls">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
<div id="bullets">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
</div>
</body>

</html>
خروجی

نتیجه

  • اسلایدرها مجموعه ای از فریم ها هستند که در آن هر فریم به ترتیب قابل پیمایش است.
  • آنها در بسیاری از وب‌سایت‌های امروزی برای نمایش نظرات یا توصیفات استفاده می‌شوند.
  • برای ساختن یک اسلایدر، کاربر باید از مفاهیمی مانند تگ های HTML، مفاهیم CSS مانند انباشته کردن، موقعیت یابی و غیره و جاوا اسکریپت اولیه مانند متغیرها و دستکاری DOM آگاه باشد.
  • اسلایدرها با داشتن یک کلاس فعال که نمایشگر آن روشن است کار می کنند. نمایش بقیه فریم ها خاموش است. هنگامی که کاربر از طریق یک دکمه یا نقطه حرکت می کند، عنصری را که دارای کلاس فعال است با استفاده از دستکاری DOM تغییر می دهیم.
  • اگر کاربر جاوا اسکریپت را در مرورگر فعال نداشته باشد، اسلایدر کار نخواهد کرد.
  • برای ایجاد اسلایدر می توانید فقط از HTML و CSS استفاده کنید. این باعث صرفه جویی در حافظه مرورگر و زمان محاسباتی می شود. همچنین در هر مرورگری که از HTML و CSS پشتیبانی می کند کار می کند.
[تعداد: 1   میانگین: 5/5]
در این مقاله:
,,,,
پست نوشته شده توسط:
دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مقاله قبل
مقاله بعد
شاید دوست داشته باشید