js/jssor.slider-22.2.8.min.js" type="text/javascript"></script>
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_SlideshowTransitions = [
{$Duration:2400,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:2400,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
];
var jssor_1_options = {
$AutoPlay: true,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$Cols: 1,
$Align: 0,
$NoDrag: true
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*you can remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1000);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*responsive code end*/
};
</script>
<style>
/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div (normal)
.jssorb01 div:hover (normal mouseover)
.jssorb01 .av (active)
.jssorb01 .av:hover (active mouseover)
.jssorb01 .dn (mousedown)
*/
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 12px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05l.jssora05ldn (mousedown)
.jssora05r.jssora05rdn (mousedown)
.jssora05l.jssora05lds (disabled)
.jssora05r.jssora05rds (disabled)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url('https://www.ing.iac.es/WEAVE/images/carousel/Background.png') no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
.jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; }
.jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; }
/* jssor slider thumbnail navigator skin 09 css */.jssort09-600-45 .p { position: absolute; top: 0; left: 0;
width: 1000px; height: 45px;}.jssort09-600-45 .t { font-family: verdana; font-weight: normal; position: absolute;
width: 100%; height: 100%; top: 0; left: 0; color:#fff; line-height: 45px; font-size: 20px; padding-left:10px;}
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1000px;height:300px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position:absolute;top:0px;left:0px;background-color:rgba(0,0,0,0.7);">
<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('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1000px;height:300px;overflow:hidden;">
<a data-u="any" href="https://www.ing.iac.es" style="display:none">Banner Slider</a>
<div>
<img data-u="image" src="https://www.ing.iac.es/weave/images/carousel/1.jpg" />
<div data-u="thumb">Installation of the WEAVE corrector into the central can</div>
</div>
<div>
<img data-u="image" src="https://www.ing.iac.es/weave/images/carousel/2.jpg" />
<div data-u="thumb">Removal of the WEAVE dummy corrector from the central can</div>
</div>
<div>
<img data-u="image" src="https://www.ing.iac.es/weave/images/carousel/3.jpg" />
<div data-u="thumb">Installation of the WEAVE spectrograph into GHRIL</div>
</div>
<div>
<img data-u="image" src="https://www.ing.iac.es/weave/images/carousel/4.jpg" />
<div data-u="thumb">The WEAVE prime focus assembly mounted on the telescope</div>
</div>
<div>
<img data-u="image" src="https://www.ing.iac.es/weave/images/carousel/5.jpg" />
<div data-u="thumb">Configuring the spectrogrpah in GHRIL</div>
</div>
<div>
<img data-u="image" src="https://www.ing.iac.es/weave/images/carousel/6.jpg" />
<div data-u="thumb">The high-resolution VPH grating being installed in the spectrograph</div>
</div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort09-600-45" style="position:absolute;bottom:0px;left:0px;width:1000px;height:45px;">
<div style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;filter:alpha(opacity=40.0);opacity:0.4;"></div>
<!-- Thumbnail Item Skin Begin -->
<div data-u="slides" style="cursor: default;">
<div data-u="prototype" class="p">
<div data-u="thumbnailtemplate" class="t"></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;">
<div data-u="prototype" style="width:12px;height:12px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora05l" style="top:0px;left:8px;width:40px;height:40px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
<!-- #endregion Jssor Slider End -->
</td>
</tr>
</table>
| 