jquery carousel how to have a gradient on start and ending slides


Tags: jquery,css,carousel

Problem :

I'm making a jquery carousel and have a running one, but I need to have the slides at the beginning and end have a gradient fade on them.

How can I do this? - Have a image placed ontop of the holding container? - Have a css gradient on a div at each end of the carousel holder?

Have attached pic of required effect... enter image description here



Solution :

CSS3 solution - http://jsfiddle.net/UddqU/

Gradient CSS generated from - http://www.colorzilla.com/gradient-editor/

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS:

body {background:orange;}
#left {float:left; width:25%; height:400px; 

    background: -moz-linear-gradient(left,  rgba(230,240,163,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(230,240,163,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(230,240,163,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(230,240,163,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(230,240,163,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(230,240,163,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

}

#right { float:right; width:25%; height:400px; 

    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(230,240,163,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(230,240,163,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(230,240,163,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(230,240,163,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(230,240,163,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(230,240,163,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e6f0a3',GradientType=1 ); /* IE6-9 */

}

    CSS Howto..

    JS manipulation on CSS and how it result on page rendering

    How to display a binary search tree using CSS, HTML and a bit of Javascript?

    How to ensure dynamic CSS is loaded first before AJAX content?

    UI Challenge - how to draw “connectors” between elements?

    How to show borders of th elements with gradient fills in IE9?

    How to load CSS on PC and Mobile by jQuery?

    How can I get two buttons and textareas from separate forms to display inline?

    How to create a CSS border surrounding an input box?

    How to apply CSS to the first letter after :before content?

    How to do this angle background by CSS?

    CSS HTML How to align image within div to bottom right

    How to align nav drop down menu in css?

    How to hide grey scrollbars on a DIV in Android - they only show when you cannot scroll

    How to achieve following style for horizontal rule with css

    How to rotate top-border around the circle?

    How to parse the default css property to inline style attribute

    jQuery - How to aply custom CSS to fields which are not empty

    How to wrap UL list - LIs on new line with css

    How to make ASP CheckBoxList labels stay on same line as checkbox

    How to add css class to an element inside nav element

    How to center align social media tags using HTML and CSS

    How to Set Two Transition Durations for Multiple CSS Transforms

    How to make this geometrical “translation” effect with javascript?

    How can I add a fixed sidebar to a web page?

    Menu hover effect - how to reproduce this effect?

    how to make the postion close X in css file in top instead of bottom

    How to give css sprites effect?

    How to change active link color in navigation bar

    how can I use the CSS selector to solve this [duplicate]

    How to vertically align data in the center of a table cell in HTML?