Ebben a tutoriálban bemutatom egy egyszerű kép slider használatát. Kérdezhetitek, hogy miért kell saját slidert készíteni mikor van rengeteg előre elkészített plugin. Erre mindig azt mondom, hogy egy plugin használata lehet megoldás, de semmiképp sem jó választás, ha nem ismerjük a működését, mert ebben az esetben a későbbiekben csak problémákba fogunk ütközni a továbbfejlesztés során.

Akkor kezdjük az alapokkal:

 

1.lépés – Készítsük el a listát ami meg fogja jeleníteni a képeket

Nincs is másra szükségünk, mint egy egyszerű html listára amelyben kép elemeket fogunk létrehozni:

<div id="simple-slider" class="ByTech">
    <ol id="slides" start="1">
        <li class="slide color-0 alive" style="background-image:url(/Link a képhez/);"></li>
        <li class="slide color-1" style="background-image:url(/Link a képhez/);"></li>
        <li class="slide color-2" style="background-image:url(/Link a képhez/);"></li>
    </ol>
    <span class="nav fa fa-chevron-left fa-3x" id="left"></span>
    <span class="nav fa fa-chevron-right fa-3x" id="right"></span>
</div>

2.lépés – CSS elkészítése

A slider megfelelő használhatóságához ki kell alakítanunk az egyes elemek kinézetét, ehhez a következő a kódot használjuk

/*A simple-slider div pozícionálásá, méretezése és a kilogó elemek elrejtése*/
#simple-slider {
    position: fixed;
    width: 100%;
    height: 50%;
    max-height: 450px;
    overflow: hidden;
    top: 0px;
    left: 0px;
}

#slides {
    height: 100%;  
    position: absolute;
    margin: 0px;
    padding: 0px;
    -webkit-transform: translate3d(0px,0px,0px);
    transform: translate3d(0px,0px,0px); 
    transition: all 0.66s ease; -webkit-transition: all 0.66s ease; 
}

/*Az egyes slide-ok pozícionálása, méretezése*/
.slide {
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 100%;
    background: #ccc;
    text-align: center;
    line-height: 300px; 
    background-size: cover; 
    background-position: 50% 50%;
    color: #fff;
    -webkit-transform: translate3d(0px,0px,0px);
    visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

/*Az aktuális slide megjelenítése*/
.alive { 
    visibility: visible; 
}

/*A navigációs gombok tulajdonságainak beállítása*/
.nav { 
    position: absolute; 
    z-index: 9; 
    top: 50%; 
    cursor: pointer; 
    color: #fff; 
    opacity: 0.7; 
    transition: all 0.66s ease; -webkit-transition: all 0.66s ease; 
}

/*Ha a navigációs gombok fölé navigálunk, akkor az opacity állítása egyre*/
.nav:hover { 
    opacity: 1.0; 
}

/*Az "előző" navigációs gomb elhelyezkedése*/
#left { 
    left: 3%; 
}

/*A "következő" navigációs gomb elhelyezkedése*/
#right { 
    right: 3%; 
}

3.lépés – A slider léptetésének beállítása

A slider elemei között a navigációs gombok segítségével tudunk léptetni, ehhez az alábbi kód szükséges:

//Változók beállítása
var item = 1;
var total = 0;
var WindowWidth = $(window).width();

$(document).ready(function(){
    var SlideCount = $('#slides li').length; //A slide elemek számának lekérése
    var SlidesWidth = SlideCount * WindowWidth; //A slider teljes szélességének kalkulálása

    item = 0; //Aktuálisan hányadik elem az aktív
    total = SlideCount; 

    $('.slide').css('width',WindowWidth+'px'); //Az egyes slide-ok szélességének beállítása
    $('#slides').css('width',SlidesWidth+'px'); //A slides div szélességének beállítása (Az összes slide-ot ez tartalmazza)

    $("#slides li:nth-child(1)").addClass('alive'); //Az első aktívvá tétele

    //Az előző gombra kattintva átlapoz a korábbi slide-ra
    $('#left').click(function() { 
        Control('prev'); 
    }); 
    
    //A következő gombra kattintva átlapoz a következő slide-ra
    $('#right').click(function() { 
        Control('next'); 
    }); 
});

//Ez a function dönti el, hogy a következő, vagy az előző képet kell-e megjeleníteni a sliderben és ez alapján hívja meg a Slide functiont
function Control(direction){
    if (direction == 'prev') { 
        var target = item - 1; 
    } else { 
        var target = item + 1; 
    }
    
    if (target == -1) { 
        Slide(total-1); 
    } else if (target == total) { 
        Slide(0); 
    }  else { 
        Slide(target); 
    }
}

//A Slide function felelős a képek lapozásáért és az aktív kép beállításáért
function Slide(target){
    var $margin = WindowWidth * target; 
    var $actualtarget = target+1;

    $("#slides li:nth-child("+$actualtarget+")").addClass('alive');
    $('#slides').css('transform','translate3d(-'+$margin+'px,0px,0px)');	
    item = target; 
}

 

Ahogy a fentiekből is láthatjátok, egy nagyon egyszerű kóddal fel lehet építeni a slider-t, amelyet ezután könnyedén tovább is tudunk fejleszteni.

A következő részben a slider automatikus működésének kialakítását fogom bemutatni.

A teljes forrás letölthető innen.

 

Válaszolj

Az e-mail címed nem publikáljuk.