logoDavid Arcent :: Développeur web

Expériences

  • demoiselle

    [Thinks]

    THinks

    Is

    a

    New

    Kind

    of

    Slider

  • alt

    Réalisation

    facile

    d'animations

    originales

HTML :

			<head>
				
				<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
				<script type="text/javascript" src="js/thinks.js"></script>
				
				<link type="text/css" rel="stylesheet" href="css/thinks.css"/>
			</head>
			<!-- the slider -->
			<div id="thinks" style="width:...px; height : ...px">
				<div class="no-script">
					<noscript>
						<!--first image when javascript disable -->
						<img src="img/first.jpg" alt="first"/>
					</noscript>
				</div>
				<ul>
					<!-- declaration of slides -->
					<li>
						<!-- set the image of the slide like this -->
						<img src="img/first.jpg"  alt="first"  [data-autoscale="true|false" data-position="css background-position value"] />
						<!-- for each slide -> layers, only use left and top to set it position -->
						<div class="layer" style="top : ..px; left : ..px" [data-speed="ms" data-delay="ms" data-anim-in="effect" data-anim-out="effect"]>
							<!-- in the layer, put basic html -->
							<p>Hey ! I'm a layer !</p>
						</div>

						<div class="layer">
							<p>And I'm another one !</p>
						</div>
					</li>
					<!-- you can override effect in the <li> of the slide -->
					<li [data-anim-in="effect"] >
						<img src="img/second.jpg" alt="second" />
					</li>

					<li><img src="img/third.jpg"  alt="third"  /></li>
				</ul>

				<!-- list of navigation (navBar) -->
				<div id="controls"></div>
				<!-- next and previou button -->
				<div id="prev"></div>
				<div id="next"></div>
			</div>

JavaScript : 

			// launch the slider
			$('#thinks').thinks({
					layerSelector		: ".layer", // default ".layer"
					pervSelector		: "#prev", // default "#prev"
					nextSelector		: "#next", // default "#next"
					navSelector			: "#controls", // default "#controls"
					speed				: 500, // default 500
					delay				: 5000, // default 5000
					effect 				: "random", default "random"
					numberNav			: false, // default false
					pauseHover			: true, // default true
			});

Options :

  • layerSelector : ( selector )
  • pervSelector : ( selector )
  • nextSelector : ( selector )
  • navSelector : ( selector )
  • speed : ( ms )
  • delay : ( ms or false )
  • effect : ( fade | slidingBot | slindingLeft | slidingTop | slidingRight | random )
  • numberNav : ( true or false )
  • pauseHover : ( true or false )