터치 이미지 슬라이드

http://www.owlgraphic.com/owlcarousel/demos/one.html

owl.carousel.zip

One Item with Image

prev

next

Setup

In order for the images to auto fit to slider containers use width 100% on . Check CSS below

• Javascript

$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
 
      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true
 
      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
 
  });
 
});

• HTML

<div id="owl-demo" class="owl-carousel owl-theme">
 
  <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
  <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
  <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
 
</div>

• CSS

#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
}

More Demos

Images

Custom

Custom 2

One Slide

JSON

JSON Custom

Lazy Load

Auto Height