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?
Could this slider/fader be made to be 'responsive'?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Could this slider/fader be made to be 'responsive'?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Could this slider/fader be made to be 'responsive'?
Why couldn't you set a different height value inside your media queries?
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Could this slider/fader be made to be 'responsive'?
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.
If it's width is 100% of a containing DIV, the height will vary depending on the width of the handset's browser.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
lindseynicole
- Forum Newbie
- Posts: 4
- Joined: Mon Oct 05, 2015 2:11 am
Re: Could this slider/fader be made to be 'responsive'?
* 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 */
/* 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 */