Kaydırıcı html biçimlendirme çok basittir. "Flex-container" sınıfı ile bir oluşturacağız , sonra bu sınıfının içinde "flex-slider" sınıfıyla bir tane daha ekleyeceğiz, bu div tüm kaydırıcı kontrollerine yerleştirilecek. Bitirmek için tüm slaytları eklemek için sırasız bir liste oluşturacağız. Her slayt bir liste öğesinin içinde olmalıdır.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
< div class = "flex-container" > < div class = "flexslider" > < ul class = "slides" > < li > < a href = "#" >< img src = "img/slide1.jpg" />
|
Ardından, jQuery kitaplığını ve FlexSlider eklentisini dahil edeceğiz . Kaydırıcıyı yüklemek için şu kodu ekleyin; ayarları orada da ayarlayabilirsiniz, daha fazla ayar için eklentinin web sitesini ziyaret edin.
1
2
3
4
5
6
7
8
9
10
11
12
|
< link rel = "stylesheet" href = "css/slider.css" type = "text/css" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" >
|
Önce, tüm kenar boşluklarını, paletleri vb. Temizlemek ve tüm tarayıcılarda tutarlılık sağlamak için bazı sıfırlama stilleri ekleyeceğiz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.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 ; list-style : none ; } .flexslider a img { outline : none ; border : none ; } .flexslider { margin : 0 ; padding : 0 ; } |
Ardından, sayfa yüklemesi sırasında görüntülerin atlanmasını önlemek için slaytları gizleyeceğiz. Ayrıca resimler için bazı stiller ayarlayacağız.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.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 ; } |
Bu adımı bitirmek için şaryoların kayar kısımlarından temizlenmesi için bazı stiller ekleyeceğiz.
1
2
3
4
5
6
7
8
9
10
11
|
.slides:after { content : "."; display : block ; clear : both ; visibility : hidden ; line-height : 0 ; height : 0 ; } html[xmlns] .slides { display : block ; } * html .slides { height : 1% ; } |
Konteyner için arka plan rengini beyaza ayarlayacağız ve CSS3 mülkiyetini "box-shadow" kullanarak küçük bir gölge ekleyeceğiz. Sonra 10px dolgu ve yuvarlatılmış köşeler ekleyeceğiz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.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 ); } |
Kaydırıcı için minimum ve maksimum genişlik ayarladım. Projenizi uygularken onu değiştirmeniz veya kaldırmanız gerekebilir. Zum özelliğini 1 olarak ayarlarız, bu mobil tarayıcılarda yeniden boyutlandırmayı önler.
1
2
3
4
5
6
|
.flex-container { min-width : 150px ; max-width : 960px ; } .flexslider .slides { zoom: 1 ; } |
Sonraki ve önceki düğmeler için yeşil bir CSS3 degrade ekleyeceğiz, genişliği ve yüksekliği vb. Ayarlayacağız. Düğmeleri dikey olarak hizalamak için üstten% 50 konumlandırmamız ve düğme genişliğinin yarısı negatif bir kenar boşluğu eklememiz gerekiyor.
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 ); } |
Oklar ": before" sözde seçicisini kullanarak eklenecektir . Bu sahte seçici, html'ye yeni bir etiket eklemeden bazı içeriği eklememizi sağlar. Şerit efekt oluşturmak için sadece CSS kullanarak şekiller kolayca oluşturmak için bir kenarlık hüneri kullanacağız, bu şekiller bir ": after" sözde seçicisini kullanarak dahil edilecek .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.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 ; } |
Bitirmek için düğmeleri yuvarlatılmış köşeler ekleyerek sağa ve sola konumlandırıp şerit efektini oluşturacak "üçgenler" ekleyecektir.
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
27
28
29
30
|
.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 ; } |
Kaydırıcı kontrolleri, sürgünün ucundaki küçük daireler olup, bunlar size bir slaydı tıklamanıza izin verir. Bu kabı kaydırıcının altına yerleştiririz. Ardından, "border-radius" ve "box-shadow" özelliklerini kullanarak daireler oluşturacağız. Etkin slayt çemberinde kutu gölgesini kaldıracağız ve düğmelerde kullandığımız CSS3 degrade ekleyeceğiz.
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
.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 ; |