swipe

by zunme

HTML

<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/demos/main-demos/css/idangerous.swiper.css">
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.scrollbar.js"></script>
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">

<div class="swiper-container maxheight">
    <div class="swiper-wrapper">
        <div class="swiper-slide red-slide" style="width:50vw;">
            123123<br/>123123
        </div>
        <div class="swiper-slide blue-slide" style="width:100vw;">
 <!-- ㄴㅅㅁㄳ-->
            <div class="swiper-container maxheight">
               <nav class="tab-bar">
                  <section class="left-small">
                    <a class="menu-icon" href="#"><span></span></a>
                  </section>
        
                  <section class="middle tab-bar-section">
                    <h1 class="title">Foundation</h1>
                  </section>
                </nav>

<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-inner">
    <div>
<div id="mainbanner" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="width:100vw;">
                    <img src="http://crayondata.cyworld.com/upload/segment/201410/1506943809woman_730.jpg" width=100%/>
                </div>
<div class="swiper-slide" style="width:100vw;">
                    <img src="http://crayondata.cyworld.com/upload/segment/201410/375683551Kcake_730.jpg" width=100% />
                </div>                
            </div>
                <div class="pagination"></div>
        </div>        
    <p>Lorem ipsum dolor sit amet,<br/> consectetur adipiscing elit. <br/>Nam velit sapien, eleifend in tempus volutpat,<br/> posuere ullamcorper augue. Proin dignissim risus ut quam aliquam dignissim. In erat elit,<br/> bibendum vitae commodo vitae, bibendum non...

CSS

body{margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;}
.swiper-container{width:100vw;color:#fff;text-align:center;}
.maxheight={height:100vh;}
.swiper-slide{height:100%;}
.red-slide{background:#ca4040;}
.blue-slide{background:#4390ee;}
.orange-slide{background:#ff8604;}.green-slide{background:#49a430;}
.pink-slide{background:#973e76;}
.pagination{position:absolute;z-index:20;left:10px;bottom:10px;}
.swiper-pagination-switch{display:inline-block;width:8px;height:8px;border-radius:8px;background:#222;margin-right:8px;opacity:0.8;border:1px solid #fff;cursor:pointer;}.swiper-visible-switch{background:#aaa;}.swiper-active-switch{background:#fff;}

.tab-bar{
    z-index:999;
}
.topbar{
    position: fixed;
    z-index: 999;
    height:49px;
    width:100vw;
    background-color:#333;
    margin-left:50vw;
    left:0;
    top:0;
}

JavaScript

var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true,
    slidesPerView: 'auto',
    onFirstInit: function(swiper){
      swiper.swipeTo(1);
    }
  });
var mySwiper2 = new Swiper('.blue-slide .swiper-container', {
    scrollContainer:true,
    mousewheelControl : false,
    mode:'vertical',
    //Enable Scrollbar
    scrollbar: {
      container :'.swiper-scrollbar',
      hide: true,
      draggable: false  
    }
  });
var mainbanner = new Swiper('#mainbanner',    {
    calculateHeight:true,
    pagination: '.pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true
  })
mySwiper.swipeTo( 0 );
$(".left-small").click(function() {
    mySwiper.swipeTo(0 );
});
$(document).ready( function () {
    $( window ).on( "orientationchange", function( event ) {
      $( "#orientation" ).text( "This device is in " + event.orientation + " mode!" );
    });
});