امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

نحوۀ ایجاد اسلایدر تصویر با استفاده از jQuery و CSS3

در این آموزش ما یک اسلایدر تصویر را با استفاده از اسکریپت جی‌کوئری اسلایدر Nivo خواهیم ساخت. دلیل استفادۀ ما از این اسکریپت، قدرت و کارآیی بالا و همچنین رایگان بودن آن می‌باشد. این اسکریپت 16 اِفکت transition دارد، ساده است، انعطاف‌پذیر است و بسیاری امکانات مناسب دیگری نیز دارد. تقریباً می‌شود در هر جا و هر نوع پروژه‌ای شامل وب‌سایت‌ها و پوسته‌های شخصی و تبلیغاتی از آنها استفاده کرد. در این آموزش کدنویسی اسلایدر تصویری را انجام خواهیم داد که توسط Vladimir Kudinov ساخته شده است.

گام 1 : ساختار اولیه HTML

اول باید نسخۀ جی‌کوئری اسلایدر Nivo را از اینجا دانلود کنید. شما فقط به 2 تا از فایل‌ با نام‌های “nivo-slider.css و “jquery.nivo.slider.pack.js” که در این پک دانلود کرده‌اید نیاز خواهید داشت.

سپس باید ساختار اولیه HTML را ساخته و فایل‌های CSS و JS اسلایدر Nivo را به آن اضافه کنید. شما همچنین باید آخرین نسخه از کتابخانه jQuery را به میزبانی گوگل و یا وب هاست خودتان (انتخاب با خودتان) لینک کنید.

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Slider Tutorial</title>
    <link rel="stylesheet" href="css/nivo-slider.css" media="screen">
</head>
 
<body>
 
<!-- jQuery & Nivo Slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
 
</body>
</html>

برای اینکه اسلایدر Nivo بارگزاری شود باید یک سری کُدهای دیگر نیز قبل از تگ پایانی <body/> اضافه کنیم. همچنین باید یک سری تنظیمات را سِت کنیم تا کنترل‌ها نمایان شوند، میزان کِدری عنوان را تغییر دهیم و همچنین متن بعدی و قبلی اسلایدر را به فِلش تغییر دهیم. می‌توانید لیست کامل تنظیمات را از این آدرس مشاهده کنید.

<script>
    $(window).load(function() {
        $('#slider').nivoSlider({
            directionNavHide: false,
            captionOpacity: 1,
            prevText: '<',
            nextText: '>'
        });
    });
</script>

گام 2 : ساختار HTML اسلایدر

اول باید یک div با کلاس‌های “slider-wrapper” و “futurico-theme بسازیم. سپس یک div با آی‌دی “slider” و کلاس “nivoSlider” می‌سازیم. برای هر اسلاید یک تگ <img> می‌سازیم.

<div class="slider-wrapper futurico-theme">
 
    <div id="slider" class="nivoSlider">
 
        <img src="img/slide1.png" alt="">
 
        <img src="img/slide2.png" alt="">
 
        <img src="img/slide3.png" alt="">
 
        <img src="img/slide4.png" alt="">
 
    </div>
 
</div>

گام 3 : طرح‌بندی اسلایدر

ما یک اسلایدر با عرض 300px و ارتفاع 180px خواهیم ساخت. با توجه با اینکه 5px padding به آن اضافه خواهیم کرد، باید 10px از عرض و ارتفاع آن کم کنیم. همچنین رنگ پس‌زمینه و گوشه‌های گرد را ست خواهیم کرد.

