ایجاد اسلایدر با استفاده از سی اس اس و اچ تی ام ال

ایجاد اسلایدر با استفاده از سی اس اس و اچ تی ام ال

ایجاد اسلایدر با استفاده از سی اس اس و اچ تی ام ال

گاهی اوقات استفاده از اسلایدرهای متداول باعث سنگین شدن صفحات وب ما می شود به این خاطر امروز می خواهیم یک اسلایدر بسیار سبک رو که با استفاده از ترکیب css و html ایجاد شده را به شما آموزش بدیم!

ابتدا می توانید دموی این اسلایدر رو از طریق این لینک ببینید.

اسلایدر اچ تی ام ال

از ویژگی های بسیار خوب این اسلایدر پشتیبانی از متن بر روی تصاویر است که می تواند انگیزه مناسبی برای استفاده از این اسلایدر باشد!

طریقه استفاده از این اسلایدر :

ابتدا باید فایل css رو به صفحه ای که می خواهید اسلایدر درون اون نمایش پیدا کنه لینک کنید!

[php]
<link rel="stylesheet" href="font-awesome.min.css">
[/php]

نمونه سند html به صورت زیر می باشد که می توانید با تغییرات کوچک اسلایدر دلخواه خودتون رو با متن های خودتون پیاده سازی کنید

[php]

&lt;div class="container"&gt;
&lt;input id="rad1" type="radio" name="rad" checked&gt;

&lt;section style="background: #449DF5"&gt;

&lt;h1&gt;Card 1&lt;/h1&gt;

Description 1

&lt;label for="rad3"&gt;&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;&lt;/label&gt;

&lt;label for="rad2"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/label&gt;

&lt;/section&gt;

&lt;input id="rad2" type="radio" name="rad"&gt;

&lt;section style="background: #40CCB5"&gt;

&lt;h1&gt;Card 2&lt;/h1&gt;

Description 2

&lt;label for="rad1"&gt;&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;&lt;/label&gt;

&lt;label for="rad3"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/label&gt;

&lt;/section&gt;

&lt;input id="rad3" type="radio" name="rad"&gt;

&lt;section style="background: #FFC765"&gt;

&lt;h1&gt;Card 3&lt;/h1&gt;

Description 3

&lt;label for="rad2"&gt;&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;&lt;/label&gt;

&lt;label for="rad4"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/label&gt;

&lt;/section&gt;

&lt;input id="rad4" type="radio" name="rad"&gt;

&lt;section style="background: #ED5565"&gt;

&lt;h1&gt;Card 4&lt;/h1&gt;

Description 4

&lt;label for="rad3"&gt;&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;&lt;/label&gt;

&lt;label for="rad1"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/label&gt;

&lt;/section&gt;

&lt;/div&gt;

[/php]

برای دانلود اسلایدر روی لینک دانلود کلیک کنید

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد.