Często na stronach internetowych można znaleźć Slidery. Pozwalają one nam zaoszczędzić dużo miejsca, a także dodać naszej stronie trochę więcej profesjonalizmu. Wydają mi się bardzo dobrą metodą prezentacji prac w portfolio, choć można je zastosować praktycznie wszędzie i zamiast obrazów umieścić w nich treść. Nie wymagają też do zastosowania wielkiego kunsztu programistycznego, zwłascza, że są do tego gotowe skrypty, które wystarczy użyć na naszej stronie. Teraz właśnie przedstawię w pięciu prostych krokach metodę instalacji jednego z nich. Poniżej w przygotowanym przeze mnie demo, możecie zobaczyć jak to wygląda, a w dalszej części wpisu dowiecie się jak dodać taki Slider do własnej strony.

demo

1. Po pierwsze musimy pobrać paczkę z gotowym skryptem, którego autorem jest Alen Grakalic.
download
2. Gdy mamy już pobraną i rozpakowaną paczkę musimy przejść do folderu naszej strony internetowej, bądź to na naszym komputerze, lub na serwerze jeśli chcemy działać na już istniejącej stronie. Z folderu ze skryptem easySlider kopiujemy cały folder o nazwie js na nasz serwer bądź do folderu z naszą stroną na komputerze.

3. Teraz musimy otworzyć do edycji plik index.html i dodajemy między znacznikami <head>…</head> ten kod:

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/easySlider.packed.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#slider”).easySlider();
});
</script>

4. Teraz przechodzimy do edycji pliku style.css. Musimy w arkuszu stylów dodać nowy styl odpowiadający za nasz Slider. W tym celu umieszczamy w nim taki oto kod:

#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}

#slider, #slider li {
width: 949px;
height: 287px;
overflow: hidden;
}

span#prevBtn {
float: left;
margin-top: 10px;
}

span#nextBtn{
float: right;
margin-top: 10px;

5. Już praktycznie skończyliśmy. Zostało nam teraz tylko dodać kod odpowiadający za wyświeltanie Slidera na stronie. Otwieramy zatem do edycji plik odpowiadający za stronę, na której ma być Slider.

I wklejamy kod, który znajduje się tutaj http://www.wklejto.pl/33535

Filozofia jest prosta, to co znajduje się między znacznikami “li” jest pojedynczym slajdem. To wszystko, po tych czynnościach wszystko powinno działać jak należy.