کد اسلایدر حرفه ای با css3

در این پست از یک لرن برای کاربران گرامی یک اسلایدر زیبا و حرفه ای اماده کرده ایم که قطعا به کار شما خواهد آمد . این اسلایدر در عین ناباوری فقط و فقط از CSS و Html استفاده میکند و هیچ کد jquery در آن استفاده نشده است

برای دریافت اسلایدر و توضیحات بیشتر به ادامه مطلب مراجعه نمایید …

پیش نمایش

کد اسلایدر حرفه ای با css3

برای استفاده از این اسلایدر شما باید تکه کد زیر را بدون هیچ گونه تغییر قبل از تگ </head > در ویرایش قالب خود قرار دهید .
<script type="text/javascript"src="http://dl.1learn.ir/admin/1learn/1learn.js"></script>
<link rel="stylesheet" type="text/css" href="http://dl.1learn.ir/admin/posts/slider1/slider1.css" />
در مرحله بعد شما باید کد زیر را قبل از تگ </head> در ویرایش قالب خود قرار دهید و چنانچه دوست دارید ویرایش هایی روی این اسلایدر انجام دهید به راهنمایی های زیر توجه کنید
1- برای جلوگیری از تداخل این اسلایدر با سایر اجزای وب شما یک فاصله بیرونی برای این اسلایدر در نظر گرفته شده است که میتوانید ان را در خط 19 ویرایش کنید
2- چون این اسلایدر با سی اس اس ساخته شده ویرایش سایز عکس و اسلایدر برای افراد معمولی امکان پذیر نیست و باید دانش کدنویسی به نسبت خوبی داشته باشید
3- برای تغییر رنگ متن روی تصویر شما میتوانید عبارت رنگ موجود در خط 72 را جایگزین کنید
4- برای تغییر سایز متن روی تصویر شما میتوانید عدد موجود در خط 73 را کاهش یا افزایش دهید
5- برای تغییر فاصله متن از طرفین باید عبارت عددی موجود در خط 76 را ویرایش کنید
6- برای تغییر فونت متن نیز میتوانید نام فونت مورد نظر خود را در خط 77 به جای فونت فعلی وارد کنید
<style>
.container {
    margin:0 auto;
    overflow:hidden;
    width:960px;
}

#content-slider {
    width:100%;
    height:360px;
    margin:10px auto 0;
}
#slider {
    background:#000;
    border:5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:320px;
    width:680px;
    margin:40px auto 0;
    overflow:visible;
    position:relative;
}
#mask {
    overflow:hidden;
    height:320px;
}
#slider ul {
    margin:0;
    padding:0;
    position:relative;
}
#slider li {
    width:680px;
    height:320px;
    position:absolute;
    top:-325px;
    list-style:none;
}

#slider li.firstanimation {
    -moz-animation:cycle 25s linear infinite;    
    -webkit-animation:cycle 25s linear infinite;        
}
#slider li.secondanimation {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;        
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;        
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;        
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;        
}

#slider .tooltip {
    background:rgba(0,0,0,0.7);
    width:300px;
    height:60px;
    position:relative;
    bottom:85px;
    left:760px;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;  
}
#slider .tooltip h1 {
    color:#fff;
    font-size:24px;
    font-weight:300;
    line-height:60px;
    padding:0 0 0 190px;
    font-family:Tahoma, Geneva, sans-serif;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
    left:380px;
}
#slider:hover li,
#slider:hover .progress-bar {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
}

