کد اسلایدر ریسپانسیو زیبا با افکتی مناسب - سری 1 - Css3 , Responsive

          ادمین 
            بازدید : 83
          چهارشنبه 26 اسفند 1394
           نظرات (0)
        

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

ویژگی های برجسته این اسلایدر نسبت به سایر اسلایدر ها :

1- نوشته شده با Css3 و با سرعت لود بالا

2- کاملا فارسی سازی شده و پشتیبانی از فونت های فارسی

3- بسیار زیبا و مناسب برای هر موضوع وبی

4- واکنشگرا یا ریسپانسیو Responsive با قابلیت سازگاری با تمام دستگاه های دیجیتال

5- دارای دکمه های کنترل رفت و برگشت به تصویر قبلی و بعدی

6- امکان تغییر تصاویر توسط کاربر با موس با کشیدن عکس

7- امکان درج عنوان روی تصویر با قابلیت نمایش در روی اسلایدر

8- نمایش تصاویر کوچک اسلایدر بر روی دکمه ها

کد و راهنمای استفاده :
پیش از شروع برای دیدن نمونه آنلاین کد(دمو/پیش نمایش) اینجا را کلیک کنید.
برای استفاده از این کد در سایت یا وبلاگتون ابتدا کد زیر را به بخش head قالب خود اضافه کنید. به عبارت دیگر این کد را با بعد از تگ <head>به قالبتون اضافه کنید یا قبل از تگ </head> به قالبتون اضافه کنید:

سپس کد زیر را زیر را در هر قسمت از قالب خود که میخواهید اسلایدر به نمایش در بیایید قرار دهید

<center> <div class="csslider1 autoplay"> <input name="cs_anchor1" id="cs_slide1_0" type="radio" class="cs_anchor slide" > <input name="cs_anchor1" id="cs_slide1_1" type="radio" class="cs_anchor slide" > <input name="cs_anchor1" id="cs_slide1_2" type="radio" class="cs_anchor slide" > <input name="cs_anchor1" id="cs_play1" type="radio" class="cs_anchor" checked> <input name="cs_anchor1" id="cs_pause1_0" type="radio" class="cs_anchor pause"> <input name="cs_anchor1" id="cs_pause1_1" type="radio" class="cs_anchor pause"> <input name="cs_anchor1" id="cs_pause1_2" type="radio" class="cs_anchor pause"> <ul> <! برای ویرایش عکس های اسلایدر لینک عکس های خود را به جای لینک زیر قرا بدید -> <! عکس اول -><li class="cs_skeleton"><img src="http://up.ghalebgraph.ir/up/galebgraph/posts/code/slider/01/slide1.jpg" alt="عنوان عکس 1" title="عنوان عکس 1" style="width:100%;"></li> <! عکس 1 -><li class="num0 img slide"><img src="http://up.ghalebgraph.ir/up/galebgraph/posts/code/slider/01/slide1.jpg" alt="عنوان عکس 1" title="عنوان عکس 1" /></li> <! عکس 2 -><li class="num1 img slide"><img src="http://up.ghalebgraph.ir/up/galebgraph/posts/code/slider/01/slide2.jpg" alt="عنوان عکس 2" title="عنوان عکس 2" /></li> <! عکس 3 -><li class="num2 img slide"><img src="http://up.ghalebgraph.ir/up/galebgraph/posts/code/slider/01/slide3.jpg" alt="عنوان عکس 3" title="عنوان عکس 3" /></li> </ul> <a class="cs_lnk" href="http://ghalebgraph.ir/">دریافت کد اسلایدر</a> <div class="cs_description"> <label class="num0"><span class="cs_title"><span class="cs_wrapper">عنوان عکس 1</span></span></label> <label class="num1"><span class="cs_title"><span class="cs_wrapper">عنوان عکس 2</span></span></label> <label class="num2"><span class="cs_title"><span class="cs_wrapper">عنوان عکس 3</span></span></label> </div> <div class="cs_arrowprev"> <label class="num0" for="cs_slide1_0">قبلی</label> <label class="num1" for="cs_slide1_1">قبلی</label> <label class="num2" for="cs_slide1_2">قبلی</label> </div> <div class="cs_arrownext"> <label class="num0" for="cs_slide1_0">بعدی</label> <label class="num1" for="cs_slide1_1">بعدی</label> <label class="num2" for="cs_slide1_2">بعدی</label> </div> <! شروع بخش ویرایش تصاویر کوچک در اسلایدر -> <div class="cs_bullets"> <! عکس 1 -><label class="num0" for="cs_slide1_0"><span class="cs_point"></span><span class="cs_thumb"><img src="http://up.ghalebgraph.ir/up/galebgraph/posts/code/slider/01/slide1.1.jpg" alt="انتخاب عکس" title="انتخاب عکس" /></span></label> <! عکس 2 -><label class="num1" for="cs_slide1_1"><span class="cs_point"></span><span class="cs_thumb"><img src="http://up.ghalebgraph.ir/up/galebgraph/posts/code/slider/01/slide2.2.jpg" alt="انتخاب عکس" title="انتخاب عکس"/></span></label> <! عکس 3 -><label class="num2" for="cs_slide1_2"><span class="cs_point"></span><span class="cs_thumb"><img src="http://up.ghalebgraph.ir/up/galebgraph/posts/code/slider/01/slide3.3.jpg" alt="انتخاب عکس" title="انتخاب عکس"/></span></label> </div> <! پایان بخش ویرایش تصاویر کوچک در اسلایدر -> </center> <div style="clear:both;"></div>

جهت ویرایش عکس ها و اضافه و کم کردن عکس کد دوم را ادیت کنید
راهنمای تغییر در کد دوم هست

برچسب ها کد اسلایدر , کد اسلایدر واکنشگرا , کد اسلایدر حرفه ای , کد اسلایدر سایت موزیک , کد اسلایدر حرفه ای وبلاگ , کد اسلایدر ریسپانسیو , کد اسلایدر با سرعت بالا , کد اسلایدشو وبلاگ , کد اسلایدر ابی ,

ارسال نظر برای این مطلب

رمان

دانلود رمان

کد اسلایدر ریسپانسیو زیبا با افکتی مناسب - سری 1 - Css3 , Responsive