jquery slider

I've used jquery to create a slider. However, it requires you to hit a button to get to the next graphic. Can I make this automatic, or do I have to use different code?
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;



  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>

Open in new window

designaireAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Atique AnsariCommented:
I have tested the code, but I think it will work

Let me know if you need more help.
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;



  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
        .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
        currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
        // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
        if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
        // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  } 
  
  function autoClickSliderControll()
  {
 	$('#rightControl').trigger('click');
  }
  
  setInterval("autoClickSliderControll();", 500);
});
</script>

Open in new window

0
designaireAuthor Commented:
thank you I will try it tonight.
0
designaireAuthor Commented:
Sorry, it didn't work but thanks for trying. It seems like it might need a lot more code that I have.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Atique AnsariCommented:
Can you provide me with the link?
0
designaireAuthor Commented:
0
Atique AnsariCommented:
Try the attached code and see if it displays any alert message
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Designaire - Contact</title>
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<link rel="stylesheet" type="text/css" href="scripts/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="scripts/presets.css" media="all" />




<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	 margin:0 auto;
	width:525px;
	height:350px;
	position:relative;
}
#slideshow #slidesContainer {
 
   margin:0 auto;
  width:400px;
  height:300px;
  overflow:hidden; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:525px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:390px;

}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:40px;
  height:390px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(images/control_right.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;

  
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {

}
#pageContainer {
  margin:0 auto;
  width:960px;
}



.slide img {
  float:left;
  margin:40px 0px 0px 0px;
}

-->
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
  
  function autoClickSliderControll()
  {
  	alert('In autoClickSliderControll function');
  	$('#rightControl').trigger('click');
  };
  
   setInterval("autoClickSliderControll();", 500);
});
</script>

<script type="text/javascript">

	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "http://www.designaire.com/ipad/index.htm";
	} 

</script>

<body>
<div id="container">

<div id="drop">
<div id="main">


<div class="top">

</div>
<div class="menuBar" >

<ul id="menuNav">
<li><a href="index.htm">Home</a></li>
<li><a href="web.htm">Web Design</a></li>
<li><a href="graphic.htm">Graphic Design</a></li>
<li><a href="video.htm">Video Graphics</a></li>
<li><a href="art.htm">Fine Art</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>

</div>
<div class="strip">

</div>

<div class="left"> 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="435" height="458" id="FlashID" title="designaire">
    <param name="movie" value="images/leftFront_01.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/leftFront_01.swf" width="435" height="458">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>

<div class="rightweb">
<div class="slideShow">
<div id="slideshow">
     <div id="slidesContainer">




<div class="slide">        I am a creative designer with the unique ability to tailor projects to the needs of a wide client base assisting companies in communicating and attracting new business.<a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="images/keys.jpg" width="400" height="142" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a></div>
      
             <div class="slide">  My experience includes designing websites, graphics, television animation, Flash and advertising for numerous corporate, defense and non-profit companies.     <a href="xxx"><img src="images/plane.jpg" width="400" height="174" alt="xxx" /></a> </div>

             <div class="slide"> I have a deep knowledge of these industries and how they operate and have the ability to conceptualize and implement creative and easy to navigate designs.     <a href="xxx"><img src="images/computer.jpg" width="400" height="174" alt="xxx" /></a> </div>
      </div>
    </div>
  </div>
</div>
</div>




</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Open in new window

0
designaireAuthor Commented:
Yes, it gives an error message with IE8, which is what I'm running.

http://www.designaire.com/index_test.htm
0
Atique AnsariCommented:
See if attached code works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Designaire - Contact</title>
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<link rel="stylesheet" type="text/css" href="scripts/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="scripts/presets.css" media="all" />




<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	 margin:0 auto;
	width:525px;
	height:350px;
	position:relative;
}
#slideshow #slidesContainer {
 
   margin:0 auto;
  width:400px;
  height:300px;
  overflow:hidden; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:525px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:390px;

}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:40px;
  height:390px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(images/control_right.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;

  
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {

}
#pageContainer {
  margin:0 auto;
  width:960px;
}



.slide img {
  float:left;
  margin:40px 0px 0px 0px;
}

-->
</style>


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

function autoClickSliderControll()
  {
  	alert('In autoClickSliderControll function');
  	$('#rightControl').trigger('click');
  }
  
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
  
  setInterval("autoClickSliderControll();", 500);
});
</script>

<script type="text/javascript">

	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "http://www.designaire.com/ipad/index.htm";
	} 

</script>

