Tengo un slider que usé hace tiempo y necesito usarlo nuevamente en un nuevo proyecto, esta vez necesito que la página tenga varios sliders (deslizadores de imágenes), cuando lo uso para uno solo si funciona pero al agregar otro u otros más ya no funciona. ¿Podrán ayudarme con este rompecabezas?
Este es el código:
jssor_slider1_starter = function (containerId) {
var _CaptionTransitions = [];
_CaptionTransitions["L"] = { $Duration: 900, $FlyDirection: 1, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $ScaleHorizontal: 0.6, $Opacity: 2 };
_CaptionTransitions["R"] = { $Duration: 900, $FlyDirection: 2, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $ScaleHorizontal: 0.6, $Opacity: 2 };
_CaptionTransitions["T"] = { $Duration: 900, $FlyDirection: 4, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $ScaleVertical: 0.6, $Opacity: 2 };
_CaptionTransitions["B"] = { $Duration: 900, $FlyDirection: 8, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $ScaleVertical: 0.6, $Opacity: 2 };
_CaptionTransitions["ZMF|10"] = { $Duration: 900, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 };
_CaptionTransitions["RTT|10"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8 } };
_CaptionTransitions["RTT|2"] = { $Duration: 900, $Zoom: 3, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Round: { $Rotate: 0.5 } };
_CaptionTransitions["RTTL|BR"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $FlyDirection: 10, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $ScaleHorizontal: 0.6, $ScaleVertical: 0.6, $Opacity: 2, $Round: { $Rotate: 0.8 } };
_CaptionTransitions["CLIP|LR"] = { $Duration: 900, $Clip: 15, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic }, $Opacity: 2 };
_CaptionTransitions["MCLIP|L"] = { $Duration: 900, $Clip: 1, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic } };
_CaptionTransitions["MCLIP|R"] = { $Duration: 900, $Clip: 2, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic } };
var options = {
$FillMode: 5,
$AutoPlay: false,
$AutoPlayInterval: 4000,
$PauseOnHover: 1,
$ArrowKeyNavigation: true,
$SlideEasing: $JssorEasing$.$EaseOutQuint,
$SlideDuration: 1200,
$MinDragOffsetToSlide: 20,
$SlideSpacing: 0,
$DisplayPieces: 1,
$ParkingPosition: 0,
$UISearchMode: 1,
$PlayOrientation: 1,
$DragOrientation: 1,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$AutoCenter: 1,
$Steps: 1,
$Lanes: 1,
$SpacingX: 8,
$SpacingY: 8,
$Orientation: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 1,
$AutoCenter: 2,
$Steps: 1
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1920));
else
$JssorUtils$.$Delay(ScaleSlider, 30);
}
ScaleSlider();
$JssorUtils$.$AddEvent(window, "load", ScaleSlider);
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$JssorUtils$.$OnWindowResize(window, ScaleSlider);
}
};
Y éste es el HTML :
<div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 600px; overflow: hidden; border: 1px solid #000">
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
<div style="position: absolute; display: block; background: url(images/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
</div>
<div data-u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 600px; overflow: hidden;">
<div>
<img data-u="image" src="images/photos/arte/01.jpg" alt="Abrazo" />
</div>
<div>
<img data-u="image" src="images/photos/arte/02.jpg" alt="Abrazo 2" />
</div>
<div>
<img data-u="image" src="images/photos/arte/03.jpg" alt="Abrazo 3" />
</div>
</div>
<div data-u="navigator" class="jssorb21" style="position: absolute; bottom: 26px; left: 6px;">
<div data-u="prototype" style="POSITION: absolute; WIDTH: 19px; HEIGHT: 19px; text-align:center; line-height:19px; color:White; font-size:12px;"></div>
</div>
<span data-u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
</span>
<span data-u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px">
</span>
<a style="display: none" href="http://www.jssor.com">javascript</a>
</div>
<script>
jssor_slider1_starter('slider1_container');
</script>
Como verán es mucho código para repetirlo si necesito 5 deslizadores :(