0

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;
}
2
Contributors
1
Reply
9
Views
3 Years
Discussion Span
Last Post by iamthwee
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.