<div id="PhoteSlideDemo1">
<ul style="width: 1500px;">
<li style="float: left;"><img src="http://bit.ly/xO0JiZ"></li>
<li style="float: left;"><img src="http://bit.ly/zaZhFX"></li>
<li style="float: left;"><img src="http://bit.ly/wojdBJ"></li>
<li style="float: left;"><img src="http://bit.ly/xE4Fik"></li>
<li style="float: left;"><img src="http://bit.ly/wqujAG"></li>
</ul>
</div>
<div>
<a href="javascript:void(0);" id="slide01Prev"><< prev</a>
　<a href="javascript:void(0);" id="slide01Next">next >></a>
</div>

$(function(){
    $('#PhoteSlideDemo1').slider({
        'duration' : 4000
        ,'speed' : 'slow'
        ,'auto' : false
        ,'data' : [
            '<img src="http://bit.ly/xO0JiZ">'
            ,'<img src="http://bit.ly/zaZhFX">'
            ,'<img src="http://bit.ly/wojdBJ">'
            ,'<img src="http://bit.ly/xE4Fik">'
            ,'<img src="http://bit.ly/wqujAG">'
        ]
        ,'action': {
            'prev' : '#PhoteSlideDemo1Prev',
            'next' : '#PhoteSlideDemo1Next'
        }
    });
});

<div id="PhoteSlideDemo2"></div>
<div><a href="javascript:void(0);" id="PhoteSlideDemo2Prev">▲prev</a>
　<a href="javascript:void(0);" id="PhoteSlideDemo2Next">▼next</a></div>

$(function(){
    $('#PhoteSlideDemo2').slider({
        'duration' : 4000
        ,'speed' : 700
        ,'vector' : 'top'
        ,'auto' : true
        ,'data' : [
            '<img src="http://bit.ly/xO0JiZ">'
            ,'<img src="http://bit.ly/zaZhFX">'
            ,'<img src="http://bit.ly/wojdBJ">'
            ,'<img src="http://bit.ly/xE4Fik">'
            ,'<img src="http://bit.ly/wqujAG">'
        ]
        ,'action': {
            'prev' : '#PhoteSlideDemo2Prev',
            'next' : '#PhoteSlideDemo2Next'
        }
    });
});

ul, li { margin: 0px; padding: 0px;}

#PhoteSlideDemo1, #PhoteSlideDemo2 {
    width: 240px;
    height: 320px;
    border: 1px solid #ccc;
    overflow: hidden;
}

#PhoteSlideDemo1 li img, #PhoteSlideDemo2 li img {
    display: block;
    max-width: 240px;
    max-height: 320px;
}

<div class="grad_1"><span></span>sammple text</div>

.grad_1 {
  font-size: 48px;
  line-height: 48px;
  position: relative;
  color: #ff9999;
}
.grad_1 span {
  background-color: rgba(255, 255, 255, 0.4);
  position: absolute;
  display: block;
  width: 100%;
  height: 28px;
}

<div class="grad_2"><span></span>sample text</div>

<style type="text/css">
.grad_2 {
  font-size: 60px;
  line-height: 60px;
  position: relative;
  color: #333;
}
.grad_2 span {
  background-color: rgba(255, 255, 255, 0.6);
  -moz-box-shadow: 0 2px 4px 4px rgba(255, 255, 255, 0.6);
  -webkit-box-shadow: 0 2px 4px 4px rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 4px 4px rgba(255, 255, 255, 0.6);
  position: absolute;
  display: block;
  width: 100%;
  height: 34px;
}