JQuery CarouFredsel Gemaakt door Yannick. Inhoudstafel O CarouFredsel O Wat is CarouFredsel ? O Downloaden O Script O HTML O CSS O Javascript O Voorbeelden.

Presentatie over: "JQuery CarouFredsel Gemaakt door Yannick. Inhoudstafel O CarouFredsel O Wat is CarouFredsel ? O Downloaden O Script O HTML O CSS O Javascript O Voorbeelden."— Transcript van de presentatie:

1 JQuery CarouFredsel Gemaakt door Yannick

2 Inhoudstafel O CarouFredsel O Wat is CarouFredsel ? O Downloaden O Script O HTML O CSS O Javascript O Voorbeelden

3 CarouFredsel: Wat is dat? O Plugin O Jquery O Elementen -> carousel O Interactie O Scrollen -> elke richting O Slideshow

4 CarouFredsel: Download O http://caroufredsel.dev7studios.com/ http://caroufredsel.dev7studios.com/

5 Script: HTML prev next

6 Script: CSS.NaamContainer { padding: 15px ; position: relative; }.NaamKader img { border: 1px solid #ccc; background-color: #ccc; padding: 10px; margin: 7px; } a.prev, a.next { background-image: URL() ; width: 45px; height: 50px; position: absolute; top: 85px; } a.prev, { left: -22px; background-position: 0px; } a.prev:hover { background-position: 0-50px; } a.prev.disabled { background-position: 0-100px; } Hetzelfde met de a.next a.prev.disabled, a.next.disabled { cursor: default; } a.prev span, a.next span { display: none; }

7 Script: Javascript $(“#NaamKader”).carouFredSel({ items: 1, auto: false, prev: { button: “#Naam_prev”, key: “left” } next: { button: “#Naam_next”, key: “right” }

8 Voorbeelden O http://coolcarousels.frebsite.nl/c/71/coolca rousel.html http://coolcarousels.frebsite.nl/c/71/coolca rousel.html O http://coolcarousels.frebsite.nl/c/63/coolca rousel.html http://coolcarousels.frebsite.nl/c/63/coolca rousel.html O http://coolcarousels.frebsite.nl/c/28/coolca rousel.html http://coolcarousels.frebsite.nl/c/28/coolca rousel.html

9