Object Template : Carousel

Carousel : 본문 예제

Image Rolling + Contents

Carousel에 이미지와 컨텐츠를 사용할 경우 Carousel 하단에 div나 p tag를 사용하여 설명 부분을 넣어주면 이미지가 롤링되는 컨텐츠를 만들 수 있습니다.
이미지마다 설명 부분을 따로 넣고 컨텐츠도 같이 롤링 되도록 하기를 원할 경우에는 컨텐츠 크기 만큼 Carousel의 Height 값을 늘려주어 전체가 Rolling 되도록 해줍니다.
text를 롤링 이미지 전체 하단에 추가한 경우, 이미지 옆으로 텍스트를 추가할 경우 이미지와 함께 Rolling하려면 class name 'Page'를 가지고 있는 div tag 내에 text를 Markup 하고 Carousel의 Width 값을 추가해주면 됩니다.

								   	    
								   	    	<div class="Page">여기에 롤링 되는 컨텐츠를 넣어주세요.</div>
								   	    
								   
Text Rolling

단순 컨텐츠로 이루어진 배너 롤링 방식으로는 아래 Text Rolling Banner 예제처럼 활용 할 수 있습니다.

Contents + Text Sample
This will provide some detailed information about the thumbnail board type. This will provide some detailed information about the thumbnail board type.This will provide some detailed information about the thumbnail board type. This will provide some detailed information about the thumbnail board type.
							
								<div class="Carousel" data-autoSlidemode="true" data-autoSlideDuration="5000"> <!--'data-' 부분은 ui.alopex.io를 참조해서 설정해주세요-->
								    <div class="Scroller">
								        <div class="Page">
								            <img src="이미지링크1">
								        </div>
								        <div class="Page">
								            <img src="이미지링크2">
								        </div>
								        <div class="Page">
								            <img src="이미지링크3">
								        </div>
								    </div>
								    <a class="Prev"></a>
								    <a class="Next"></a>
								    <div class="Paging Mobile"> <!--Rolling되는 링크 수를 나타내는 dot 모양의 이미지입니다. 숫자를 나타내고 싶으면 'Mobile'을 생략하면 됩니다.-->
								        <a class="Link">1</a>
								        <a class="Link">2</a>
								        <a class="Link">3</a>
								    </div>
								</div>
								<div>
								    <!--Carousel 이미지의 크기에 맞게 컨텐츠 영역을 style이나 css 를 추가해서 맞추어 주세요.
								        Carousel 전체에 대한 컨텐츠를 추가하고 싶을 때 이곳에 넣어줍니다.-->
								</div>
							
						
Contents + Text All Rolling
							
								<div class="Carousel" data-autoSlidemode="true" data-autoSlideDuration="5000">
								    <div class="Scroller">
								        <div class="Page">
								            <!-- Carousel 이미지의 크기에 맞게 컨텐츠 영역을 style이나 css 를 추가해서 맞추어 주세요.-->
								            <!-- Rolling되는 항목에 대한 내용을 각각 넣을 수 있습니다.-->
								            <img src="이미지링크1">
								            <div>
								                "이미지링크1"에 대한 내용을 추가해주세요.
								            </div>
								        </div>
								        <div class="Page">
								            <img src="이미지링크2">
								            <div>
								                "이미지링크2"에 대한 내용을 추가해주세요.
								            </div>
								        </div>
								        <div class="Page">
								            <img src="이미지링크3">
								            <div>
								                "이미지링크3"에 대한 내용을 추가해주세요.
								            </div>
								        </div>
								    </div>
								    <a class="Prev"></a>
								    <a class="Next"></a>
								    <div class="Paging Mobile">
								        <a class="Link">1</a>
								        <a class="Link">2</a>
								        <a class="Link">3</a>
								    </div>
								</div>
							
						
Text Rolling Banner
							
								<div class="Carousel" data-autoSlidemode="true" data-autoSlideDuration="5000">
								    <div class="Scroller">
								        <div class="Page"> <!--'이미지링크' 대신 텍스트 배너 방식으로도 적용 가능합니다. Markup 은 사용자가 원하는 대로 작성하면 됩니다.-->
								            <p>Creative ICT Factory</p>
								            <p>With superior technological prowess and industry insight</p>
								        </div>
								        <div class="Page">
								            <p>IT Sector Activities</p>
								            <p>Website Construction for Non-Profit Organizations</p>
								        </div>
								        <div class="Page">
								            <p>Age Group-Based IT Education</p>
								            <p>we are offering customized IT education programs</p>
								        </div>
								    </div>
								    <a class="Prev"></a>
								    <a class="Next"></a>
								    <div class="Paging Mobile">
								        <a class="Link">1</a>
								        <a class="Link">2</a>
								        <a class="Link">3</a>
								    </div>
								</div>
							
						
Carousel Position Left + Text Position Right
Thumbnails Board Type Contents Subject Name This will provide some detailed information about the thumbnail board type.
Thumbnails Board Type Contents Subject Name This will provide some detailed information about the thumbnail board type.
							
								<div class="Overflow-hid"> <!--Float를 초기화 합니다. 'Overflow-hid'는 Helper css 입니다.-->
								    <div class="Float-left"> <!--Carousel 부분과 Contents가 나란히 있을 수 있도록 일렬로 졍렬합니다.-->
								        <div class="Carousel" data-autoSlidemode="true" data-autoSlideDuration="8000">
								            <div class="Scroller">
								                <div class="Page">
								                    <img src="이미지링크1">
								                </div>
								                <div class="Page">
								                    <img src="이미지링크2">
								                </div>
								                <div class="Page">
								                    <img src="이미지링크3">
								                </div>
								            </div>
								            <a class="Prev"></a>
								            <a class="Next"></a>
								            <div class="Paging Mobile">
								                <a class="Link">1</a>
								                <a class="Link">2</a>
								                <a class="Link">3</a>
								            </div>
								        </div>
								    </div>
								    <div class="Float-left"> <!--'Float-left', 'Float-right'는 Helper css로 사용에 맞추어 적용해줍니다.-->
								        왼쪽 carousel에 대한 내용 넣어주세요.
								    </div>
								</div>
							
						
SK Holdings C&C

26, Jong-ro, Jongno-gu, Seoul, 03188, Republic of Korea
Copyright © 2018 SK Holdings C&C. All rights reserved.