Skip to content

Instantly share code, notes, and snippets.

@jhyang12345

jhyang12345/index.html

Created July 19, 2017 07:36
Show Gist options
  • Save jhyang12345/bc57a1c9c5d5aa465989237050ef6f5b to your computer and use it in GitHub Desktop.
Save jhyang12345/bc57a1c9c5d5aa465989237050ef6f5b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>배달의민족 슬라이딩~</title>
<style>
.main_slides_wrap {
text-align: center;
max-width: 1920px;
margin: 0 auto;
}
.slides_container {
position: relative;
height: 420px;
}
.main_slides_wrap .bx-wrapper {
text-align: left;
}
.bx-wrapper {
margin: 0 auto;
background: #fff;
}
.slides_container ul.slides_pagination {
z-index: 55;
position: relative;
bottom: 30px;
width: 100%;
height: 0;
overflow: visible;
}
ul.main_slides_lst {
overflow: hidden;
height: 420px;
}
ul.main_slides_lst li a {
display: block;
width: 980px;
height: 420px;
margin: 0 auto;
overflow: hidden;
text-indent: -3000px;
}
.slides_container ul.slides_pagination {
z-index: 55;
position: relative;
bottom: 30px;
width: 100%;
height: 0;
overflow: visible;
}
.slides_container ul.slides_pagination li {
display: inline-block;
vertical-align: top;
padding: 0 3px;
}
.slides_container div.slides_navi {
width: 100%;
}
.slides_container div.slides_navi a.slides_prev {
right: 50%;
margin-right: 530px;
background-position: left center;
}
.slides_container div.slides_navi a {
z-index: 55;
display: block;
width: 60px;
height: 92px;
text-indent: -3000px;
overflow: hidden;
position: absolute;
top: 50%;
margin-top: -46px;
background: url(https://cdn.bmf.kr/web/common/main_slides_navi.png) no-repeat center center;
}
.slides_container div.slides_navi a.slides_next {
left: 50%;
margin-left: 530px;
background-position: right center;
}
.slides_container ul.slides_pagination li a {
display: block;
width: 10px;
height: 0;
padding: 10px 0 0 0;
overflow: hidden;
background: #FFF;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
opacity: 0.6;
filter: alpha(opacity=60);
}
a {
text-decoration: none;
color: #333;
}
</style>
<script src="js/main.js"></script>
</head>
<body>
<div class="wrap main_slides_wrap">
<h2 class="blind">메인배너</h2>
<div id="main-banners" class="slides_container">
<div class="bx-wrapper" style="max-width: 100%; margin: 0px auto;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 420px;"><ul class="main_slides_lst" data-ref_id="main-banners" style="width: auto; position: relative;">
<li class="s1" style="background-image: url(&quot;https://cdn.bmf.kr/banner/main_banner/170710/1499664994146_bb0efd9c4cc6.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/promotion/list.php?cno=5070000&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '★복날 기획전')">
복날 기획전 </a>
</li>
<li class="s2" style="background-image: url(&quot;https://cdn.bmf.kr/banner/temp_main_banner/170712/1499835605040_f75b0b095cd4.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/promotion/honsul-salon.php&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '★ 딩고')">
딩고 </a>
</li>
<li class="s3" style="background-image: url(&quot;https://cdn.bmf.kr/banner/temp_main_banner/170713/1499921375267_482833ebbe80.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/brand/list.php?cno=30080624&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '★ 무교동 명낙지')">
중독 주의! 매운맛의 정석 </a>
</li>
<li class="s4" style="background-image: url(&quot;https://cdn.bmf.kr/banner/main_banner/170712/1499849909533_711d52b30484.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/promotion/list.php?cno=5140000&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '★ 다이어트 기획전')">
다이어트 기획전 </a>
</li>
<li class="s5" style="background-image: url(&quot;https://cdn.bmf.kr/banner/main_banner/170706/1499316420194_a34c62ecf722.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/promotion/detail.php?hash=HB9D1&amp;cno=5070000&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '★ [보양식1-1][집밥의완성] 닭 보양식 2종')">
[보양식1-1][집밥의완성] 닭 보양식 2종 </a>
</li>
<li class="s6" style="background-image: url(&quot;https://cdn.bmf.kr/banner/main_banner/170711/1499762216226_982b82666d8c.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/promotion/list.php?cno=5070000&amp;ga_banner=1&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '☆ [보양식2-1]소식')">
[보양식2-1]소식 </a>
</li>
<li class="s7" style="background-image: url(&quot;https://cdn.bmf.kr/banner/main_banner/170707/1499410281964_51fb39a533ad.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/side-dish/list.php?cno=30010900&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '★ 3,300원 카테고리 오픈')">
3,300원 카테고리 오픈 </a>
</li>
<li class="s8" style="background-image: url(&quot;https://cdn.bmf.kr/banner/main_banner/170706/1499309555843_973ea4f49765.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/brand/list.php?cno=30080330&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '☆ [개금밀면] 앵콜 이벤트')">
[개금밀면] 앵콜 이벤트 </a>
</li>
<li class="s9" style="background-image: url(&quot;https://cdn.bmf.kr/banner/main_banner/170704/1499145124189_ee205d29b823.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/promotion/camping_2nd.php&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '★ 캠핑기획전 2 ')">
캠핑기획전 2 </a>
</li>
<li class="s10" style="background-image: url(&quot;https://cdn.bmf.kr/banner/main_banner/170706/1499315550920_bcb3087568df.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/brand/list.php?cno=30080406&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '★ 다담x옹가 론칭')">
다담x옹가 론칭 </a>
</li>
<li class="s11" style="background-image: url(&quot;https://cdn.bmf.kr/banner/main_banner/170706/1499319971682_30379a1464d9.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 50;" aria-hidden="false">
<a href="https://www.baeminfresh.com/board/?db=bfevent&amp;no=161&amp;mari_mode=view%40view&amp;cate=&amp;page=1&amp;listURL=https%3A%2F%2Fwww.baeminfresh.com%2Fboard%2F%3Fdb%3Dbfevent&amp;search=&amp;search_str=&amp;temp=&amp;pno=&amp;ono=&amp;ifr=&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '★ 옹가솜씨 쿠킹클래스 초대')">
옹가솜씨 쿠킹클래스 초대 </a>
</li>
<li class="s12" style="background-image: url(&quot;https://cdn.bmf.kr/banner/main_banner/170405/1491367917020_ca4958af233a.jpg&quot;); float: none; list-style: none; position: absolute; width: 1920px; z-index: 0; display: none;" aria-hidden="true">
<a href="https://www.baeminfresh.com/promotion/list.php?cno=5190000&amp;ga_banner=1&amp;ga_banner=1" onclick="ga('send', 'event', 'Product', 'Click Banner', '☆ 새로운 맘 ')">
새로운 맘 </a>
</li>
</ul></div></div>
<div class="slides_navi">
<a href="#" class="slides_prev" title="이전">이전</a>
<a href="#" class="slides_next" title="다음">다음</a>
</div>
<ul class="slides_pagination">
<li><a href="#" class="">0</a></li>
<li><a href="#" class="">1</a></li>
<li><a href="#" class="">2</a></li>
<li><a href="#" class="">3</a></li>
<li><a href="#" class="">4</a></li>
<li><a href="#" class="">5</a></li>
<li><a href="#" class="">6</a></li>
<li><a href="#" class="">7</a></li>
<li><a href="#" class="">8</a></li>
<li><a href="#" class="">9</a></li>
<li><a href="#" class="now">10</a></li>
<li><a href="#">11</a></li>
</ul>
</div>
</div>
<div class="rotate_holder">
<div class="view_window">
<div class="waiting_list">
</div>
</div>
<div class="left_button">
<img src="left.png" />
</div>
<div class="right_button">
<img src="right.png" />
</div>
</div>
<script type="template" id="thumbnail_info">
<div class="inner_rotate_holder">
<img class="inner_rotate_holder_thumbnail" src="https://cdn.bmf.kr/_data/product/201702/14/c181ba751f8a57e4583a8a8bbf607515.jpg" />
<div class="context">
1
</div>
</div>
<div class="inner_rotate_holder">
<img class="inner_rotate_holder_thumbnail" src="https://cdn.bmf.kr/_data/product/H2BDC/2f86b4a25087b212615edac616e0f811.jpg" />
<div class="context">
2
</div>
</div>
<div class="inner_rotate_holder">
<img class="inner_rotate_holder_thumbnail" src="https://cdn.bmf.kr/_data/product/201702/14/c181ba751f8a57e4583a8a8bbf607515.jpg" />
<div class="context">
3
</div>
</div>
<div class="inner_rotate_holder">
<img class="inner_rotate_holder_thumbnail" src="https://cdn.bmf.kr/_data/product/H2BDC/2f86b4a25087b212615edac616e0f811.jpg" />
<div class="context">
4
</div>
</div>
<div class="inner_rotate_holder">
<img class="inner_rotate_holder_thumbnail" src="https://cdn.bmf.kr/_data/product/H6DE0/bde4e8be15572f1b30781ed6cc051ed0.jpg" />
<div class="context">
5
</div>
</div>
<div class="inner_rotate_holder">
<img class="inner_rotate_holder_thumbnail" src="https://cdn.bmf.kr/_data/product/H2BDC/2f86b4a25087b212615edac616e0f811.jpg" />
<div class="context">
6
</div>
</div>
<div class="inner_rotate_holder">
<img class="inner_rotate_holder_thumbnail" src="https://cdn.bmf.kr/_data/product/201702/14/c181ba751f8a57e4583a8a8bbf607515.jpg" />
<div class="context">
7
</div>
</div>
<div class="inner_rotate_holder">
<img class="inner_rotate_holder_thumbnail" src="https://cdn.bmf.kr/_data/product/H2BDC/2f86b4a25087b212615edac616e0f811.jpg" />
<div class="context">
8
</div>
</div>
<div class="inner_rotate_holder">
<img class="inner_rotate_holder_thumbnail" src="https://cdn.bmf.kr/_data/product/H2BDC/2f86b4a25087b212615edac616e0f811.jpg" />
<div class="context">
9
</div>
</div>
</script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</body>
</html>
Raw
main.css
html {
}
.slides_pagination li a:hover {
opacity: 1.0 !important;
cursor: pointer;
}
ul.main_slides_lst li {
background: no-repeat center top;
}
.rotate_holder {
width: 100%;
margin-top: 30px;
visibility: hidden;
font-size: 0px;
position: relative;
}
.context {
font-size: 12px;
}
.inner_rotate_holder {
display: inline-block;
}
.inner_rotate_holder_thumbnail {
display: block;
width: 215px;
height: 215px;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
}
.view_window {
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
}
.waiting_list {
padding-left: 0;
white-space: nowrap;
}
.left_button {
position: absolute;
display: inline-block;
top: 70px;
left: 0px;
}
.right_button {
position: absolute;
display: inline-block;
top: 70px;
right: 0px;
}
.left_button:hover {
cursor: pointer;
}
.right_button:hover {
cursor: pointer;
}
.right_button > img {
width: 50px;
}
.left_button > img {
width: 50px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment