슬라이딩 배너 롤링 모바일 최적화
본문
안녕하세요.
해당 소스가..
좌우에 이미지가 있고 가운대 하나가 있습니다..
가운대 하나만 보이고..
모바일에서 이미지가 리사이즈 되면 좋겠습니다..
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="http://r2o.co.kr/data/newdi/st.css">
<script src="http://r2o.co.kr/data/newdi/js/jquery1.2.4.js"></script>
<script src="http://r2o.co.kr/data/newdi/js/jquery.slider.js"></script>
<script src="http://r2o.co.kr/data/newdi/js/common.js"></script>
</head>
<body>
<header>
</header>
<section id="container">
<div class="main">
<ul class="tab_link_group">
<li class="active"><a href="#"><h2 class="tit_main">WOMEN</h2></a></li>
<li class=""><a href="#"><h2 class="tit_main">KIDS</h2></a></li>
<li class=""><a href="#"><h2 class="tit_main">BEAUTY</h2></a></li>
</ul>
<div class="designer_tab1">
<ul class="link_group">
<li class="active"><button type="button"><span>ablelyn</span></button></li>
<li class=""><button type="button"><span>buying</span></button></li>
<li class=""><button type="button"><span>coco</span></button></li>
<li class=""><button type="button"><span>daba</span></button></li>
<li class=""><button type="button"><span>dark</span></button></li>
<li class=""><button type="button"><span>envy</span></button></li>
<li class=""><button type="button"><span>merong</span></button></li>
<li class=""><button type="button"><span>qni</span></button></li>
<li class=""><button type="button"><span>style</span></button></li>
<li class=""><button type="button"><span>merry</span></button></li>
<li class=""><button type="button"><span>mimi</span></button></li>
</ul>
<div class="tab_cont">
<div class="carousel" data-ix-options="view-length:2; move-length:1; item-margin: 20px 20px;">
<div class="ix-list-viewport">
<ul class="ix-list-items">
<li class="ix-list-item" data-loading-text="ablelyn">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_ablelyn.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="buying">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_buying.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="coco">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_coco.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="daba">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_daba.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="dark">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_dark.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="envy">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_envy.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="merong">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_merong.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="onthe">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_onthe.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="qni">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_qni.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="style">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_style.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="merry">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand__merry.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="mimi">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand__mimi.jpg');"></a>
</li>
</ul>
</div>
<div class="ix-controller">
<a href="#" class="ix-btn-prev">이전</a>
<a href="#" class="ix-btn-next">다음</a>
</div>
</div>
</div>
</div>
<div class="designer_tab2">
<ul class="link_group">
<li class=""><button type="button"><span>ablelyn1</span></button></li>
<li class=""><button type="button"><span>buying1</span></button></li>
<li class=""><button type="button"><span>coco1</span></button></li>
<li class=""><button type="button"><span>daba1</span></button></li>
<li class=""><button type="button"><span>dark1</span></button></li>
<li class=""><button type="button"><span>envy1</span></button></li>
<li class=""><button type="button"><span>merong1</span></button></li>
<li class=""><button type="button"><span>qni1</span></button></li>
<li class=""><button type="button"><span>style1</span></button></li>
<li class=""><button type="button"><span>merry1</span></button></li>
<li class=""><button type="button"><span>mimi1</span></button></li>
</ul>
<div class="tab_cont">
<div class="carousel" data-ix-options="view-length:2; move-length:1; item-margin: 20px 20px;">
<div class="ix-list-viewport">
<ul class="ix-list-items">
<li class="ix-list-item" data-loading-text="ablelyn">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_ablelyn.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="buying">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_buying.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="coco">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_coco.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="daba">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_daba.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="dark">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_dark.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="envy">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_envy.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="merong">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_merong.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="onthe">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_onthe.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="qni">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_qni.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="style">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_style.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="merry">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand__merry.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="mimi">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand__mimi.jpg');"></a>
</li>
</ul>
</div>
<div class="ix-controller">
<a href="#" class="ix-btn-prev">이전</a>
<a href="#" class="ix-btn-next">다음</a>
</div>
</div>
</div>
</div>
<div class="designer_tab3">
<ul class="link_group">
<li class=""><button type="button"><span>ablelyn2</span></button></li>
<li class=""><button type="button"><span>buying2</span></button></li>
<li class=""><button type="button"><span>coco2</span></button></li>
<li class=""><button type="button"><span>daba2</span></button></li>
<li class=""><button type="button"><span>dark2</span></button></li>
<li class=""><button type="button"><span>envy2</span></button></li>
<li class=""><button type="button"><span>merong2</span></button></li>
<li class=""><button type="button"><span>qni2</span></button></li>
<li class=""><button type="button"><span>style2</span></button></li>
<li class=""><button type="button"><span>merry2</span></button></li>
<li class=""><button type="button"><span>mimi2</span></button></li>
</ul>
<div class="tab_cont">
<div class="carousel" data-ix-options="view-length:2; move-length:1; item-margin: 20px 20px;">
<div class="ix-list-viewport">
<ul class="ix-list-items">
<li class="ix-list-item" data-loading-text="ablelyn">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_ablelyn.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="buying">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_buying.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="coco">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_coco.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="daba">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_daba.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="dark">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_dark.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="envy">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_envy.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="merong">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_merong.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="onthe">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_onthe.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="qni">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_qni.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="style">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand_style.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="merry">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand__merry.jpg');"></a>
</li>
<li class="ix-list-item" data-loading-text="mimi">
<a href="#" target="_self" style="background-image:url('http://r2o.co.kr/data/newdi/women/brand__mimi.jpg');"></a>
</li>
</ul>
</div>
<div class="ix-controller">
<a href="#" class="ix-btn-prev">이전</a>
<a href="#" class="ix-btn-next">다음</a>
</div>
</div>
</div>
</div>
<script>
var $slide = $('.designer_tab1 .carousel').ixSlideMax();
$(window).on('resize', function (e) {
$slide.ixSlideMax('resize');
});
var $slide2 = $('.designer_tab2 .carousel').ixSlideMax();
$(window).on('resize', function (e) {
$slide2.ixSlideMax('resize');
});
var $slide3 = $('.designer_tab3 .carousel').ixSlideMax();
$(window).on('resize', function (e) {
$slide3.ixSlideMax('resize');
});
</script>
</div>
</body>
</html>
