Databases
StackOverflow2013
Postsdbo
POjQuery slider - adding Next and Prev buttons
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery slider - adding Next and Prev buttons
    primarykey
    data
    text
    <p>Ok so I have used the same code to loop list items as an image slider on a timer and it has worked great. Now I want to add 'Next' and 'Prev' buttons to this to add to the user experience. I have looked around the stack, tried a few things and can't seem to come up with a solution to this.</p> <p>First here is the HTML code:</p> <pre><code>&lt;div class="container"&gt; &lt;div class="tabs"&gt; &lt;nav&gt; &lt;ul id="tabs"&gt; &lt;li&gt;&lt;a href="javascript:;" class='current'&gt;Tab1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;"&gt;Tab1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;"&gt;Tab2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;"&gt;Tab3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;"&gt;Tab4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;"&gt;Tab5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;"&gt;Tab6&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;!-- end .tabs --&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;div id="feature_list"&gt; &lt;div id="prev" class="arrows prev"&gt;&lt;a href="#"&gt;PREV&lt;/a&gt;&lt;/div&gt; &lt;ul id="output"&gt; &lt;li&gt;&lt;a href="#" target="_parent" class="corresp"&gt;Output1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" target="_parent"&gt;Output2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" target="_parent"&gt;Output3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" target="_parent"&gt;Output4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" target="_parent"&gt;Output5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" target="_parent"&gt;Output6&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" target="_parent"&gt;Output7&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="next" class="arrows next"&gt;&lt;a href="#"&gt;NEXT&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;!-- end .content --&gt; &lt;/div&gt; </code></pre> <p>Now ok the jQuery is next. But first I should explain, the code loops through the list with the id "tabs" starting with the first one adding and removing the class 'current' on each anchor tag. It then finds the corresponding item in the 'ouput' list and displays that output. Now here is the code:</p> <pre><code>&lt;script src="http://code.jquery.com/jquery-1.6.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; (function($) { $.fn.featureList = function(options) { var tabs = $(this); var output = $(options.output); new jQuery.featureList(tabs, output, options); return this; }; //Loops through tab to next and displays cooresponding output $.featureList = function(tabs, output, options) { function slide(nextli) { if (typeof nextli == "undefined") { nextli = visible_item + 1; nextli = nextli &gt;= total_items ? 0 : nextli; prevli = visible_item - 1; prevli = prevli &gt;= total_items ? 0 : prevli; } tabs.removeClass('current').filter(":eq(" + nextli + ")").addClass('current'); output.stop(true, true).filter(":visible").removeClass('cooresp').css({zIndex:10}).fadeOut(); output.filter(":eq(" + nextli + ")").addClass('cooresp').css({zIndex:15}).fadeIn(function() { visible_item = nextli; }); } var options = options || {}; var total_items = tabs.length; var visible_item = options.start_item || 0; options.pause_on_hover = options.pause_on_hover || true; options.transition_interval = options.transition_interval || 4000; output.hide().eq( visible_item ).show(); tabs.eq( visible_item ).addClass('current'); tabs.click(function() { if ($(this).hasClass('current')) { return false; } slide( tabs.index(this) ); }); if (options.transition_interval &gt; 0) { var timer = setInterval(function () { slide(); }, options.transition_interval); if (options.pause_on_hover) { tabs.mouseenter(function() { clearInterval( timer ); }).mouseleave(function() { clearInterval( timer ); timer = setInterval(function () { slide(); }, options.transition_interval); }); } } }; })(jQuery); &lt;/script&gt; &lt;script language="javascript"&gt; $(document).ready(function() { $.featureList( $("#tabs li a"), $("#output li"), { start_item : 0 } ); var next = $("#feature_list #next a"); var prev = $("#feature_list #prev a"); var tabs = $('#tabs li a'); next.click(function(){ var tabli = $('#tabs li a.current'); //var current = $('.selectoption li:visible'); var output = $("#output li.cooresp"); var currentli = $('#tabs li a.current'); output.stop(true, true).css({zIndex:10}).fadeOut(); output.prev().css({zIndex:15}).fadeIn(function() { tabsli.prev('a').addClass('current'); }); }); prev.click(function(){ var tabli = $('#tabs li a.current'); //var current = $('.selectoption li:visible'); var output = $("#output li.cooresp"); var currentli = $('#tabs li a.current'); output.stop(true, true).css({zIndex:10}).fadeOut(); output.prev().css({zIndex:15}).fadeIn(function() { tabli.stop(true, true).removeClass('current'); $('#tabs li a').prev().addClass('current'); }); }); }); &lt;/script&gt; </code></pre> <p>What I have tried to do is make it so that when someone clicks the 'Next' button, the previous image is displayed. This works (though it may be a round-about way). The main problem in when trying to use the .prev and .next() functions I have failed to get the current class to move back or forward one as well. I want both lists to always be at the same number in their respective lists. If the 'current' class is at either :first or :last I would like it to loop around like it does on the timer.</p> <p>If anyone can help I would greatly appreciate it. And if you need more info please just ask away. Thanks in advance!</p> <p><strong>EDIT</strong></p> <p>Ok so I tried taking out the next.click and putting it back into the main code area just under tabs.click :</p> <pre><code> next.click(function() { currentli = $('a.current'); nextli = currentli.parent().siblings().next('li').find('a'); console.log(currentli.parent().siblings().next('li').find('a')); slide( tabs.index(nextli) ); }); </code></pre> <p>This ALMOST works! The only problem is the variable 'nextli' is static and its value is determined only when the DOM loads. Not each time the next button is clicked. How do I get 'nextli' evaluated on each click?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USzairon87
    1. USzairon87
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery slider - adding Next and Prev buttons
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload