#keywords JavaScript, carouFredSel

'''JavaScript'''
{{{#!php
    $('#scrollFrame').carouFredSel({
...
     onBefore: function() {
        $(this).children().css('float','left');
        $(this).children().css('display','block');
      },
      onAfter: function() {
        $(this).children().css('float','');
        $(this).children().css('display','');
      }
});
}}}

'''HTML'''
{{{#!php
<div class="main_sol_product mt10" id="scrollFrame">
            <div>텍스트1 텍스트1 텍스트1 텍스트1 텍스트1 텍스트1 텍스트1 텍스트1 텍스트1 텍스트1 </div>
            <div>텍스트2<br/>텍스트1<br/>텍스트2</div>
            <img src="/images/main_product_1.gif" alt=main_product_1"" />
            <img src="/images/main_product_2.gif" alt="main_product_2" />
            <img src="/images/main_product_3.gif" alt="main_product_3" />
            <img src="/images/main_product_4.gif" alt="main_product_4" />
</div>
}}}
----
{{{#!html
<style type="text/css">
div.main_sol_product{ float:left}
div.main_sol_arrow{ float:left; padding-top:40px}
.sec03_btn{display:inline-block; background:url('http://www.microsoft.com/global/enterprise/publishingimages/industries/power-utilities/out_bound_icon.png') no-repeat; background-position:13px 40px; opacity:0.5; position:absolute; top:35px; right:0; width:20px; height:100px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('#scrollFrame').carouFredSel({
    width : "100%",
    responsive: true,
		prev : '#btn_left',
		next : '#btn_right',
		items : {
			visible : 1
		},
		scroll : { 
			items  : 1,
			fx     : "scroll",
			easing : "",

      onBefore: function() {
        $(this).children().css('float','left');
        $(this).children().css('display','block');
      },
      onAfter: function() {
        $(this).children().css('float','');
        $(this).children().css('display','');
      }
		},
		auto: true
	});
</script>

<div class="main_sol_product mt10" id="scrollFrame">

            <div>Secuve TOS® 제품 보러가기 Secuve TOS® 제품 보러가기 Secuve TOS® 제품 보러가기<br />시큐브, '아이그리핀' 조달청과 단가 계약 체결</div>
            <div>텍스트 텍스트 텍스트텍스트텍스트텍스트<br/>텍스트<br/>텍스트</div>

            <img src="/images/main_product_1.gif" alt="Secuve TOS® 제품 보러가기" />
            <img src="/images/main_product_2.gif" alt="iGRIFFIN® 제품 보러가기" />
            <img src="/images/main_product_3.gif" alt="LogGRIFFIN® 제품 보러가기" />
            <img src="/images/main_product_4.gif" alt="Secuve CERT1® 제품 보러가기" />

            </div>
<div class="main_sol_arrow"><a href="#" id="btn_right"><em class="sec03_btn"></em></div>

<script type="text/javascript" src="http://docs.dev7studios.com/caroufredsel-old/js/jquery/jquery.carouFredSel-6.0.5-packed.js"></script>
<script type="text/javascript" language="javascript" src="http://docs.dev7studios.com/caroufredsel-old/js/jquery/jquery.easing.1.3.js"></script>
}}}