SBUx

<sbux-carousel></sbux-carousel>

<content-item>

JSON Data 사용

<!-- 이미지를 사용하는 형태 -->

<sbux-carousel id="idxCarousel1" name="carouselNm1" uitype="image"

                     circulation="true"

                     auto-stream="stream"

                     auto-stream-interval="1000"

                     is-indicartor="true">

   <content-item image-src="./1.jpg" selected></content-item>

   <content-item image-src="./2.jpg"></content-item>

   <content-item image-src="./3.jpg"></content-item>

   <content-item image-src="./4.jpg"></content-item>

</sbux-carousel>

<!-- 일반 또는 SBUx Tag 를 사용하는 형태 -->

<sbux-carousel id="idxCarousel3" name="carouselNm3" uitype="tag">

   <content-item>

       <sbux-input id="input1" name="input1" uitype="text"></sbux-input>

       <sbux-input id="input2" name="input2" uitype="password"></sbux-input>

       <sbux-datepicker id="picker1" name="picker1" uitype="date" mode="inline">

       </sbux-datepicker>

   </content-item>

   <content-item>

       <sbux-datepicker id="picker2" name="picker2" uitype="date" mode="popup">

       </sbux-datepicker>

       <sbux-textarea id="textarea" name="textarea" uitype="normal"></sbux-textarea>

       <sbux-listbox id="idxListbox_single"  name="listbox_single" uitype="single">

           <option-item text="1"></option-item>

           <option-item text="2"></option-item>

           <option-item text="3"></option-item>

       </sbux-listbox>

       <sbux-select id="select1"  name="select1" uitype="single">

           <option-item text="1" value="1">1</option-item>

           <option-item text="2" value="2">2</option-item>

           <option-item text="3" value="3">3</option-item>

       </sbux-select>

   </content-item>

   <content-item>

       <sbux-tabs id="idxTab_norm" name="tab_norm" uitype="normal"

                       title-target-id-array = "SBUx_JS^SBUx_IDE^SBGrid2_5"

                       title-text-array = "SBUx Tab^SBUx IDE Tab^SBGrid Tab"></sbux-tabs>

   </content-item>

</sbux-carousel>

<script>                                          

   var carouselJosnData=[

       {src:'./1.jpg', order:'1', selected:'selected'},

       {src:'./2.jpg', order:'2', link:'www.naver.com'},

       {src:'./3.jpg', order:'3'},

       {src:'./4.jpg', order:'4'}

   ];

</script>

<sbux-carousel id="idxCarousel2" name="carouselNm2" uitype="image"

                     jsondata-ref="carouselJosnData"

                     jsondata-order="order"

                     jsondata-link="link"

                     jsondata-src="src"

                     slide-effect="fade">

</sbux-carouel>

<div id="sbArea"></div>

<script>

   var carouselJsonData=[

       {imagesrc:'./../img/image1.jpg'},

       {imagesrc:'./../img/image2.jpg'},

       {imagesrc:'./../img/image3.jpg'}

   ];

   $(document).ready(function(){

       $('#sbArea').sbCarousel({

           name : 'sbScriptNm',

           uitype : 'image',

           jsondataRef : 'carouselJsonData'

       });

   });

</script>