طراحی اسلایدر با html و css

در این پست قصد داریم طراحی اسلایدر با html و css را بررسی و پیاده سازی نماییم.

سوال:به کمک html,css و بدون استفاده از جاوا اسکریپت اسلایدری مشابه تصویر زیر طراحی نمایید؟

می‌توانید با استفاده از HTML و CSS، یک صفحه وب برای نمایش اسلایدر طراحی کنید.

به طور کلی، برای این کار باید از چندین تکنولوژی HTML و CSS استفاده کنید، از جمله:

۱- تکنولوژی HTML5 برای ایجاد عناصر صفحه وب، مانند div و img و span و غیره.

۲- تکنولوژی CSS برای تعیین سبک‌های ظاهری مواردی همچون رنگ، اندازه، فاصله، موقعیت و غیره.

طراحی اسلایدر بدون استفاده از جاوا اسکریپت

پس از ثبت نام در وب سایت یا ورود به حساب کاربری خود میتوانید سورس کد را به صورت یکجا دانلود نمایید.

برای اینکه بدون استفاده از جاوا اسکریپ طراحی اسلایدر html و css را انجام دهیم باید از الگوریتم زیر پیروی کنیم.

ابتدا کد های html را مینویسیم که ساده تر از کد های css میباشد.

استفاده از ckeditor در html

در اینجا تصویر در قسمت css تنظیم میشود پس کد های html به صورت زیر میباشد:

<div class="carousel-wrapper">
  <span id="item-1"></span>
  <span id="item-2"></span>
  <span id="item-3"></span>
  <div class="carousel-item item-1">
    <h2>Item 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus   accumsan pretium dolor vel convallis. Aliquam erat volutpat. Maecenas lacus nunc, imperdiet sed mi et, finibus suscipit mi.</p>
    <a class="arrow arrow-prev" href="#item-3"></a>
    <a class="arrow arrow-next" href="#item-2"></a>
  </div>
  
  <div class="carousel-item item-2">
    <h2>Item 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus accumsan pretium dolor vel convallis. Aliquam erat volutpat.</p>
    <a class="arrow arrow-prev" href="#item-1"></a>
    <a class="arrow arrow-next" href="#item-3"></a>
  </div>
  
  <div class="carousel-item item-3">
    <h2>Item 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus accumsan pretium dolor vel convallis. Aliquam erat volutpat.</p>
    <a class="arrow arrow-prev" href="#item-2"></a>
    <a class="arrow arrow-next" href="#item-1"></a>
  </div>
</div>

اگر به کد html دقت کنید کلاس carousel-wrapper کادر اصلی اسلایدر را تشکیل میدهد.

کلاس item-1 تا item-3 تصاویر اسلایدر را تشکیل میدهند.

در نهایت برای هر اسلایدر یک توضیحاتی در نظر گرفتیم که با کلاس پایه carousel-item مقدار دهی میشوند.

در نهایت کلاس arrow را به عنوان کلاس پایه جهت ها داریم که با کلاس arrow-next , arrow-prev بین تصاویر جا به جا میشویم.

کد css اسلایدر در html

برای پیاده سازی قسمت css ابتدا کلاس پایه carousel-wrapper را تعریف میکنیم:

.carousel-wrapper{
  height:400px;
  position:relative;
  width:800px;
  margin:0 auto;
  border :3px solid black; 
}

در این کلاس با خصوصیت های width,height طول و عرض اسلایدر و همچنین محل قرار گیری اسلایدر را تنظیم میکنیم.

کلاس بعدی مربوط به کلاس تصاویر پایه یا همان carousel-item میباشد که به صورت زیر تعریف میکنیم:

.carousel-item{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  padding:25px 50px;
  opacity:0;
  transition: all 3s ease-in-out;
}

مهم ترین نکته این کلاس مقدار دهی position به absolute  میباشد که امکان استفاده جا به جایی تصاویر و رو هم انداختنشان را به ما میدهد.

در ادامه طراحی اسلایدر با html و css  به پیاده سازی کلاس های تصاویر اسلایدر میپردازیم.

ایجاد لینک بر روی نقشه ایران در html

تصاویر slider و جا به جایی بین آنها

برای پیاده سازی تصاویر اسلایدر باید از خصوصیت background-image استفاده کنیم.

کد را به صورت زیر مینویسیم:

[id^="item"] {
    display: none;
  }

.item-1 {
    z-index: 2;
    opacity: 1;
  background:url('a.jpg');
  background-size:cover;
  }
.item-2{
  background:url('c.jpg');
   background-size:cover;
}
.item-3{
  background:url('b.jpg');
   background-size:cover;
}

*:target ~ .item-1 {
    opacity: 0;
  }

#item-1:target ~ .item-1 {
    opacity: 1;
  }

#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
    z-index: 3;
    opacity: 1;
  }
}

اگر به کد دقت کنید ابتدا با استفاده از selector =^ تمامی کلاس هایی که با item شروع میشوند را پنهان کردیم.

سپس برای هر تصویر یک کلاس item با شماره تعریف کردیم.

در نهایت با کمک target که انتخاب کاربر بر روی جهت ها میباشد opacity و z-index آن ها را جا به جا کردیم تا حالت اسلایدر به وجود آید.

در ویدیو زیر نحوه عملکرد اسلایدر را مشاهده میکنید:

طراحی جهت های اسلایدر

برای طراحی جهت سمت راست و چپ باید ابتدا کلاس پایه arrow را تعریف نماییم.

کد قسمت arrow به صورت زیر میباشد:

.arrow{
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 12px;
}

همانطور که مشاهده میکنید از خصوصیت border برای شکل دهی و قاب آن استفاده میکنیم.

در نهایت کلاس های arrow-left,arrow-right را به صورت زیر مینویسیم:

.arrow-prev{
  left:-30px;
  position:absolute;
  top:50%;
  transform:translateY(-50%) rotate(135deg);
}
 
.arrow-next{
    right:-30px;
  position:absolute;
  top:50%;
  transform:translateY(-50%) rotate(-45deg);
  }

تمرین های html و css حل شده رایگان