bxslider with png on the sites

[lucifer17]

Have anybody a idea how i change this code.Now my bxslider slide work with opacity ... how this examplehttp://htmldoc.net/examples/bx-slider-slideshow-example.htmlBut i want that the picture come like this slider. www.schweizerhof-luzern.ch/ A 50% black png. (left and right) to the 100% picture in the middle. \[code\]html<div id="slidermain"><div class="slideshow"><ul id="slider"><li>content 1</li><li>content 2</li><li>content 3</li><li>And so on...</li></ul>css.slideshow { position: relative; overflow: hidden; height: 404px; background-color: #ffffff; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; }.slideshow ul { overflow: hidden; list-style-type: none; margin: 0; padding: 0; }.slideshow li { width: 999px; height: 404px; margin: 0; border-left: 1px solid #ffffff; }.slideshow .bx-wrapper { position: relative; width: 3000px; top: 0px; left: 50%; margin-left: -1500px; }$(document).ready(function(){$('#slider').bxSlider({ auto: true, pause: 3000, autoHover: true, controls: false, displaySlideQty: 3, moveSlideQty: 1, onAfterSlide: function(currentSlide, totalSlides, currentSlideHtmlObject){ var $middleSlide = currentSlide + 2; $('#slider li').css({ opacity: 0.5 }); $('#slider li:eq(' +$middleSlide+ ')').animate({ opacity: 1 }, 200); }});});\[/code\]