Question

Well, I am using this jquery carousel plugin…and it works just fine (it has automatic carousel enabled), however I am trying to make it stop when any user runs a mouse over the carousel and then trying to resume where it left, after the mouse is out. I have not yet managed to do this, and I’m not even sure how to continue trying. This is my carousel code (since it’s very long I’m just gonna place the first part, after all it repeats)…

<div id="expertos" class="carrusel_expertos">
                                <ul>
                                    <li>
                                        <img class="izq" id="fernandocavazos" height="88px" width="77px" src="assets/img/expertos/equipo7.jpg" alt="Dr. Fernando Cavazos" title="Dr. Fernando Cavazos<br /><br />
                                        Director de Servicios T&eacute;cnicos ABS Am&eacute;rica Latina<br />
                                        Residencia: M&eacute;xico<br />
                                        Email: [e-mail]<br />
                                        Medico Veterinario - Universidad Nacional Aut&oacute;noma, M&eacute;xico  <br />
                                        Fisiolog&iacute;a Reproductiva - Universidad de Edimburgo, Escocia<br />
                                        <br />
                                        Fernando esta a cargo de los programas de actualizaci&oacute;n para el equipo de servicios t&eacute;cnicos de Am&eacute;rica Latina. Sus &aacute;reas de especializaci&oacute;n incluyen manejo reproductivo en ganado de leche y carne, procedimientos de orde&ntilde;o y salud de la ubre, evaluaci&oacute;n del confort e instalaciones y salud del hato.
                                        " />    
                                        <ul id="textcontainer_der">
                                          <li><div id="nombre_experto">Dr. Fernando Cavazos</div></li>
                                            <li><div id="residencia_experto">M&eacute;xico</div></li>
                                            <li><div id="mail_experto">[e-mail]</div></li>
                                      </ul>
                                  </li>
                                    <li>
                                        <img class="der" height="88px" width="77px" src="assets/img/expertos/equipo8.jpg" alt="Dr. Dr. Hernando L&oacute;pez" />    
                                        <ul>
                                          <li><div id="nombre_experto">Dr. Hernando L&oacute;pez</div></li>
                                            <li><div id="residencia_experto">USA</div></li>
                                            <li><div id="mail_experto">[e-mail]</div></li>
                                      </ul>
                                  </li>
                                    <li>
                                      <img class="izq" height="88px" width="77px" src="assets/img/expertos/equipo9.jpg" alt="Dr. Neil Michael" />
                                      <ul id="textcontainer_der">
                                        <li><div id="nombre_experto">Dr. Neil Michael</div></li>
                                            <li><div id="residencia_experto">USA</div></li>
                                            <li><div id="mail_experto">[e-mail]</div></li>
                                      </ul>
                                  </li>

and here’s the javascript that starts jCarousel

var carousel = $(function(){
    $("div.carrusel_expertos").carousel({
        direction: "vertical",
        loop: true,
        dispItems: 3,
        nextBtn: "<span></span>",
        prevBtn: "<span></span>",
        autoSlide: true,
        autoSlideInterval: 6000,
        delayAutoSlide: 2000,
        effect: "fade"
    });
});

and here what I’ve tried to stop the already executing jCarousel with:

$(function() {
    $('#expertos').mouseover(function() {
        //$(this).stop();
               $(this).die("mouseover",carousel);
       }).mouseout(function() {
        //$(this).carousel();
                $(this).live("mouseout",carousel);
    });
});

Answer 1

You’ll have to modify the plugin yourself to to it. If the plugin was developed as a jQuery UI widget it would have been much easier to control without the need to modify it.

You should extend the params object to include the option that will indicate that the carousel should be paused on a mouseover, eg “pauseOnMouseOver”.

Further you should extend the “env” object with a boolean value named something like “paused”.

Bind a “mouseover” event handler to the env.$elts.content element that will set the env.paused value to true and a “mouseout” event handler to set it back to false;

Find the section:

            // Launch autoslide
            if (env.params.autoSlide){
                window.setTimeout(function(){
                    env.autoSlideInterval = window.setInterval(function(){
                        env.$elts.nextBtn.click();
                    }, env.params.autoSlideInterval);
                }, env.params.delayAutoSlide);
            }

On the line

env.$elts.nextBtn.click();

add an if statement like

if (!paused)

That should do the trick.