Page 1 of 1

Could this slider/fader be made to be 'responsive'?

Posted: Mon Apr 20, 2015 10:59 am
by simonmlewis
http://www.script-tutorials.com/css3-fade-slider/
I like this fader. No JS to interfere with other scripts, and fades nicely.
I can adjust the width to be responsive, but not the height. As if I don't set 300px, and leave it empty or auto, it goes to nothing.

How could this be done?

Re: Could this slider/fader be made to be 'responsive'?

Posted: Tue Apr 21, 2015 10:18 am
by Celauran
Why couldn't you set a different height value inside your media queries?

Re: Could this slider/fader be made to be 'responsive'?

Posted: Tue Apr 21, 2015 10:22 am
by simonmlewis
What height?
If it's width is 100% of a containing DIV, the height will vary depending on the width of the handset's browser.

Re: Could this slider/fader be made to be 'responsive'?

Posted: Mon Oct 05, 2015 3:33 am
by lindseynicole
* START OF Change Slider to Fader */
/* Make Carousel fade - adapt 2s to required delay */
.carousel-inner > .item {
-webkit-transition: opacity 2s ease-in-out ;
transition: opacity 2s ease-in-out ;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
opacity: 1;
z-index: 1;
left: 0;
}
.carousel-inner > .active.left {
opacity: 0;
z-index: 2;
left: 0;
}
.carousel-inner > .active.right {
opacity: 0;
z-index: 2;
left: 0;
}

/* remove previous/next arrows from home page only */
.home .carousel-control {
display: none ;
}
/* END OF Change Slider to Fader */