jquery slideshow works in dream weaver but doesn't work at all in the browser. I can't even see the pictures of the controllers for the slideshow. I can see the first image in it and thats about it as you have to click on a button to get the second menu button. It is the one at the following website http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/. I took out the background and changed the dimensions to 900 and other than that left it the same I don't understand the issue. Thanks for your replies in advance.

Recommended Answers

All 3 Replies

Could you please post your code.

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

$(document).ready(function(){

  var currentPosition = 0;

  var slideWidth = 900;

  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>
#slideshow {

	margin:0 auto;

	width:900px;

	height:300px;

	background:transparent;

	position:relative;
}

#slideshow #slidesContainer {
	
 

  margin:0 auto;

  width:820px;

  height:300px;

  overflow:hidden; /* allow scrollbar */

  position:relative;

}

#slideshow #slidesContainer .slide {

  margin:0 auto;

  width:800px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */

  height:300px;

}



/** 

 * Slideshow controls style rules.

 */

.control {

  display:block;

  width:39px;

  height:300px;

  text-indent:-10000px;

  position:absolute;

  cursor: pointer;

}

#leftControl {

  top:0;

  left:0;

  background:transparent url(img/control_left.jpg) no-repeat 0 0;

}

#rightControl {

  top:0;

  right:0;

  background:transparent url(img/control_right.jpg) no-repeat 0 0;

}

css is in an external file if that is of any help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.