My client is using this iView slider
He wants to make it responsive & fullscreen. He don't want to change slider as he likes transitions of this slider.
I'm trying hard but images are not working as responsive.
please help
(images are 1600 x 1067)
<div class="container">
<div id="iview">
<div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg">
<div class="iview-caption caption1" data-x="100" data-y="300" data-transition="expandDown">FINE TUNED, SLEEK & SMOOTH, THIS SLIDER WILL IMPRESS YOUR VISITORS</div>
</div>
<div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg" data-iview:transition="block-drop-random" data-iview:pausetime="2000">
<div class="iview-caption caption2" data-x="50" data-y="320" data-transition="expandRight">SUPPORTS ANIMATED CAPTIONS, VIDEO & IFRAME, SINGLE PAGE MULTI-USE</div>
</div>
<div data-iview:thumbnail="photos/photo3_thumb.jpg" data-iview:image="photos/photo3.jpg">
<div class="iview-caption caption3" data-x="350" data-y="300" data-transition="expandLeft">GORGEOUS ANIMATED TIMERS WITH HIGH CUSTOMIZABLE OPTIONS</div>
</div>
<div data-iview:thumbnail="photos/photo4_thumb.jpg" data-iview:image="photos/photo4.jpg"></div>
</div>
</div>
my css for full screen
.container {
display: block;
margin: 0px auto;
}
#iview {
display: inline-table;
position: fixed !important;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 0 !important;
}
#iview .iviewSlider {
position: relative;
width: 100%;
height: 100%;
z-index: 0;
cursor: default;
}
