Problemas con slider al redimensionar navegador

[jesus_e_borquez_m]

Lo que pasa es que estoy haciendo una página en donde manejo el responsive design, y todo marcha bien, pero hay un slider que al redimensionar mi navegador no hace el responsive y se queda del tamaño que tenia cuando cargue la página inicialmente, pero al recargar la página se soluciona y el slider se pone de la dimensión que corresponde. Para el caso de los celulares y ipads es igual, cuando cargar la página y el dispositivo esta vertical jala con la dimensión correcta, pero al voltear el dispositivo horizontalmente el slider se queda con la dimensión que tenia cuando se cargo inicialmente aunque igual al recargar la página se pone como debe.

Bueno la explicación es muy larga, el punto es que quisiera saber como hacer para que ese slider se redimensione sin necesidad de recargar la página (tal vez con ajax, no se). Aquí les dejo el codigo javascript del slider:

Código:

<script language="javascript">

 effectsDemo2 = 'rain,stairs,fade';



          var mqo = window.matchMedia("(min-width: 1842px) and (max-width: 1919px)")
		 var mqp = window.matchMedia("(min-width: 1650px) and (max-width: 1679px)")
		 var mqq = window.matchMedia("(min-width: 1300px) and (max-width: 1649px)")
		
         
        
	 

if(mqo.matches)
{


var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width:1841, height:720, effects: effectsDemo2,
						display: {
							autoplay: 3000,
							loading: {background: '#000000', opacity: 0.5, image: 'img/loading.gif'},
							buttons: {hide: true, opacity: 1, prev: {className: 'SliderNamePrev_2', label: ''}, next: {className: 'SliderNameNext_2', label: ''}},
							description: {hide: true, background: '#000000', opacity: 0.4, height: 50, position: 'bottom'},
							navigation: {container: 'SliderNameNavigation_2', label: '<img src="img/clear.gif" />'}
						}
					});

}

else
if(mqp.matches)
{


var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width:1650, height:645, effects: effectsDemo2,
						display: {
							autoplay: 3000,
							loading: {background: '#000000', opacity: 0.5, image: 'img/loading.gif'},
							buttons: {hide: true, opacity: 1, prev: {className: 'SliderNamePrev_2', label: ''}, next: {className: 'SliderNameNext_2', label: ''}},
							description: {hide: true, background: '#000000', opacity: 0.4, height: 50, position: 'bottom'},
							navigation: {container: 'SliderNameNavigation_2', label: '<img src="img/clear.gif" />'}
						}
					});

}

else
if(mqg.matches)
{


var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width:1700, height:665, effects: effectsDemo2,
						display: {
							autoplay: 3000,
							loading: {background: '#000000', opacity: 0.5, image: 'img/loading.gif'},
							buttons: {hide: true, opacity: 1, prev: {className: 'SliderNamePrev_2', label: ''}, next: {className: 'SliderNameNext_2', label: ''}},
							description: {hide: true, background: '#000000', opacity: 0.4, height: 50, position: 'bottom'},
							navigation: {container: 'SliderNameNavigation_2', label: '<img src="img/clear.gif" />'}
						}
					});

}


				</script>

En realidad manejo más resoluciones, pero como no puedo poner mucho texto lo reduje.

Como se darán cuenta, el código maneja las dimensiones de las imágenes directamente, por lo que tuve que usar la función window.matchMedia para que se hicieran responsivos los slider dependiendo de la resolución, no se si tenga algo que ver con mi problema. Espero que la explicación haya sido suficientemente clara y espero y agradezco su respuesta.