Adding individual slide controls

[ridinghoodmedia]

Just a minor thing for anyone using the slide( $index, speed) function:

Slider.slide( parseInt( $index ), 400 );

You need to add "parseInt" to the index value if taken from an attribute, otherwise it produces a strange bug if you are going from the first slide directly to the last slide.. otherwise no issue. Also some working code for this logic if anyone needs:

` jQuery(document).ready( function($) {

    // Set up slider logic
    Slider = $('#slider').Swipe({
      startSlide: 0,
      speed: 400,
      auto: 3000,
      continuous: true,
      disableScroll: false,
      stopPropagation: false,
      callback: function(index, elem) {},
      transitionEnd: function(index, elem) {}
    }).data('Swipe');

    // Set up first slide
    var $min = $('#services-nav .single-nav:first a').attr('index');
    // Set up last slide
    var $max = $('#services-nav .single-nav:last a').attr('index');

    $.fn.extend({

        switchSlide: function( $index ) {

            console.log( "min=" + $min + " max=" + $max );

            console.log('index '+ $index);

            if ( $index >= $min && $index <= $max ) {
                console.log('index '+ $index);
                // Change slide to index value

                // Pass integer value of index to slide fn, required to avoid bugs
                // with transition speed of 400
                Slider.slide( parseInt( $index ), 400 );

                console.log('index '+ $index);

                // Remove active class from a element and reset span colors to inactive
                $(this).parent().siblings('li[class="single-nav"]')
                    .find('a')
                    .removeClass('active')
                    .find('span')
                    .removeClass('bg-l5')
                    .addClass('bg-l2');

                // Add active class to next a element and set child span color to active
                $('#services-nav').find('a[index = "'+$index+'"]')
                    .addClass('active')
                    .find('span')
                    .removeClass('bg-l2')
                    .addClass('bg-l5');
            } 

        }

    });

    // Enable/disable hover style on prev/next button
    // Visual feedback so user sees beginning/end of slides
    $('#services-nav').on('click', 'a', function() {

        // Disable next button hover if last slide
        if ( $('#services-nav .active').attr('index') == $max ) {
            $('#next-slide span').removeClass('color-l5-hover');
        } else {
            $('#next-slide span').addClass('color-l5-hover');
        }

        // Disable prev button hover if first slide
        if ( $('#services-nav .active').attr('index') == $min ) {
            $('#prev-slide span').removeClass('color-l5-hover');
        } else {
            $('#prev-slide span').addClass('color-l5-hover');
        }

    });

    $('#next-slide').on('click', function(e) {

        // Check whether there is an "active" slide
        if ( $('#services-nav .active').attr('index') ) {
            $index = $('#services-nav .active').attr('index');
        } else {
            // Set index to first slide, required so "next" button works on page load
            $index = 0;
        }
        // Set up next slide
        $index = (+$index) + 1;

        $(this).switchSlide( $index );

        // Prevent browser from following "#" link
        e.preventDefault();
    });

    $('#prev-slide').on('click', function(e) {
        $index = $('#services-nav .active').attr('index');
        // Set up previous slide
        $index = (+$index) - 1;

        $(this).switchSlide( $index );

        // Prevent browser from following "#" link
        e.preventDefault();
    });

    $('.single-nav').on('click', 'a', function(e) {
        // Get index from button clicked
        $index = $(this).attr('index');

        $(this).switchSlide( $index );

        // Prevent browser from following "#" link
        e.preventDefault();
    });
  });`