swiper2 响应式轮播示例

<script type="text/javascript" src="http://xuan.news.cn/cloudnews/xhcms_2014/js/jquery.min.js"></script>

<style>
.turn-waper {
 /* width:648px; */
  width:100%;
  height: auto;
  background: #111;
  margin: 10px 0;
  position: relative;
  box-shadow: 0px 0px 5px #000;
}
.turn-waper .arrow-left {
  /*background: url(img/arrows.png) no-repeat left top;*/
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
}
.turn-waper .arrow-right {
  /*background: url(img/arrows.png) no-repeat left top;*/
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
}
.lb-container {
  height: 400px;
  width: 100%;
}
.content-slide {
  padding: 20px;
  color: #fff;
}
.title {
  font-size: 25px;
  margin-bottom: 10px;
}
.pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom:5px;
  width: 100%;
  z-index:99;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 48px;
  height: 8px;
  background: #FFF;
  margin: 0 3px;
  cursor: pointer;
  opacity: 0.5; /* for IE9 and other browsers */
  filter: alpha(opacity=50); /* for IE8 and earlier */
}
.swiper-active-switch {
  opacity: 1; /* for IE9 and other browsers */
  filter: alpha(opacity=100); /* for IE8 and earlier */  
}
.swiper-item{
  position:relative;
}
.lb-img{
  display:block;
  width:100%;
  height:auto;
}
.lb-logo{
  position:absolute;
  bottom:0;
  width:106px;
  height:106px;
}

.slide-bottom-waper{
  position:absolute;
  bottom:0;
  width:100%;
  height:106px;
}
.slide-bottom-bg{
  position:absolute;
  left:106px;
  width:542px;
  height:100%;
  /*
  background-color:#000;
  opacity: 0.5; 
  filter: alpha(opacity=50);
  */
}
.lb-news-title{
  position:absolute;
  padding:0 20px;
  left:106px;
  top:20px;
  width:500px;
  height:60px;
  line-height:60px;
  font-size:30px;
  font-weight:600;
  color:#FFF;
  /*background-color:#FFF;*/
  
}

@media screen and (max-width:640px){
.slide-bottom-waper{
}
.slide-bottom-bg{
  left:0;
  width:100%;
  height:100%;
}
.lb-news-title{
  position:absolute;
  left:0;
  padding:0 5%;
  top:55px;
  width:90%;
  height:30px;
  line-height:30px;
  font-size:22px;
  font-weight:600;
  color:#FFF;
  /*background-color:#FFF;*/
  
}   


</style>


<link rel="stylesheet" href="../../src/list/list.css">


<link rel="stylesheet" href="../../src/public/swiper2/css/idangerous.swiper.css">
<script src="../../src/public/swiper2/js/idangerous.swiper.min.js"></script>

<div class="list"></div>
  <div class="turn-waper">
    <a class="arrow-left" href="#"></a> 
    <a class="arrow-right" href="#"></a>
    <div class="swiper-container lb-container">
      <div class="swiper-wrapper swiper-lists">
        <div class="swiper-slide swiper-item clearfix"> 
          <img src="../../images/list/news1.jpg" class="lb-img">
          <div class="slide-bottom-waper">
            <img src="../../images/list/lb-logo.png" alt="" class="lb-logo">
            <div class="slide-bottom-bg"></div>
            <div class="lb-news-title ellipsis" title="题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题20">题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题20</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination"></div>
  </div>



 
 <script>
  /*初始化swiper*/
  console.log($)
  var mySwiper = new Swiper('.lb-container',{
    pagination: '.pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true
  })
  $('.arrow-left').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
  })
  $('.arrow-right').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
  });
 
   


   var resizeLb = function(){
    $(".lb-container").height($(".lb-container").find(".lb-img").eq(0).height())

    console.log($(".lb-container").find(".lb-img").eq(0).height())

   }

   resizeLb();
   window.onresize = function(){resizeLb()};

  </script>