درمرحله اول ما با ایجاد یک مارک آپ ساده HTML کار را شروع می کنیم ، برای این کار همانند شکل زیر یک <div> با کلاس flex-container و در داخل آن نیز یک <div> با کلاس flex-slider ایجاد می کنیم ، و کنترل اسلاید خود را درون این کلاس قرار می دهیم توجه داشته باشید برای ایجاد لیست اسلاید خود از تگهای لیست یا <li> استفاده می کنیم هماننده شکل زیر

1
2
3
4
5
6
7
8
9
10
11
12
13
13
14
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="/img/slide1.jpg" />
<li>
<img src="/img/slide2.jpg" />
</li>
<li>
<img src="/img/slide3.jpg" />
</li>
</ul>
</div>
</div>

در این مرحله ما کتابخانه جی کوئری و فلکس اسلایدر را به پروژه خود اضافه می نمائیم ، و برای لود کردن اسلایدر از کد زیر که در وب سایت اصلی نیز موجود است استفاده می کنیم

1
2
3
4
5
6
7
8
9
10
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.flexslider-min.js">
<script>
$(document).ready(function () {
$('.flexslider').flexslider({
animation: 'fade',
controlsContainer: '.flexslider'
});
});
</script>

برای شروع کار ما ابتدا با صفر کردن مارجین و پدینگ کلاس های اصلی رو ریست می کنیم تا در تمام مرورگرها به صورت استاندارد اسلایدر رو به نمایش بگذارد

1
2
3
4
5
6
7
8
9
10
.flex-container a:active
.flexslider a:active,
.flex-container a:focus
.flexslider a:focus { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
}

بعد از اون ما اسلاید رو به صورت hide در صفحه اصلی در می آوریم و یک سری تنظیمات کوچک تا در هنگام لود شدن صفحه ایجاد به هم ریختگی با پرش نداشته باشیم

1
2
3
4
5
6
7
8
9
10
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;}
.flexslider .slides img {
width: 100%;
display: block;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;}

برای پایان این قسمت چند پراپرتی جهت ایجاد clear و از بین بردن float از قسمت اسلاید اضافه می کنیم

1
2
3
4
5
6
7
8
9
10
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }

در این مرحله ما رنگ بکگراند container را سفید در نظر گرفتیم ، و مقداری shadow با استفاده از خاصیت css3 به آن اضافه نمویم ،و پدینگ 10px برای ایجاد گوشه های گرد

1
2
3
4
5
6
7
8
9
10
11
12
.flexslider {
position: relative;
zoom: 1;
padding: 10px;
background: #ffffff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
box-shadow: 0px 1px 1px rgba(0,0,0, .2);
};

ما در اینجا یک ماکسیموم و مینیموم برای اسلایدر خود در نظر گرفتیم ، شما ممکن است نیاز به تغییر و یا حذف این سایز برای پروژه خود داشته باشید ، همچنین پراپرتی zoom را برابر با 1 قرار دادیم تا در هنگام استفاده از دیوایس های مختلف و ریسایز شدن مرورگر در تلفن های همراه جوگیری کنیم .

1
2
3
4
5
.flex-container {
min-width: 150px;
max-width: 960px;
.flexslider .slides { zoom: 1; }
}

