<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<!--
Please note, that you can apply .m--global-blending-active to .fnc-slider
to enable blend-mode for all background-images or apply .m--blend-bg-active
to some specific slides (.fnc-slide). It's disabled by default in this demo,
because it requires specific images, where more than 50% of bg is transparent or monotone
-->
<div class="demo-cont">
<!-- slider start -->
<div class="fnc-slider example-slider">
<div class="fnc-slider__slides">
<!-- slide start -->
<div class="fnc-slide m--blend-green m--active-slide">
<div class="fnc-slide__inner">
<div class="fnc-slide__mask">
<div class="fnc-slide__mask-inner"></div>
</div>
<div class="fnc-slide__content">
<h2 class="fnc-slide__heading">
<div class="fnc-slide__heading-line">
<span>1</span>
</div>
<div class="fnc-slide__heading-line">
<span>山地越野</span>
</div>
</h2>
<button type="button" class="fnc-slide__action-btn">
更多极限
<span data-text="Credits">更多极限</span>
</button>
</div>
</div>
</div>
<!-- slide end -->
<!-- slide start -->
<div class="fnc-slide m--blend-dark">
<div class="fnc-slide__inner">
<div class="fnc-slide__mask">
<div class="fnc-slide__mask-inner"></div>
</div>
<div class="fnc-slide__content">
<h2 class="fnc-slide__heading">
<div class="fnc-slide__heading-line">
<span>2</span>
</div>
<div class="fnc-slide__heading-line">
<span>翼装飞行</span>
</div>
</h2>
<button type="button" class="fnc-slide__action-btn">
更多极限
<span data-text="Credits">更多极限</span>
</button>
</div>
</div>
</div>
<!-- slide end -->
<!-- slide start -->
<div class="fnc-slide m--blend-red">
<div class="fnc-slide__inner">
<div class="fnc-slide__mask">
<div class="fnc-slide__mask-inner"></div>
</div>
<div class="fnc-slide__content">
<h2 class="fnc-slide__heading">
<div class="fnc-slide__heading-line">
<span>3</span>
</div>
<div class="fnc-slide__heading-line">
<span>高山滑雪</span>
</div>
</h2>
<button type="button" class="fnc-slide__action-btn">
更多极限
<span data-text="Credits">更多极限</span>
</button>
</div>
</div>
</div>
<!-- slide end -->
<!-- slide start -->
<div class="fnc-slide m--blend-blue">
<div class="fnc-slide__inner">
<div class="fnc-slide__mask">
<div class="fnc-slide__mask-inner"></div>
</div>
<div class="fnc-slide__content">
<h2 class="fnc-slide__heading">
<div class="fnc-slide__heading-line">
<span>4</span>
</div>
<div class="fnc-slide__heading-line">
<span>徒手攀岩</span>
</div>
</h2>
<button type="button" class="fnc-slide__action-btn">
更多极限
<span data-text="Credits">更多极限</span>
</button>
</div>
</div>
</div>
<!-- slide end -->
</div>
<nav class="fnc-nav">
<div class="fnc-nav__bgs">
<div class="fnc-nav__bg m--navbg-green m--active-nav-bg"></div>
<div class="fnc-nav__bg m--navbg-dark"></div>
<div class="fnc-nav__bg m--navbg-red"></div>
<div class="fnc-nav__bg m--navbg-blue"></div>
</div>
<div class="fnc-nav__controls">
<button class="fnc-nav__control">
山之永住
<span class="fnc-nav__control-progress"></span>
</button>
<button class="fnc-nav__control">
风之永动
<span class="fnc-nav__control-progress"></span>
</button>
<button class="fnc-nav__control">
冰之固结
<span class="fnc-nav__control-progress"></span>
</button>
<button class="fnc-nav__control">
生命主宰
<span class="fnc-nav__control-progress"></span>
</button>
</div>
</nav>
</div>
<!-- slider end -->
<div class="demo-cont__credits">
<div class="demo-cont__credits-close"></div>
<h3 class="demo-cont__credits-heading">尾崎八项挑战</h3>
<h4>地之觉醒（天坑着陆）</h4>
<h4>水之生灵（自然冲浪）</h4>
<h4>风之永动（翼装飞行）</h4>
<h4>冰之固结（高山滑雪）</h4>
<h4> 山之永固（山地越野）</h4>
<h4>生命主宰（徒手攀岩）</h4>
<h4>绝对信任（信念之跳） </h4>
</div>
</div>