10.04.2015 o 14:10

Prosty rotator zdjęć i div-ów

Witam.

Dzisiaj chciałbym wam zaprezentować mój rotator zdjęć, który sam napisałem i jestem z niego zadowolony.

Dlaczego o nim piszę, ponieważ ten rotator jest bardzo prosty w obsłudze i na dodatek można w nim przewijać i zdjęcia i DIV-y z taką zawartością jaką chcemy.

Bez żadnych ograniczeń. W prosty sposób można napisać własny kod CSS i podmienić grafikę (strzałki i kropki).

Osobiście stosuję go do wszystkich stron jakie wykonuję na moim CMS-ie.

Na początku była to wersja bez automatycznego przewijania, ale później uznałem, że niektórzy chcą by zdjęcia same się przewijały. Wtedy wykonałem drugą wersje skryptu.

Może trochę o obsłudze.
Jest ona bardzo prosta. Przykładowa budowa kodu wygląda tak:

<div id="Slider" class="Demo">
       <div id="left" >
		<div class="left">
			<img src="imgs/left.png">
		</div>
	</div>
        <div id="ItemNow" tag="1"></div>
        <div id="center">
            <div id="content">
                <img src="banner/1.png"  class="item" />
	        <img src="banner/2.png"  class="item" />
                <img src="banner/3.png"  class="item" />
            </div>
        </div>
	<div id="right">
		<div  class="right">
			<img src="imgs/right.png">
		</div>
	</div>
    <div id="icon"></div>
</div>


Div z id o nazwie Slider, to główny div w którym jest rotator.

Z id o nazwie left, to div w którym jest obrazek po naciśnięciu, którego przewijamy zdjęcia w lewo, a div z id right w prawo.

ItemNow, to div w którym jest określone zdjęcie, które ma wyświetlać jako pierwsze.

W div-ie o id content wyświetlane są wszystkie div-y lub obrazki, które chcemy przewijać.

Każdy z div-ów lub obrazków musi posiadać klasę o nazwie item, aby zostały uznane przez skrypt jako elementy, które ma być przewijane.

A ikonki lub kropki czy co tam chcemy do przwijania obrazków, są dodawane przez skrypt w div-ie o id icon.

Gdy nie chcemy danego elementu w naszym rotatorze, to wystarczy go usunąć.

Zaraz po tym kodzie trzeba dodać skrypt jQuery.
Skrypt ten ma taką budowę.

<script>
$(document).ready(function() {
	imageSlider("#Slider.Demo", true, 2); 
});
</script>
<script src="slider2.js"></script>


Pierwszy parametr #Slider.Demo, to div, w którym mamy swój rotator. Następny parametr, to true lub false, w zależności czy chcemy, aby nasz rotator sam przewijał treść czy nie. Ostatnim paramterem są liczby, które są sekundami  określającymi co ile sekund ma się przwijąć.


Pozdrawiam
DraG

Zostaw komentarz
Komentarze
© 2010 - 2024 - Karol Drąg
Wszelkie prawa zastrzeżone
Polityka plików cookies