.futurico-theme.slider-wrapper {
    position: relative;
    width: 290px;
    height: 170px;
    margin: 0;
    padding: 5px;
 
    background: #141517;
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
.futurico-theme .nivoSlider {
    position: relative;
    width: 290px;
    height: 170px;
}
 
.futurico-theme .nivoSlider img {
    display: none;
    position: absolute;
    width: 290px;
    height: 170px;
    top: 0;
    left: 0;
}

گام 4 : کنترل‌های اسلایدر

اکنون می‌خواهیم کنترل‌های اسلایدر را استایل دهیم. با قرار دادن کنترل‌ها در قسمت پایین و وسط‌چین کردن آنها آغاز می‌کنیم. اگر اسلادهایتان بیش از 4 تا خواهد بود، باید مقدار “left” را تغییر دهید تا در وسط قرار گیرند.

.futurico-theme .nivo-controlNav {
    position: absolute;
    bottom: -30px;
    left: 105px;
}

برای هر اسلاید یک دایره خواهیم ساخت. جهت استایل دادن به آن، یک رنگ پس‌زمینه، مقداری سایه و گوشه‌های گرد شده برای ساختن دایره اضافه می‌کنیم. برای پنهان کردن اعداد “1,2,3,4” یک text-indent با مقدار منفی اضافه می‌کنیم.

.futurico-theme .nivo-controlNav a {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    text-indent: -9999px;
 
    background: #141517;
 
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
 
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
    box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
}

برای اسلاید active یک gradient سبز می‌دهیم و سایه‌ها را تغییر می‌دهیم.

.futurico-theme .nivo-controlNav a.active,
.futurico-theme .nivo-caption span {
    background: #a5cd4e;
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 
    -webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
    -moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}

گام 5 : اسلاید بعدی و قبلی

برای استایل‌دهی به کنترل‌های “بعدی” و “قبلی”، آنها را در وسط قرار می‌دهیم و برخی استایل‌های CSS پایه (مانند font-family, font-size, color و … ) را به آن می‌دهیم.

.futurico-theme .nivo-directionNav a {
    display: block;
    top: 60px;
 
    font-family: 'Consolas', sans-serif;
    font-size: 40px;
    color: #141517;
    text-shadow: 0px 1px 1px rgba(255,255,255, .05);
}
 
.futurico-theme a.nivo-prevNav { left: -40px; }
 
.futurico-theme a.nivo-nextNav { right: -40px; }

گام 6 : ساختار HTML عنوان‌ها

برای اینکه عنوان‌ها را بسازیم بایستی یک div با کلاس “nivo-html-caption” و یک آی‌دی تصادفی بسازیم. برای لینک کردن عنوان به اسلاید مربوطه، باید یک “title” همنام با آی‌دی عنوان به تگ <img>اضافه کنیم.

<div id="slider" class="nivoSlider">
 
    <img src="img/slide1.png" alt="" title="#caption1">
 
    <img src="img/slide2.png" alt="">
 
    <img src="img/slide3.png" alt="" title="#caption3">
 
    <img src="img/slide4.png" alt="">
 
</div>
 
<div id="caption1" class="nivo-html-caption">
    <strong>New Project</strong> <span></span> <em>Some description here</em>.
</div>
 
<div id="caption3" class="nivo-html-caption">
    <strong>Image 3</strong> <span></span> <em>Some description here</em>.
</div>

گام 7 : استایل‌دهی عنوان

برای استایل‌دهی عناوین، رنگ متن، font family و اندازۀ فونت را تغییر می‌دهیم. از gradient سبزی که پیش‌تر استفاده کردیم در اینجا نیز استفاده می‌کنیم.

.futurico-theme .nivo-caption {
    padding: 5px 0;
 
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #e1e1e1;
 
    background: #000000;
 
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}
 
.futurico-theme .nivo-caption span {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 5px 1px 5px;
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
.futurico-theme .nivo-caption em {
    font-family: Georgia, sans-serif;
    font-size: 11px;
    color: #727581;
}

رمز عبور برای باز کردن فایل : www.dtuts.net

امیدوارم از آموزش لذت و استفادۀ لازم را برده باشید.

موفق باشید!

منبع: designmodo.com

درباره امین بهشتی

یک ایرانی ترک زبان که علاقه زیادی به طرّاحی وِب و گرافیک دارد!
در این سایت سعی می‌کنم مطالب جالب، مفید و کاربردی را در جهت آموزش به اشتراک بگذارم!
امیدوارم لحظات خوشی را در سایت سپری نمایید و مطالب سایت مورد استفاده شما قرار بگیرد.
سپاس

    • ببینید شما 2 تا فایل دارید که یکی فایل CSS هست و دیگری یک فایل جاوااسکریپت. اولی را داخل پوشه CSS و دومی را داخل پوشه js قرار می‌دهید و سپس به صورتی که در کدها نشان داده شده آنها را لینک می‌کنید. وقتی که لینک کردید موقعی که کسی سایت‌تان را در مرورگرش باز کرد، اون دو تا فایل load می‌شوند.

  1. سلام
    لطفا کمکم کنید
    من کدهای قسمت ایندکس رو از بالا کپی کردم و لینک های دو فایل جاوا و css رو تغییر دادم
    قسمت اسکریپت لود صفحه رو داخل هد
    و دایوهای بالا رو در داخل بودی و لینک های تصاویر رو هم تغییر دادم
    کجا رو اشتباه کردم؟
    چیزی نشون نمیده
    باید کدهای css این صفحه رو هم به فایل nivo-slider اضافه کنم یا باید در داخل هد صفحه ایندکس باشه
    ممنون

  2. تشکر.عالی بود.
    من مراحل رو انجام دادم و حالا می خوام اون رو داخل یه سایت برای پروژه یکی از درسام بزارم .لطف کنید بکید چطوری می تونم اونرو در محل مورد نظرم مثلا وسط صفحه قرار بدم.ممنون میشم راهنمایی کنید.

  3. سلام واقعا عالی بود فقط یه سوال دارم واینه که من تونستم اندازشو عوض کنم اما نشد که جاشو تغییر بدم من با دریم ویور کار میکنم و هر چی تنظیماتشو عوض میکنم نمیشه من فایل nivo.slider.css رو تغییر میدم میشه لطف کنید و نحوه جابه جایی اسلایدرو هم بگید ممنونم خیلی لازمش دارم.

    • سلام، برای تنظیم زمان توقف هر اسلاید باید در بین کدهای جاوااسکریپتی که در گام اول معرفی شد، کد زیر را به آن اضافه کنید و زمان را بر حسب میلی‌ثانیه در آن تنظیم کنید:

      pauseTime: 3000,  
      

      که بعد از اضافه کردن کد زیر را خواهید داشت :

      <script>
          $(window).load(function() {
              $('#slider').nivoSlider({
                  directionNavHide: false,
                  captionOpacity: 1,
      	    pauseTime: 3000, 
                  prevText: '<',
                  nextText: '>'
              });
          });
      </script>
      
    • با سلام،

      اگر منظورتون اینه که کلاً از صفر یک اسلایدر بسازید باید دانش jQuery شما در حد خوبی باشه.
      ولی می تونید از اسلایدرهای open source استفاده کرده و آنها را بر حسب نیازتان توسعه دهید.

      این جمله را گوگل کنید آموزش های خوبی را می تونید پیدا کنید:
      how to make a image slider from scratch

      سپاس

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

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

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
(الزامی*)
(اختیاری)

لطفاً جای‌خالی در معادله زیر را پر کنید: * Time limit is exhausted. Please reload the CAPTCHA.