برای ایجاد دکمه های بعدی و قبلی در اینحا از رنگ سبز گرادیانت با استفاده از خاصیت cc3 استفاده نمودیم ، برای align نمودن دکمه ها به صورت عمودی در اینجا از پوزیشن استفاده نمودیم و ار بالا 50% و همچنین مارجین منفی به مقدار تقریبا نصف از اندازه اصلی دکمه در نظر گرفتیم .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flex-direction-nav a {
display: block;
position: absolute;
margin: -17px 0 0 0;
width: 35px;
height: 35px;
top: 50%;
cursor: pointer;
text-indent: -9999px;
background-color: #82d344;
background-image: -webkit-gradient(linear,
left top, left bottom, from(#82d344), to(#51af34);
background-image: -webkit-linear-gradient(top, #82d344, #51af34);
background-image: -moz-linear-gradient(top, #82d344, #51af34);
background-image: -o-linear-gradient(top, #82d344, #51af34);
background-image: linear-gradient(to bottom, #82d344, #51af34);
};

در اینجا فلش ها را با استفاده از :before” pseudo-selector. اضافه نمودیم ، pseudo selector به ما اجازه اضافه نمودن مقدارهای مورد نیاز بدون نیاز به ایجاد تگ جدید در HTML را می دهند

برای ایجاد افکت ریبون در اینجا ما از تکنیک ساده و با استفاده از بردر در css این کار را انجام می دهیم ، این اشکال را نیز با استفاده از pseudo-selector, “:after” اضافه می نمائیم

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flex-direction-nav a:before {
display: block;
position: absolute;
content: '';
width: 9px;
height: 13px;
top: 11px;
left: 11px;
background: url(../img/arrows.png) no-repeat;
}
.flex-direction-nav a:after {
display: block;
position: absolute;
content: '';
width: 0;
height: 0;
top: 35px;
};

در قسمت پایان مرحله ساخت دکمه ها با ایحاد گوشه های گرد و استفاده از پوزیشن آن ها را به سمت راست و چپ هدایت می کنیم و همچنین علامت مثلثی شکل روی دکمه ها را به وجود می آوریم

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.flex-direction-nav .flex-next {
right: -5px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.flex-direction-nav .flex-prev {
left: -5px;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.flex-direction-nav .flex-next:before { background-
position: -9px 0; left: 15px; }
.flex-direction-nav .flex-prev:before { background-position: 0 0; }
.flex-direction-nav .flex-next:after {
right: 0;
border-bottom: 5px solid transparent;
border-left: 5px solid #31611e;
}
.flex-direction-nav .flex-prev:after {
left: 0;
border-bottom: 5px solid transparent;
border-right: 5px solid #31611e;
}

در این قسمت به ایجاد کنترل هایی گرد کوچک که در پایین اسلاید موجود هستند و با کلیک بر روی آن ها اسلایدر تغییر می پذیرد می پردازیم ، برای شروع ابتدا یک دایره نیاز داریم که با استفاده از border-radius ایجاد می نمائیم و همچنین “box-shadow” و همچنین برای زمانی که اسلاید مورد نظر ما اکتیو هست سایه “box-shadow” و حذف و خاصیت گرادیانت را برای دکمه استفاده می نمائیم .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.flexslider .flex-control-nav {
position: absolute;
width: 100%;
bottom: -40px;
text-align: center;
margin: 0 0 0 -10px;
}
.flex-control-nav li {
display: inline-block;
zoom: 1;
}
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
width: 12px;
height: 12px;
margin: 0 3px;
background-color: #b6b6b6 \9;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
-moz-box-shadow: inset 0 0 0 2px #b6b6b6;
box-shadow: inset 0 0 0 2px #b6b6b6;
}
.flex-control-paging li a.flex-active {
background-color: #82d344;
background-image: -webkit-gradient(linear,
left top, left bottom, from(#82d344), to(#51af34);
background-image: -moz-linear-gradient(top, #82d344, #51af34);
background-image: -o-linear-gradient(top, #82d344, #51af34);
background-image: linear-gradient(to bottom, #82d344, #51af34);
-webkit-box-shadow: none;
-moz-box-shadow: none;
}

تقریبا کار ما به پایان رسید و در این مرحله به ایجاد تغیرات مورد نیاز برای captions یا نوشته های روی اسلاید می پردازیم

در اینجا رنگ بس زمینه نوشته را سیاه و همچنین کمی transparency با استفاده از rgba color ایجاد و همچنین با استفاده از خاصیت پوزیشن آن را در قسمت پایین اسلاید خود قرار می دهیم

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flexslider .slides p {
display: block;
position: absolute;
left: 0;
bottom: 0;
padding: 0 5px;
margin: 0;
font-size: 12px;
font-weight: bold;
line-height: 20px;
color: white;
background-color: #222222;
background: rgba(0,0,0, .9);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

دانلود سورس این آموزش به همراه فلکس اسلایدر

دانلود و مثال های دیگر فلکس اسلایدر

گروه طراحی سایت بستا مفتخر است شما را در طراحی سایت به صورت استاندارد در تمامی مراحل از پیاده سازی تا اجرا همراهی نماید