<body>
<div id="container">

<div id="drop">
<div id="main">


<div class="top">

</div>
<div class="menuBar" >

<ul id="menuNav">
<li><a href="index.htm">Home</a></li>
<li><a href="web.htm">Web Design</a></li>
<li><a href="graphic.htm">Graphic Design</a></li>
<li><a href="video.htm">Video Graphics</a></li>
<li><a href="art.htm">Fine Art</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>

</div>
<div class="strip">

</div>

<div class="left"> 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="435" height="458" id="FlashID" title="designaire">
    <param name="movie" value="images/leftFront_01.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/leftFront_01.swf" width="435" height="458">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>

<div class="rightweb">
<div class="slideShow">
<div id="slideshow">
     <div id="slidesContainer">




<div class="slide">        I am a creative designer with the unique ability to tailor projects to the needs of a wide client base assisting companies in communicating and attracting new business.<a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="images/keys.jpg" width="400" height="142" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a></div>
      
             <div class="slide">  My experience includes designing websites, graphics, television animation, Flash and advertising for numerous corporate, defense and non-profit companies.     <a href="xxx"><img src="images/plane.jpg" width="400" height="174" alt="xxx" /></a> </div>

             <div class="slide"> I have a deep knowledge of these industries and how they operate and have the ability to conceptualize and implement creative and easy to navigate designs.     <a href="xxx"><img src="images/computer.jpg" width="400" height="174" alt="xxx" /></a> </div>
      </div>
    </div>
  </div>
</div>
</div>




</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Open in new window

0
Atique AnsariCommented:
I have checked the attached code and it works.

Try this and let me know results.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Designaire - Contact</title>
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<link rel="stylesheet" type="text/css" href="scripts/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="scripts/presets.css" media="all" />




<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	 margin:0 auto;
	width:525px;
	height:350px;
	position:relative;
}
#slideshow #slidesContainer {
 
   margin:0 auto;
  width:400px;
  height:300px;
  overflow:hidden; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:525px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:390px;

}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:40px;
  height:390px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(images/control_right.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;

  
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {

}
#pageContainer {
  margin:0 auto;
  width:960px;
}



.slide img {
  float:left;
  margin:40px 0px 0px 0px;
}

-->
</style>


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

function autoClickSliderControll()
  {
  	$('#rightControl').trigger('click');
  }
  
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
  
  setInterval("autoClickSliderControll();", 500);
});
</script>

<script type="text/javascript">

	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "http://www.designaire.com/ipad/index.htm";
	} 

</script>

<body>
<div id="container">

<div id="drop">
<div id="main">


<div class="top">

</div>
<div class="menuBar" >

<ul id="menuNav">
<li><a href="index.htm">Home</a></li>
<li><a href="web.htm">Web Design</a></li>
<li><a href="graphic.htm">Graphic Design</a></li>
<li><a href="video.htm">Video Graphics</a></li>
<li><a href="art.htm">Fine Art</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>

</div>
<div class="strip">

</div>

<div class="left"> 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="435" height="458" id="FlashID" title="designaire">
    <param name="movie" value="images/leftFront_01.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/leftFront_01.swf" width="435" height="458">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>

<div class="rightweb">
<div class="slideShow">
<div id="slideshow">
     <div id="slidesContainer">




<div class="slide">        I am a creative designer with the unique ability to tailor projects to the needs of a wide client base assisting companies in communicating and attracting new business.<a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="images/keys.jpg" width="400" height="142" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a></div>
      
             <div class="slide">  My experience includes designing websites, graphics, television animation, Flash and advertising for numerous corporate, defense and non-profit companies.     <a href="xxx"><img src="images/plane.jpg" width="400" height="174" alt="xxx" /></a> </div>

             <div class="slide"> I have a deep knowledge of these industries and how they operate and have the ability to conceptualize and implement creative and easy to navigate designs.     <a href="xxx"><img src="images/computer.jpg" width="400" height="174" alt="xxx" /></a> </div>
      </div>
    </div>
  </div>
</div>
</div>




</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
designaireAuthor Commented:
That's great!

Can you make it go back to slide one when it's done, even if I add more.

Notice I updated the point value!
0
Atique AnsariCommented:
I will send you code as soon as possible.
0
designaireAuthor Commented:
Thank you...it's not urgent.
0
Atique AnsariCommented:
welcome
0
Atique AnsariCommented:
I am done with the code. I Have tested it and it works fine.

Two changes has been made:

1) <div id="autoSlideGallery"></div> has been added to HTML.

