Доброго времени суток )
Нужна помощь.
Пытаемся установить слайдер, но он почему-то отображается криво, меняли значения и так и этак, но все бес толку.
http://adgsfgg.rusff.ru/
Код:<script> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 560; 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 left and right arrow controls in the DOM $('#slideshow') .prepend('<span class="control" id="leftControl">Move left</span>') .append('<span class="control" id="rightControl">Move 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 HTML --> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> содержимое </div> <div class="slide"> содержимое </div> </div> </div> <!-- Slideshow HTML -->Код:/* Слайдер */ #slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:absolute; margin-top: 200px; margin-left: 500px; } #slideshow #slidesContainer .slide { margin:0 auto; width:540px; /* reduce by 20 pixels to avoid horizontal scroll */ height:263px; } .control { display:block; width:78px; height:56px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { margin-top:300px; margin-left:430px; background:transparent url(адрес) no-repeat 0 0; } #rightControl { margin-top:300px; margin-left:1000px; background:transparent url(адрес) no-repeat 0 0; } /* Конец слайдера */
Если бы помогли решить данную проблему и настроить слайдер, то было бы замечательно )