Home/ Questions/Q 8004419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T16:54:57+00:00

I’m trying to get a jQuery slide show working on a web control that

  • 0

I’m trying to get a jQuery slide show working on a web control that I’ve created. I can get the slide show to work in IE 9 with compatibility mode turned on, but I can’t get it to work properly in Chrome or Firefox.

I’m not very experienced with jQuery, so I may be missing something obvious. I’m not sure if using Sitecore as the CMS has something to do with my problem or not.

This is some example code that I found on the web and have been playing around with. Can anyone help?

Thanks!
crjunk

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

<script type="text/javascript">
$(document).ready(function () {

    var currentPosition = 0;
    var slideWidth = 500;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;


    slideShowInterval = setInterval(changePosition, speed);

    slides.wrapAll('<div id="slidesHolder"></div>')

    slides.css({ 'float': 'left' });

    $('#slidesHolder').css('width', slideWidth * numberOfSlides);


    (function changePosition() {
        if (currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    })(jQuery);


    (function moveSlide() {
        $('#slidesHolder')
              .animate({ 'marginLeft': slideWidth * (-currentPosition) });
    })(jQuery);

});
</script>


<div id="slideshow">
 <div id="slideshowWindow">
    <div class="slide">
             <img src="../../images/slider_1.jpg" />
             <div class="slideText">
                 <h2 class="slideTitle">Slide 1</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
        </div><!--/slide-->
    <div class="slide">
         <img src="../../images/slider_2.jpg" />
                 <div class="slideText">
                 <h2 class="slideTitle">Slide 2</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
    </div><!--/slide-->
    <div class="slide">
         <img src="../../images/slider_3.jpg" />
                 <div class="slideText">
                 <h2 class="slideTitle">Slide 3</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
    </div><!--/slide-->
 </div><!--/slideshowWindow-->

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Depending on the version of Sitecore you are using, there can be a

    … conflict with Prototype.js that most of Page Editor, including
    designer and debugger uses. It can be simply worked around by
    overriding the $-function by calling “jQuery.noConflict()”

    Once you get past this Sitecore nuance, the problem is your javascript/css code. Being you are admittedly not a jQuery guy I would look into leveraging a canned solution for a slideshow such as http://slidesjs.com

    • 0