Object Content Slider pictures responsive 
Autor: FABRE Danielle
Besucht 1009,
Followers 2,
Geteilt 0
Hello everyone,
I can't find the extra code so that the pictures in the Content Slider object retain their width in the different media like here https://toolsshop.altervista.org/content-slider/responsive.html
I've looked at the various posts about the object, but I haven't found my answer.
Thanks for your help.
Regards,
Danielle
Gepostet am
Hi, does the page you posted have the effect on the object you are looking for?
Autor
Hi Giancarlo,
Yeees! the pictures retain their size (width) from the largest to the smallest definition
well, now the code is the one always present on the page (below) you linked, naturally the cell and row will have to be those of your page, I don't know if I've explained myself.
Autor
Thank you for your help!
It's so clear now that I see the extra codes proposed by you and KolaSim... (sorry not to have seen them before
) and of course, I will change the breakpoints, the row and the cells.
If I have some problem, I'll come back here very soon, if every is OK, I'll close my post.
Have a nive evening.
Danielle
Autor
Hi Giancarlo,
Many thanks for the code. It's totally correct in my project.
For the moment my code is:
********
<script>
$( document ).ready(function() {// K>;
/** --- resize ratio x WSx5 ContenSlider by KolAsim --- **/
ritardoK = 2; // secondi di ritardo;
wK = 1920; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 800; // altezza immagine (valore pixel (o rapporto razionale H));
setTimeout(function(){//K1>;
ridimensionaK();
}, ritardoK * 300); //K1<<;
}); //K<<;
$(window).on('resize', ridimensionaK);//Kr > | <<
//---------------f K2-----------------------------
function ridimensionaK() {//K2>;
setTimeout(function(){ //K3>;
wwK= window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
ratio=Math.round(wwK/wK*100)/100;
CShK=hK*ratio;
$("#imPageRow_1,#imCell_1, #imCell_1 div").css('max-height', CShK);
$(".slide-description").css("font-size","1.5vW"); // x DESCRIZIONE;
}, 0); //K3<<;
} //K2<<;
</script>
******
I just would like that, in a @media screen and (max-width: 1280px), my slide.description will be a little bigger because with the ratio it's look very little...
How to write this addtional line?
Many thanks for you help, if it's possible and if you accept.
Danielle
Hi Daniele, it's a code from the very kind KolAsim that scales proportionally, if you want you can increase the font-size","1.5vW" part of the code by a value that can be more readable, otherwise, it would be very useful to see the page online and possibly wait for info from KolAsim for this variant.
Alternatively, opt for a different code where you can control the size of the text based on the breakpoint
e.g.: https://www.tribalanimazione.it/
... maybe I didn't understand, and without LINK I can't evaluate, ... but if you want to make the measurements of the descriptions of Giancarlo's example fixed above 1280 pixels, then you can use this code:
<style>
@media (min-width: 1280px) {
.slide-title { font-size:50px !important }
.slide-description { font-size:45px !important }
.slide-button { font-size:40px !important }
}
</style>
.
ciao
.
Autor
Many thanks Giancarlo and KolAsim.
You help me a lot.
I try and come back after my tests!
Have a nice day
Danielle
Autor
Hi KolAsim,
I tested with your code but unfortunately it doesn't works and I think the reason is that the code for the object content slider is written with a <script> (see above my code).
(When I use a code, normally, I use <style> but no <script> which is totally unknown for me...)
Thank you for your help, one more time, if it's possible
Danielle
ciao, ... the previous <style> code is based on Giancarlo's example...
... to be able to evaluate what happens in your case, you should post an example of yours online like Giancarlo did...
.
HI, ciao
.
Autor
Hi,
Here is the link
Many, many thanks
Danielle
wading through the page you left imCell_1 but in your example it is imCell_2
Autor
Ok sorry,
I'd deleted the first line! I've put it back! You can refresh the link now
Danielle
... in your structure the images measure (1600x600)px = ratio (8:3)...
... in your structure the reference selectors are these:
$("#imPageRow_2,#imCell_2, #imCell_2 div")
...
...the code for your current structure is this:
<script>
$( document ).ready(function() {// K>;
/** --- resize ratio x WSx5 ContenSlider by KolAsim --- **/
ritardoK = 1; // secondi di ritardo;
wK = 1600; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 600; // altezza immagine (valore pixel (o rapporto razionale H));
setTimeout(function(){//K1>;
ridimensionaK();
}, ritardoK * 1000); //K1<<;
}); //K<<;
$(window).on('resize', ridimensionaK);//Kr > | <<
//---------------f K2-----------------------------
function ridimensionaK() {//K2>;
setTimeout(function(){ //K3>;
wwK= window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
ratio=Math.round(wwK/wK*100)/100;
CShK=hK*ratio;
$("#imPageRow_2,#imCell_2, #imCell_2 div").css('max-height', CShK);
$(".slide-description").css("font-size","4vW"); // x DESCRIZIONE;
}, 0); //K3<<;
} //K2<<;
</script>
.
...if you need further clarifications or suggestions, please let us know...
.
ciao
.
Autor
It's right for me now!
A huge thank you to you and to you all.
I close my post.
Danielle
... OK ... ciao ...
.