Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jul 15th, 2012  |  syntax: None  |  size: 2.50 KB  |  hits: 9  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Using jQuery With Sitecore
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  3.  
  4. <script type="text/javascript">
  5. $(document).ready(function () {
  6.  
  7.     var currentPosition = 0;
  8.     var slideWidth = 500;
  9.     var slides = $('.slide');
  10.     var numberOfSlides = slides.length;
  11.     var slideShowInterval;
  12.     var speed = 3000;
  13.  
  14.  
  15.     slideShowInterval = setInterval(changePosition, speed);
  16.  
  17.     slides.wrapAll('<div id="slidesHolder"></div>')
  18.  
  19.     slides.css({ 'float': 'left' });
  20.  
  21.     $('#slidesHolder').css('width', slideWidth * numberOfSlides);
  22.  
  23.  
  24.     (function changePosition() {
  25.         if (currentPosition == numberOfSlides - 1) {
  26.             currentPosition = 0;
  27.         } else {
  28.             currentPosition++;
  29.         }
  30.         moveSlide();
  31.     })(jQuery);
  32.  
  33.  
  34.     (function moveSlide() {
  35.         $('#slidesHolder')
  36.               .animate({ 'marginLeft': slideWidth * (-currentPosition) });
  37.     })(jQuery);
  38.  
  39. });
  40. </script>
  41.  
  42.  
  43. <div id="slideshow">
  44.  <div id="slideshowWindow">
  45.     <div class="slide">
  46.              <img src="../../images/slider_1.jpg" />
  47.              <div class="slideText">
  48.                  <h2 class="slideTitle">Slide 1</h2>
  49.                  <p class="slideDes">Lorem ipsum dolor sit amet,
  50.                  consectetur adipisicing elit, sed do eiusmod tempor
  51.                  incididunt ut labore et dolore magna aliqua.</p>
  52.                  <p class="slideLink"><a href="#">click here</a></p>
  53.              </div><!--/slideText-->
  54.         </div><!--/slide-->
  55.     <div class="slide">
  56.          <img src="../../images/slider_2.jpg" />
  57.                  <div class="slideText">
  58.                  <h2 class="slideTitle">Slide 2</h2>
  59.                  <p class="slideDes">Lorem ipsum dolor sit amet,
  60.                  consectetur adipisicing elit, sed do eiusmod tempor
  61.                  incididunt ut labore et dolore magna aliqua.</p>
  62.                  <p class="slideLink"><a href="#">click here</a></p>
  63.              </div><!--/slideText-->
  64.     </div><!--/slide-->
  65.     <div class="slide">
  66.          <img src="../../images/slider_3.jpg" />
  67.                  <div class="slideText">
  68.                  <h2 class="slideTitle">Slide 3</h2>
  69.                  <p class="slideDes">Lorem ipsum dolor sit amet,
  70.                  consectetur adipisicing elit, sed do eiusmod tempor
  71.                  incididunt ut labore et dolore magna aliqua.</p>
  72.                  <p class="slideLink"><a href="#">click here</a></p>
  73.              </div><!--/slideText-->
  74.     </div><!--/slide-->
  75.  </div><!--/slideshowWindow-->
create a new version of this paste RAW Paste Data