6 Replies Latest reply on Nov 25, 2014 6:16 AM by Bruke

    Slider Trouble

    podbarron Level 1

      What's up with my code? It keeps saying there's a syntax error in line #4.

       

      // JavaScript Document<script type="text/javascript">

      $('.slider').each(function(index, element) {

          var $this = $(this),

         var $group = $this.find('.slide-group'), //Line 4

          var $slides = $this.find('.slide'),

          var buttonArray = [],

          var currentIndex = 0,

          var timeout,;

         

          // move() - Function to move the slides goes here

          function move(newIndex) {

              var animateLeft, slideLeft;

             

              advance()

             

              if ($group,is(':animated') || currentIndex === newIndex {

                  return;

              }

             

              buttonArray[currentIndex].removeClass('active');

              buttonArray[newIndex].addClass('active);

             

              if (newIndex > currentIndex) {

                  slideLeft = '100%';

                  animateLeft = '-100%';

              } else {

                slideLeft = '-100%';

                animateLeft = '100%;

              }

             

              $slides.eq(newIndex).css( {slideLeft, display: 'block'} );

              $group.animate( {left animateLeft} , funation() {

                  $slides.eq(currentIndex).css( {display: 'none'} );

                  $slides.eq(newIndex).css( {left: 0} );

                  $group.css( {left: 0} );

                  currentIndex = newIndex;

              });

          }

         

          function advance () {

              clearTimeout()timeout;

              // Start timer to run an anonymous function every 4 seconds

              timout = setTimeout (function() {

                  if {currentIndex < ($slides.length - 1)) {

                      move(currentIndex + 1);

                  } else {

                      move(0);

                  }

                  }, 4000);

              }

          }

         

          $.each($slides, function(index){

              // Create a button element for the button

              var $button = $()'<button type="button" class="slide-btn">&bull;</button>');

              if (index === currentIndex) {

                  $button.addClass('active');

              }

              $button.on('click', function() {

                  move(index);

              }).appendTo('slide-buttons');

              buttonArray.push($button);

          });

         

          advance();

      });

        • 1. Re: Slider Trouble
          BenPleysier Adobe Community Professional & MVP

          Apart from the font being larger than the rest, I do not see a problem with that line.

           

          What I do see as a problem is

          var timeout,;

          • 2. Re: Slider Trouble
            podbarron Level 1

            Ben,

            Thanks for responding. I fixed that and it still says that there is a code hinting problem on the same line. The font isn't that big in my real code .

            • 3. Re: Slider Trouble
              BenPleysier Adobe Community Professional & MVP

              Sorry, I knew that the font wouldn't be so big in the real code, it's just my warped sense of humour. I'll try not to do that in the future.

               

              To help me understand what is going wrong, please supply the name of the slider that you are using, perhaps paired to a URL

              • 4. Re: Slider Trouble
                podbarron Level 1

                Well there's no name of the slider. I got it from a book I'm studying called Javascript. There's something wrong specific to line 4, because it doesn't matter if I delete that statement or any other. The problem is in line 4. It's so weird. Do you know of another slider that's pretty cut and dried and I don't have to deal with it. Would like it to be responsive.

                • 5. Re: Slider Trouble
                  Nancy OShea Adobe Community Professional & MVP

                  I like jQuery Cycle2.

                  Cycle2

                  Cycle2 Carousel

                   

                   

                  Nancy O.

                  1 person found this helpful
                  • 6. Re: Slider Trouble
                    Bruke Level 1

                    Hi,

                     

                    I think we are reading the same book, as I'm having almost the exact same issue with a bit of code from a book by Jon Duckett.  Here's the source code from the book, followed by my solution:

                     

                    Source:

                    $('.slider').each(function(){

                        var $this = $(this),

                        var $group = $this.find('.slide-group'),

                        var $slides = $this.find('.slide'),

                        var buttonArray = [],

                        var currentIndex = 0,

                        var timeout;

                     

                    Fix:

                    $('.slider').each(function(){

                        var $this = $(this);

                        var $group = $this.find('.slide-group');

                        var $slides = $this.find('.slide');

                        var buttonArray = [];

                        var currentIndex = 0;

                        var timeout;

                     

                    I changed the end of each line to terminate in a semicolon instead of a comma and the warnings went away in Dreamweaver (and warnings also went away in Firebug for Firefox).  So... that answers your original question but, the code from the book I'm reading still didn't work as written.  If you are in fact working with code from Jon Duckett's book, make sure to wrap the provided HTML code inside another div with a class of "slider" and add wrap all your javascript inside of $(document).ready(function() {  // code  }); for it to actually work. At that point, it works fine.

                    1 person found this helpful