# Jquery, Jcarousel problems - want it to go back to the start and then stop



## angelic_webguru (Apr 25, 2011)

Here is the link - I want it to go from the last - which would be the 3rd image and swoosh back to the beginning and stop. my alternative is already uploaded where I have it just go to the 4th which is the same at the first..

Help it would look nicer with it swooshing back to the beginning and stopping.

http://www.macrojump.com/sti_demo/home.php

Do you need the js code?

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

  function carouselInit(carousel) {
    $('.level0-hero-carousel .carousel-control a').bind('click', function() {
      carousel.scroll( parseInt( $(this).attr('rel') ) );
      carousel.stopAuto();
      return false;
    });

    carousel.clip.hover(function() {
        //carousel.stopAuto();
    }, function() {
        //carousel.startAuto();
    });

  };

  function firstItemAction(carousel, item, idx, state) {
    $('.level0-hero-carousel .carousel-control a').removeClass('active').eq(idx-1).addClass('active');
  };

 $('.level0-hero-carousel').jcarousel({
    scroll: 1,
    initCallback: carouselInit,
    itemFirstInCallback:  firstItemAction,
  


    auto: 4,
    wrap: 'first',
    animation: 1500,
 

    buttonNextHTML: null,
    buttonPrevHTML: null
  });

    if( $('.level0-hero-carousel ul li').size() > 1 )
    $('.level0-hero-carousel .carousel-control').show();

  $('.level0-hero-carousel .carousel-control a').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });
 
  /* Alerts */
  $('.level0-alerts ul li').eq(0).show();

  var alertsInterval = null;
  var alertsIndex = 0;
  var alertsIntervalLength = 1500;
  var alertsCount = $('.level0-alerts ul li').size();

  var expandedSizeClass = 'level0-alerts-expanded-' + alertsCount;
  
  // Update NumAlerts Text
  $('.level0-alerts .alerts-toggle span').text(
    alertsCount + ' Alerts'
  );

  $('.level0-alerts .alerts-controls .alerts-toggle').bind('click', function() {
    var itemsCount = $('.level0-alerts ul li').size();
    if( $('.level0-alerts').hasClass('level0-alerts-expanded') ) {
      $('.level0-alerts').removeClass('level0-alerts-expanded');
      $('.level0-alerts').removeClass(expandedSizeClass);
      switchAlert();
      startAlertsInterval();
    } else {
      $('.level0-alerts').addClass('level0-alerts-expanded');
      $('.level0-alerts').addClass(expandedSizeClass);
      $('.level0-alerts ul li').show();
      stopAlertsInterval();
    }
    return false;
  });
  
  var switchAlert = function() {
    $('.level0-alerts ul li').hide();
    alertsIndex++;
    $('.level0-alerts ul li').eq(alertsIndex % alertsCount).show();
  }

  var startAlertsInterval = function() {
    if(alertsInterval == null)
      alertsInterval = setInterval(switchAlert, alertsIntervalLength);
  }
  
  var stopAlertsInterval = function() {
    if(alertsInterval != null) {
      clearInterval(alertsInterval);
      alertsInterval = null;
    }
  }

  if(alertsCount > 1) {
    $('.level0-alerts .alerts-controls').show();
    startAlertsInterval();
  }
  
});

/*
 * jQuery Placeholder Plug-in
 *
 * Copyright (c) 2010 Max Davis
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: 1
 * Version: 0.1
 *
 * v0.1
 * - First public release
 *
*/

(function($){
	
	$.fn.placeholder = function() {
	  $(this).each( function() {
  		if($(this).attr("type") == "password") {
		
  			var original_pass_field = $(this);

  			if(original_pass_field.val() == "") {
  				$(this).parent().append("<input type=\"text\" value=\""+ $(this).attr("placeholder") +"\" name=\"pass_placeholder\" class=\"form-text placeholder-inactive\" id=\"pass_placeholder\">");
  				$(this).css("display","none");
  			}

  			var original_pass_field = $(this);

  			$("#pass_placeholder").focus(function() {
  				if(original_pass_field.val() == "") {
  					$("#pass_placeholder").css("display","none");
  					original_pass_field.css("display","");
  					original_pass_field.focus();
  				}
  			});

  			original_pass_field.blur(function() {
  				if(original_pass_field.val() == "") {
  					$("#pass_placeholder").css("display","");
  					original_pass_field.css("display","none");
  				}
  			});

  		} else {

  			if($(this).val() === "") {
  				$(this).val($(this).attr("placeholder"));
  				$(this).addClass('placeholder-inactive');
  			}

  			$(this).focus(function() {
  				if($(this).val() === $(this).attr("placeholder")) {
  					$(this).removeClass('placeholder-inactive').addClass('placeholder-active');
  					$(this).val("");
  				}
  			}).blur(function() {
  				if($(this).val() === "") {
  					$(this).removeClass('placeholder-active').addClass('placeholder-inactive');
  					$(this).val($(this).attr("placeholder"));
  				}
  			});
  		}
  	} )

	} 
	
})(jQuery);
```


----------



## ehymel (Aug 12, 2007)

You have the option "wrap" set to "first". Have you tried changing that option to "last"? According the autoscrolling example on the jCarousel page, this is what achieves the action you want.


----------



## ehymel (Aug 12, 2007)

Great looking site, by the way!


----------



## angelic_webguru (Apr 25, 2011)

Yes, I have set it to first, carousel and last - last only loops, it swooshes back to the beginning but then repeats.. the carousel just keeps going forward, and first - it works to stop, but I want to know if there is a way to have it go to the end and then swoosh back to the beginning and stop.


----------



## ehymel (Aug 12, 2007)

OK, sorry I missed your actual question.

Not sure if jCarousel has a setter method for options like the jQuery UI elements have. If so, you could use one of the callback methods to test for going back to the first element, then set the auto mode to null. The documentation page doesn't seem to name any of the methods other than 'add' that are available.

Wish I could help more!


----------



## angelic_webguru (Apr 25, 2011)

So you would not know the javascript code then?


----------



## angelic_webguru (Apr 25, 2011)

I think what I am wanting is the callback feature. All I want is it to go through the slides and go back to the beginning and stop. What is the quickest way to do this and where would I play the code?


----------



## ehymel (Aug 12, 2007)

A callback method is definitely what you would want to use, but it's not clear to me that you could change the value of the "wrap" option once it is implemented. In the "official" jQueryUI elements, there is a setter method that can be used to change options, but it's not clear whether that is possible with jCarousel. 

You might try emailing the developer, he/she may be open to adding this feature or telling you how to do it.


----------

