Jssor slider responsive caption, unwanted text resize - slider

Question

Using JSSOR slider the function ScaleSlider() calls $ScaleWidth to resize the slider according to the viewport. This is achieved by applying a transform style to the #slider1_container element.
transform: scale(0.756364);
However, this also causes any text in the caption to be resized, rendering it illegible.
<div id="slider1_container">
<div u="slides">
<div u="caption" class="myCaption">
<p>Text goes here</p>
</div>
<img u="image" src="myImage.jpg" />
</div>
</div>
How can I prevent the caption text (.myCaption) to be affected by the transform style?

Answer 1

This was a very irritating issue, our designer kept complaining about the automatic resizing.
What i did to deal with this was:
1.Created a function to scale the div that holds my captions back to its original size. The div its originally hidden and after applying the transformation is shown. The original size of my slider is 1920 px width, so i am using that to calculate the percentage of the browser resizing in order to scale the captions back
function ScaleCaptions(){
bodyWidth = document.body.clientWidth;
widthChange=1920/bodyWidth;
if(bodyWidth<992){widthChange=widthChange/1.5;}
$(".captionHolder").css("transform","scale("+widthChange+")");
$(".captionHolder").show();
}
I call this function for the following 3 events, after the ScaleSlider function is called:
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
$(window).bind("load", ScaleCaptions);
$(window).bind("resize", ScaleCaptions);
$(window).bind("orientationchange", ScaleCaptions);
If you want to resize the captions at some point, css rules wont work, so you have to do it with jquery. In my case i wanted to resize the captions below 992px, so i added this line of code in my function
if(bodyWidth<992){widthChange=widthChange/1.5;}

Answer 2

i would disagree with the above approach, sorry for writing another answer but i could not comment. Even when adding css rules for well established breakpoints(768,992,1200, so on), the text continues to resize along the slider, with the difference of starting from the text size declared in the css rules. So for example if i wanted for 768px the font size to be 16px, although it would start from 16px at 768px, it would continue to resize along the slider, which is not what i want. Also 16px font size at 1200px resolution, and 16px font size at 768px resolution have a huge difference, with the second case the text being very tiny

Answer 3

I have similar automated function which works for my solution:
function ScaleSliderCaptions(id,obj){
//var parentWidth = jQuery('#'+id).parent().width();
var bodyWidth = document.body.clientWidth;
var widthChange=obj.$GetOriginalWidth()/bodyWidth;
if(bodyWidth<(obj.$GetOriginalWidth()/2)){widthChange=widthChange/1.5;}
jQuery(".slider-content").css("transform","scale("+widthChange+")").show();
}
obj - slider object created before,
id - slider_container

Answer 4

Caption should always scale along with slider. There is no option to stop caption from scaling.
Css trick below may meet your needs,
#media only screen and (max-width: 480px) {
.myCaption{
...;
font-size: 24px;
...;
}
}
#media only screen and (max-width: 768px) {
.myCaption{
...;
font-size: 16px;
...;
}
}
#media only screen and (min-width: 769px) {
.myCaption{
...;
font-size: 12px;
...;
}
}