Jssor Slider Fixed Height with dynamic width

Question

I am using jssor`s simple fade slider and It is working fine but there is an issue with height and width ..

Actually I am using the width as percentage and the problem cause by it is that as I increases width height also increases similarly for vice versa..

What I want is height of the slider remain fixed but the width changes accordingly ..

if you only want to increase the width.. your image will be stretched without maintaining the image ratio. — Dyrandz Famador, Apr 21 '15 at 07:29
Yea I know that but still i want it to be done please help if you know so — Zain Abbas, Apr 21 '15 at 07:37
Thanx for your response but this is also not working for me :( — Zain Abbas, Apr 21 '15 at 08:05
Can you just tell me if I have div inside li tag .. so how can i set the height of div same as li ?? — Zain Abbas, Apr 22 '15 at 05:58

score 0 · Answer 1 · answered Oct 12 '15 at 18:42

The most I've been able to do is get the slider to scale the width before initializing, essentially working like 100% width and fixed height.

The only problem is it doesn't scale if the window resizes.

Either way, for anyone interested, just update the slider container divs with JS right before you initialize Jssor:

<!-- Jssor Trigger -->
<script>
    var parentWidth = document.getElementById('slider').offsetWidth;
    document.getElementById('slider1_container').style.width=parentWidth+'px';
    document.getElementById('slider1_slides').style.width=parentWidth+'px';
    jssor_slider1_starter('slider1_container');
</script>

If your page has a vertical scrollbar, you might have to call this code after the ending tag of the div you're getting your width value from, or simply just before closing the body tag.

Jssor Slider Fixed Height with dynamic width

1 Answers1