-1

the code: http://jsfiddle.net/n2m4absf/ (wont be functional, this is linked for code display purposes). trying to use:

setInterval(function(){slideCard();}
, 5000);

this carousel is a div box that moves in -883px chunks of margin-left. i want it to scroll automatically (thinking set interval would be the logic to use) every 5 seconds or so.

i have other js that handles the on click functions for navigating the carousel manually, but i dont think they should be effecting the autoplay. they do however live in the same file as the above js.

just need to get autoplay working and not sure why my js isnt doing it.

heug
  • 982
  • 2
  • 11
  • 23
  • Uncaught ReferenceError: $ is not defined – epascarello Oct 12 '15 at 02:59
  • The variable `count` should be declared outside of the `slideCard` method – Arun P Johny Oct 12 '15 at 03:01
  • You need to start by including jQuery in your fiddle. – ryanpcmcquen Oct 12 '15 at 03:04
  • jquery is included in my project, thats just a snippet – heug Oct 12 '15 at 03:06
  • Well you should make the fiddle work....Do you know how many people have that issue on this site... a lot... – epascarello Oct 12 '15 at 03:09
  • @ryanpcmcquen why would i need to do that anyway when anyone can add it themselves by selecting it in the frameworks pane? – heug Oct 12 '15 at 03:10
  • @epascarello ...my carousel is so simple, this should be solve-able by just looking at the js + html ....i just cant figure it out. doesnt make sense to me why this doesnt work. – heug Oct 12 '15 at 03:11
  • @heug but as the person who is asking for help, it is your duty to give us a proper sample, we can't simply guess that you have included jQuery – Arun P Johny Oct 12 '15 at 03:11
  • 1
    @heug we will also need the css part if you want a proper solution – Arun P Johny Oct 12 '15 at 03:11
  • If you want a complete answer, do not give a half-baked example. – ryanpcmcquen Oct 12 '15 at 03:18
  • css is actually not important to show here at all....im sry guys, but the time spent rigging up this carousel in fiddle would honestly not be worth it...@ArunPJohny already provided me a half-baked solution and it did help, and he's right, i should have atleast mentioned jquery was in the project or included it in fiddle. – heug Oct 12 '15 at 03:50

1 Answers1

0

There are multiple problems in the script.

  1. The variable count is declared as local to the method so in every call it will get initiated to 0 causing the first if block to execute.
  2. Since you have used different if blocks, each if blocks will get evaluated in each iteration, so only the value of the last block will be affected

Since you don't have a constant logic for the margin value, I think you can use an array of margin values like

var slide = $('div.inner > ul');

var count = 0,
    margins = ['-883px', '-1686px', 0];

function slideCard() {
    slide.css('margin-left', margins[count++ % 3]);
};

setInterval(function () {
    slideCard();
}, 1000);
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • thank you!! this clever modulus logic works for me. now just need make the manual toggle dots match up with the current number slide that is showing. – heug Oct 12 '15 at 03:41