{"id":17,"date":"2011-02-01T19:16:21","date_gmt":"2011-02-01T19:16:21","guid":{"rendered":"http:\/\/sitekicker.uwsweb.com\/blog\/?p=17"},"modified":"2011-02-01T19:17:10","modified_gmt":"2011-02-01T19:17:10","slug":"basic-jquery-rotator","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/basic-jquery-rotator\/","title":{"rendered":"Basic jQuery Rotator"},"content":{"rendered":"

There are hundreds of jQuery rotator \/ slideshow plugins out there, but at some point, you may decide that your needs to very specific. The code below should provide a basis for creating your own jQuery rotator. This code will also degrade gracefully if JavaScript is not enabled on a given browser.<\/p>\n

The HTML<\/h3>\n

<div id="slide-wrapper">
\n\t    <div class="slide">
\n\t<\/code>        <!-- rotating content goes here -->
\n\t<\/code>    <\/div>
\n\t    <div class="slide initial-hide">
\n\t<\/code>        <!-- rotating content goes here -->
\n\t<\/code>    <\/div>
\n\t    <div class="slide initial-hide">
\n\t<\/code>        <!-- rotating content goes here -->
\n\t<\/code>    <\/div>
\n\t<\/div>
\n\t<\/code><\/p>\n

The CSS<\/h3>\n

#<\/code>slide-wrapper<\/code> { position: relative; height: 400px; }
\n\t#<\/code>slide-wrapper<\/code> div.slide { position: absolute; }
\n\t#<\/code>slide-wrapper<\/code> .initial-hide { display: none; }
\n\t<\/code><\/p>\n

The jQuery<\/h3>\n

var currentPosition = 0;
\n\tvar totalSlides = 0;<\/p>\n

\t$(document).ready(function() {
\n\t   
\n\t    \/\/ slides
\n\t    totalSlides = $('#slide-wrapper .slide').length;
\n\t    setTimeout('transition()', 3000);
\n\t   
\n\t});<\/p>\n

\ttransition = function() {
\n\t    currentPosition++;
\n\t    lastPosition = currentPosition - 1;
\n\t    if (currentPosition == totalSlides)
\n\t        currentPosition = 0;
\n\t   
\n\t    if (lastPosition < 0)
\n\t        lastPosition = totalSlides - 1;
\n\t       
\n\t    $('#<\/code>slide-wrapper<\/code> .slide:eq(' + lastPosition + ')').fadeOut('slow');
\n\t    $('#<\/code>slide-wrapper<\/code> .slide:eq(' + currentPosition + ')').fadeIn('slow');
\n\t   
\n\t    setTimeout('transition()', 3000);
\n\t}
\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

There are hundreds of jQuery rotator \/ slideshow plugins out there, but at some point, you may decide that your needs to very specific. The…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[5],"tags":[11,10],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/17"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":3,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/17\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}