2) autoClickSliderControll function has been changed.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Designaire - Contact</title>
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<link rel="stylesheet" type="text/css" href="scripts/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="scripts/presets.css" media="all" />




<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	 margin:0 auto;
	width:525px;
	height:350px;
	position:relative;
}
#slideshow #slidesContainer {
 
   margin:0 auto;
  width:400px;
  height:300px;
  overflow:hidden; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:525px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:390px;

}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:40px;
  height:390px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(images/control_right.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;

  
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {

}
#pageContainer {
  margin:0 auto;
  width:960px;
}



.slide img {
  float:left;
  margin:40px 0px 0px 0px;
}

-->
</style>


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

	function autoClickSliderControll()
	{
		$('#autoSlideGallery').trigger('click');
	}
	  
	jQuery(document).ready(function($)
	{
  		var currentPosition = 0;
		var slideWidth = 400;
		var slides = $('.slide');
		var numberOfSlides = slides.length;
		
		// Remove scrollbar in JS
		$('#slidesContainer').css('overflow', 'hidden');
		
		// Wrap all .slides with #slideInner div
		slides
			.wrapAll('<div id="slideInner"></div>')
			
			// Float left to display horizontally, readjust .slides width
			.css({
				'float' : 'left',
				'width' : slideWidth
			});
			
			// Set #slideInner width equal to total width of all slides
			$('#slideInner').css('width', slideWidth * numberOfSlides);
			
			// Insert controls in the DOM
			$('#slideshow')
				.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
				.append('<span class="control" id="rightControl">Clicking moves right</span>');
			
			// Hide left arrow control on first load
			manageControls(currentPosition);
			
			// Create event listeners for .controls clicks
			$('.control')
				.bind('click', function(){
					// Determine new position
					currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
					
					// Hide / show controls
					manageControls(currentPosition);
					
					// Move slideInner using margin-left
					$('#slideInner').animate({
						'marginLeft' : slideWidth*(-currentPosition)
					});
				});
			
		// manageControls: Hides and Shows controls depending on currentPosition
		function manageControls(position)
		{
			// Hide left arrow if position is first slide
			if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
			// Hide right arrow if position is last slide
			if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show()}
		}
		
		$('#autoSlideGallery').live('click', function(e)
		{
			// Check if on last image
			if( $('#rightControl').is(":visible") )
			{
				// if no then slide to right
				$('#rightControl').trigger('click');
			}
			else
			{
				// else slide to first
				$('#slideInner').animate({
					'marginLeft' : '0px'
				});
				
				currentPosition = 0;
				
				// Hide / show controls
				manageControls(currentPosition);
			}
		});
		
		setInterval("autoClickSliderControll();", 500);
	});
</script>

<script type="text/javascript">

	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "http://www.designaire.com/ipad/index.htm";
	} 

</script>

<body>
<div id="container">

<div id="drop">
<div id="main">


<div class="top">

</div>
<div class="menuBar" >

<ul id="menuNav">
<li><a href="index.htm">Home</a></li>
<li><a href="web.htm">Web Design</a></li>
<li><a href="graphic.htm">Graphic Design</a></li>
<li><a href="video.htm">Video Graphics</a></li>
<li><a href="art.htm">Fine Art</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>

</div>
<div class="strip">

</div>

<div class="left"> 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="435" height="458" id="FlashID" title="designaire">
    <param name="movie" value="images/leftFront_01.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/leftFront_01.swf" width="435" height="458">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>

<div class="rightweb">

<div id="autoSlideGallery"></div>

<div class="slideShow">
<div id="slideshow">
     <div id="slidesContainer">




<div class="slide">        I am a creative designer with the unique ability to tailor projects to the needs of a wide client base assisting companies in communicating and attracting new business.<a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="images/keys.jpg" width="400" height="142" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a></div>
      
             <div class="slide">  My experience includes designing websites, graphics, television animation, Flash and advertising for numerous corporate, defense and non-profit companies.     <a href="xxx"><img src="images/plane.jpg" width="400" height="174" alt="xxx" /></a> </div>

             <div class="slide"> I have a deep knowledge of these industries and how they operate and have the ability to conceptualize and implement creative and easy to navigate designs.     <a href="xxx"><img src="images/computer.jpg" width="400" height="174" alt="xxx" /></a> </div>
      </div>
    </div>
  </div>
</div>
</div>




</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Open in new window

0
designaireAuthor Commented:
Thank You!
0
Atique AnsariCommented:
Welcome
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.