JQuery ve CSS3 Slider Oluşturma | Web Tasarım, Kurumsal Kimlik, Logo Tasarımı, Katalog, Tuzla 
JQuery ve CSS3 Slider Oluşturma

JQuery ve CSS3 Slider Oluşturma


ADIM 1 - İşaretleme

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" />a>
            li>
            
            <li>
                <img src="img/slide2.jpg" />
            li>
            
            <li>
                <img src="img/slide3.jpg" />
                <p>Designing The Well-Tempered Webp>
            li>
        ul>
    div>
div>

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">script>
    <script src="js/jquery.flexslider-min.js">script>
 
<script>
$(document).ready(function () {
    $('.flexslider').flexslider({
        animation: 'fade',
        controlsContainer: '.flexslider'
    });
});
script>

ADIM 2 - Temel Stiller

Ö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%; }

ADIM 3 - Konteyner Stilleri

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; }

ADIM 4 - Sonraki ve Önceki Oklar

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;
}

ADIM 5 - Sürgü Kontrolleri

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;
    cursor: pointer;