Slider not starting automatically

If you have a look here: http://kmkwebdesign.ca/clients/dejavu/ you will see that the home page slider does NOT start automatically. However, if you click on the 3rd “dot” to go to the 3rd slider, you will see that it will automatically go back to the first slide. I want the slider to auto start right away, but I can’t figure out how to do it. Any help would be appreciated.

/*
 * Superfish v1.4.1 - jQuery menu widget
 * Copyright (c) 2007 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 * 	http://www.opensource.org/licenses/mit-license.php
 * 	http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

(function($){
	$.superfish = {};
	$.superfish.o = [];
	$.superfish.op = {};
	$.superfish.defaults = {
		hoverClass	: 'sfHover',
		pathClass	: 'overideThisToUse',
		delay		: 100,
		animation	: {opacity:'show'},
		speed		: 1500,
		oldJquery	: false, /* set to true if using jQuery version below 1.2 */
		disableHI	: false, /* set to true to disable hoverIntent usage */
		// callback functions:
		onInit		: function(){},
		onBeforeShow: function(){},
		onShow		: function(){}, /* note this name changed ('onshow' to 'onShow') from version 1.4 onward */
		onHide		: function(){}
	};
	$.fn.superfish = function(op){
		var bcClass = 'sfbreadcrumb',
			over = function(){
				var $$ = $(this), menu = getMenu($$);
				getOpts(menu,true);
				clearTimeout(menu.sfTimer);
				$$.showSuperfishUl().siblings().hideSuperfishUl();
			},
			out = function(){
				var $$ = $(this), menu = getMenu($$);
				var o = getOpts(menu,true);
				clearTimeout(menu.sfTimer);
				if ( !$$.is('.'+bcClass) ) {
					menu.sfTimer=setTimeout(function(){
						$$.hideSuperfishUl();
						if (o.$path.length){over.call(o.$path);}
					},o.delay);
				}		
			},
			getMenu = function($el){ return $el.parents('ul.superfish:first')[0]; },
			getOpts = function(el,menuFound){ el = menuFound ? el : getMenu(el); return $.superfish.op = $.superfish.o[el.serial]; },
			hasUl = function(){ return $.superfish.op.oldJquery ? 'li[ul]' : 'li:has(ul)'; };

		return this.each(function() {
			var s = this.serial = $.superfish.o.length;
			var o = $.extend({},$.superfish.defaults,op);
			o.$path = $('li.'+o.pathClass,this).each(function(){
				$(this).addClass(o.hoverClass+' '+bcClass)
					.filter(hasUl()).removeClass(o.pathClass);
			});
			$.superfish.o[s] = $.superfish.op = o;
			
			$(hasUl(),this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out)
			.not('.'+bcClass)
				.hideSuperfishUl();
			
			var $a = $('a',this);
			$a.each(function(i){
				var $li = $a.eq(i).parents('li');
				$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
			});
			
			o.onInit.call(this);
			
		}).addClass('superfish');
	};
	
	$.fn.extend({
		hideSuperfishUl : function(){
			var o = $.superfish.op,
				$ul = $('li.'+o.hoverClass,this).add(this).removeClass(o.hoverClass)
					.find('>ul').hide().css('visibility','hidden');
			o.onHide.call($ul);
			return this;
		},
		showSuperfishUl : function(){
			var o = $.superfish.op,
				$ul = this.addClass(o.hoverClass)
					.find('>ul:hidden').css('visibility','visible');
			o.onBeforeShow.call($ul);
			$ul.animate(o.animation,o.speed,function(){ o.onShow.call(this); });
			return this;
		}
	});
	
	$(window).unload(function(){
		$('ul.superfish').each(function(){
			$('li',this).unbind('mouseover','mouseout','mouseenter','mouseleave');
		});
	});
	
	$.fn.supposition = function(){
		var $w = $(window), /* do this once instead of every onBeforeShow call*/
			_offset = function(dir) {
				return window[dir == 'y' ? 'pageYOffset' : 'pageXOffset']
				|| document.documentElement && document.documentElement[dir=='y' ? 'scrollTop' : 'scrollLeft']
			    || document.body[dir=='y' ? 'scrollTop' : 'scrollLeft'];
			},
			onInit = function(){
				/* I haven't touched this bit - needs work as there are still z-index issues */
				$topNav = $('li',this);
				var cZ=parseInt($topNav.css('z-index')) + $topNav.length;
				$topNav.each(function() {
					$(this).css({zIndex:--cZ});
				});
			},
			onHide = function(){
				this.css({marginTop:'',marginLeft:''});
			},
			onBeforeShow = function(){
				this.each(function(){
					var $u = $(this);
					$u.css('display','block');
					var menuWidth = $u.width(),
						parentWidth = $u.parents('ul').width(),
						totalRight = $w.width() + _offset('x'),
						menuRight = $u.offset().left + menuWidth;
					if (menuRight > totalRight) {
						$u.css('margin-left', '-152px');
					}

					var windowHeight = $w.height(),
						offsetTop = $u.offset().top,
						menuHeight = $u.height(),
						baseline = windowHeight + _offset('y');
					var expandUp = (offsetTop + menuHeight > baseline);
					if (expandUp) {
						$u.css('margin-top',baseline - (menuHeight + offsetTop));
					}
					$u.css('display','none');
				});
			};
		
		return this.each(function() {
			var o = $.superfish.o[this.serial]; /* get this menu's options */
			
			/* if callbacks already set, store them */
			var _onInit = o.onInit,
				_onBeforeShow = o.onBeforeShow,
				_onHide = o.onHide;
				
			$.extend($.superfish.o[this.serial],{
				onInit		: function() {
					onInit.call(this); /* fire our Supposition callback */
					_onInit.call(this); /* fire stored callbacks */
				},
				onBeforeShow: function() {
					onBeforeShow.call(this); /* fire our Supposition callback */
					_onBeforeShow.call(this); /* fire stored callbacks */
				},
				onHide		: function() {
					onHide.call(this); /* fire our Supposition callback */
					_onHide.call(this); /* fire stored callbacks */
				}
			});
		});
	};
})(jQuery);

