Голову сломал нужно 2 слайдера на одной странице...
Вопрос такой хочу два слайдера на страницу одного мало ), один работает все в порядке, второй не хочет. Я понимаю что тема такая он работает только один раз. Какие мне дивы надо переименовать? И как модифицировать код , чтоб он работал на двух слайдерах.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 800; 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"></span>') .append('<span class="control" id="rightControl"></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> Вот html <div id="pageContainer"> <!-- Slideshow HTML --> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <h2>0</h2> </div> <div class="slide"> <h2>1</h2> </div> <div class="slide"> <h2>2</h2> </div> <div class="slide"> <h2>'3</h2> </div> </div> </div> </div> <!-- Второй который не работает --> <div id="pageContainer"> <!-- Slideshow HTML --> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <h2>00</h2> </div> <div class="slide"> <h2>01</h2> </div> <div class="slide"> <h2>02</h2> </div> <div class="slide"> <h2>03</h2> </div> </div> </div> </div> |
Решил эту задачу выкладываю решение скрипт js и соответственно в HTML нужно будет переименовать блоки во втором случае.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 800; 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"></span>') .append('<span class="control" id="rightControl"></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> <script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 800; var slides = $('.slideB'); var numberOfSlides = slides.length; // Remove scrollbar in JS $('#slidesContainerB').css('overflow', 'hidden'); // Wrap all .slides with #slideInner div slides .wrapAll('<div id="slideInnerB"></div>') // Float left to display horizontally, readjust .slides width .css({ 'float' : 'left', 'width' : slideWidth }); // Set #slideInner width equal to total width of all slides $('#slideInnerB').css('width', slideWidth * numberOfSlides); // Insert controls in the DOM $('#slideshowB') .prepend('<span class="controlB" id="leftControlB">Clicking moves left</span>') .append('<span class="controlB" id="rightControlB">Clicking moves left</span>'); // Hide left arrow control on first load manageControls(currentPosition); // Create event listeners for .controls clicks $('.controlB') .bind('click', function(){ // Determine new position currentPosition = ($(this).attr('id')=='rightControlB') ? currentPosition+1 : currentPosition-1; // Hide / show controls manageControls(currentPosition); // Move slideInner using margin-left $('#slideInnerB').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){ $('#leftControlB').hide() } else{ $('#leftControlB').show() } // Hide right arrow if position is last slide if(position==numberOfSlides-1){ $('#rightControlB').hide() } else{ $('#rightControlB').show() } } }); </script> |
Часовой пояс GMT +3, время: 17:58. |