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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

Why couldn't you set a different height value inside your media queries?
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
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'?

Post 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 */
Post Reply