¿Cuál es la mejor forma de montar este slideshow?

[tempto]

Hola a todos,

Os cuento mi problema:

Tengo 2 funciones: slideshow y slide:
- Slideshow: es un pase de diapositivas utilizando jquery-ui
- Slide: se encarga de darle animación a 4 clases que se le pasen por parámetro

Este el código html del slideshow.

Código HTML:

<div id="slideshow"> 
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <div id="slide">
            <div class="ss_apertura"></div>
            <div class="ss_titulo"><img src="img/ss_titulo.jpg"/></div>
            <div class="ss_enlace"><a href="index.html" target="_self">ENLACE AL CONTENIDO -></a></div>
            <div class="ss_icono"><img src="img/ss_icono.jpg"/></div>
            <div class="ss_imagen"><img src="img/ss_imagen.jpg"/></div>
        </div>
    </div>
                
 <!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
    <div id="slide2">
        <div class="ss_apertura"></div>
            <div class="ss_titulo"><img src="img/ss_titulo2.jpg"/></div>
            <div class="ss_enlace"><a href="index.html" target="_self">OTRO ENLACE AL CONTENIDO -></a></div>
            <div class="ss_icono"><img src="img/ss_icono2.jpg"/></div>
            <div class="ss_imagen"><img src="img/ss_imagen2.jpg"/></div>
        </div>
    </div>
                        
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
            <a href="#fragment-1">1</a>
        </li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2">
            <a href="#fragment-2">2</a>
        </li>
    </ul>
</div> 

Y este es el script:

Código PHP:

  function slideshow() 
{ 
    $(document).ready(function(){ 
        //Pausing slider on hover 
        $("#slideshow").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); 
        $("#slideshow").hover( 
            function() { 
                $("#slideshow").tabs("rotate", 0, true); 
            }, 
            function() { 
                $("#slideshow").tabs("rotate", 5000, true); 
            } 
        ); 
    }); 
}  
   

Todo se vería así:


Ahora lo complicado, para mí, es cada vez que se pase a una diapositiva nueva, ya sea por pulsar uno de los botones o por la transición del propio slideshow, llamar a la función Slide para que anime los divs #slide y #slide2.
Llevo toda la mañana intentándolo pero ha sido un fiasco

A ver si podéis echarme una mano y gracias por adelantado