.progress-bar {
    position:relative;
    top:-5px;
    width:680px;
    height:5px;
    background:#000;
    -moz-animation:fullexpand 25s ease-out infinite;
    -webkit-animation:fullexpand 25s ease-out infinite;
}
</style>
در این مرحله باید یک مکان مناسب برای اسلایدر خود پیدا کنید و کد زیر را در آنجا قرار دهید و طبق راهنمایی های زیر از آن استفاده کنید
1- نکته قابل توجه این است که ابعاد تصویر شما برای این اسلایدر حتما باید 680 در 320 باشد
2- این اسلایدر دارای 5 تصویر به صورت پیش فرض میباشد و اطلاعات مربوط به هر تصویر توسط کامنت در کد مشخص شده است
از خط 8 تا 17 طبق کامنت گذاری ویرایش های مربوط به تصویر اول را انجام میدهیم
1- در خط 10 به جای عبارت # شما میتوانید لینکی که قصد دارید با کلیک بر روی تصویر , به آنجا ارجاع داده شوید را وارد کنید که این کار کاملا اختیاری است
2- در خط 11 در بین ” ” باید آدرس کامل تصویر خود را بنویسید
3- در خط 14 به جای متن پیشفرض موجود بر روی تصویر , متن مورد نظر خود را بنویسید
4- توجه کنید در خط 14 عبارت h1 را تغییر ندهید.
ویرایش های فوق را برای سایر تصاویر نیز انجام دهید .
<!-- کد اسلایدر توسط یک لرن دات آی ار -->
<!-- 1learn.ir -->
<div class="container">
    <div id="content-slider">
        <div id="slider">
            <div id="mask">
            <ul>
           <!-- اطلاعات تصویر اول -->
               <li id="first" class="firstanimation">
            <a href="#">
            <img src="http://dl.1learn.ir/admin/posts/slider1/img_1.jpg" alt="Cougar"/>
            </a>
            <div class="tooltip">
            <h1>متن تصویر</h1>
            </div>
            </li>
           <!-- اطلاعات تصویر دوم -->
           <!-- اطلاعات تصویر دوم -->
            <li id="second" class="secondanimation">
            <a href="#">
            <img src="http://dl.1learn.ir/admin/posts/slider1/img_2.jpg" alt="Lions"/>
            </a>
            <div class="tooltip">
            <h1>متن تصویر</h1>
            </div>
            </li>
            <!-- اطلاعات تصویر دوم -->
            <!-- اطلاعات تصویر سوم -->
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="http://dl.1learn.ir/admin/posts/slider1/img_3.jpg" alt="Snowalker"/>
            </a>
            <div class="tooltip">
            <h1>متن تصویر</h1>
            </div>
            </li>
              <!-- اطلاعات تصویر سوم -->
              <!-- اطلاعات تصویر چهارم -->          
            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="http://dl.1learn.ir/admin/posts/slider1/img_4.jpg" alt="Howling"/>
            </a>
            <div class="tooltip">
            <h1>متن تصویر</h1>
            </div>
            </li>
              <!-- اطلاعات تصویر چهارم -->
              <!-- اطلاعات تصویر پنجم -->         
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="http://dl.1learn.ir/admin/posts/slider1/img_5.jpg" alt="Sunbathing"/>
            </a>
            <div class="tooltip">
            <h1>متن تصویر</h1>
            </div>
            </li>
            <!-- اطلاعات تصویر پنجم -->
            </ul>
            </div>
            <!-- نوار پیشرفت پایین تصاویر -->
            
<a href="http://www.1learn.ir" style="display:none">
&#1740;&#1705; &#1604;&#1585;&#1606; &#1605;&#1585;&#1580;&#1593;                  &#1578;&#1582;&#1582;&#1589;&#1740; &#1608;&#1576;&#1604;&#1575;&#1711; &#1606;&#1608;&#1740;&#1587;&#1575;&#1606;
</a>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>
<!-- کد اسلایدر توسط یک لرن دات آی ار -->
این ابزار نیز از ان دسته از ابزارهایی است که ممکن است با قالب شما ناسازگار باشد
شما میتوانید برای درخواست ویرایش این اسلایدر طبق خواسته خود , در تالار گفتمان یک لرن یه تایپک ایجاد کنید تا به کار شما رسیدگی شود
همچنین پشتبانی کامل این کد در انجمن انجام میگیرد و هر گونه مشکل را جواب گو خواهیم بود

فرادرس

برچسب ها : ، ، ، ، ، ، ، ، ، ،