The code you’ve posted isn’t relevant to the slider. The relevant bits seem to be:

[COLOR="#FF0000"]<script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/scripts/jquery.freshline.FramesBanner.min.js?ver=1.0.0'></script>[/COLOR]

[COLOR="#0000FF"]<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery.noConflict(); jQuery('#slider').frames_slider( { 
        width: 960, 
	height: 340, 
	theme: "custom", 
	timer: 6000, 
	hidetoolbar: 0 
    }) 
}); 
</script>[/COLOR]

But anyhow, it’s odd that it doesn’t slide, as that slider is supposed to do that. You aren’t the only one to experience this problem:

http://forums.modx.com/thread/80801/image-slider-not-working-no-matter-what-jquery-confliction

All I can suggest is

  • that you create a test page and strip everything down to the bear minimum, and see if you can get it working on its own. Then gradually add things in to see if any other scripts on the page are getting in the way.
  • at the moment, you have the code I posted above in the reverse order, with the red bit below the blue bit, so try reversing the order.

Thanks for the reply. I stripped it all down, but it’s still not working. I just find it weird that when you click on the 3rd slider, the auto scroll function starts working (for the 3rd slider only). I can’t make any sense of it.

Hi there,

The problem is that the version of jQuery you are using is not 100% compatible with the slider.

In your code you have this on line 21:

<script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

Change this to:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

and the slider will work as expected.

It might be the case that it works with higher versions of jQuery, but I stopped trying, just as soon as I got it working.

On a side note, when Ralph suggested creating a test page and stripping everything down to the bare minimum, this is what I ended up with before I was able to find your problem:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Deja Vu Massage | </title>	
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/css/front-page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/css/dark.css" type="text/css" media="screen" />
  </head>

  <body>
    <div id="slider" class="frames_slider shadow1">
      <ul>
        <li data-transition="fountain">
          <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/uploads/2012/12/sliderimg3.jpg" alt="a"/>
        </li>
        <li data-transition="fountain">
          <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/uploads/2013/01/imgslide2.jpg" alt="a"/>
        </li>
        <li data-transition="fountain">
          <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/uploads/2012/12/sliderimg4.jpg" alt="a"/>
        </li>
      </ul>
    </div><!-- slider end -->
    <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/images/image_shadow_960.png" alt="a"/>
    
    <script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
    <script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/scripts/jquery.freshline.FramesBanner.min.js?ver=1.0.0'></script>
    <script type="text/javascript"> 
      jQuery(document).ready(function() { 
        jQuery.noConflict(); 
	jQuery('#slider').frames_slider( { 
          width: 960, 
          height: 340, 
          theme: "custom", 
          timer: 1000, 
          hidetoolbar: 0 
        }) 
      }); 
    </script>
  </body>
</html>

Had you done that in the first place, it would have made it a lot easier for anyone trying to help :slight_smile:

Thank you kindly for your reply and your solution. Problem solved!

I see what you mean regarding the “test page” and stripping it down. I will remember that for next time.

Thanks again to you both :slight_smile: