Content manipulations.

Setup

See buttons on top right? Great! Now have a play with them and you get the idea. Thats all. If you have any questions let me know on github

$(document).ready(function() {

  var owl = $("#owl-demo"),
      i = 0,
      textholder,
      booleanValue = false;

  //init carousel
  owl.owlCarousel();

  /*
  addItem() method add new slides on given position

  Syntax:
  owldata.addItem(htmlString, targetPosition)

  First parameter(mandatory) "htmlString" accept string like this:
  var newItem = "<div>new Item</div>"
  
  Second parameter "targetPosition" is optional and accept number values. 
  To add item at the end of carousel you could use -1 value. Last item is default value.
  */
  
  $('.add').on("click", function(e){
    e.preventDefault();
    i += 1;
    var content = "<div class=\"item dodgerBlue\"><h1>"+i+"</h1></div>";
    owl.data('owlCarousel').addItem(content);
  });

  /*
  Next new owl method is .removeItem()

  Syntax:
  owldata.removeItem(targetPosition)

  Where parameter "targetPosition" is target item you will remove. 
  targetPosition is optional. Default value is last item (-1);
  */

  $('.remove').on("click", function(e){
    e.preventDefault();
    i -= 1;
    if(i<=0)i=0;
    $("#owl-demo").data('owlCarousel').removeItem();
  });

  /*
  destroy() method unwrap whole plugin and leave original pre carousel structure
  
  Syntax:
  owldata.destroy();
  */

  $('.destroy').click(function(e){
    e.preventDefault()
    $("#owl-demo").data('owlCarousel').destroy();
  });

  /*
  reinit() method reinitialize plugin 

  Syntax:
  owldata.reinit(newOptions)

  Yes! you can reinit plugin with new options. Old options
  will be overwritten if exist or added if new.

  You can easly add new content by ajax or change old options with reinit method.
  */

  $('.reinit').click(function(e){
    e.preventDefault()
    if(booleanValue === true){
      booleanValue = false;
    } else if(booleanValue === false){
      booleanValue = true;
    }

    owl.data('owlCarousel').reinit({
        singleItem : booleanValue
      });
  })

  /*
  Well, if you destroyed plugin why not resurect it?
  */

  $('.rebuild').click(function(e){
    e.preventDefault()
    owl.owlCarousel();
  });

});
<div id="owl-demo" class="owl-carousel">
  <div class="item dodgerBlue"><h1>Start</h1></div>
</div>
#owl-demo .item{
  display: block;
  padding: 54px 0px;
  margin: 5px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
.left{
  text-align: left;
  margin-bottom: 10px;
}
.left .btn {
  display: block;
}

More Demos

下载代码说明
X关闭

支持拖拽图片左右滚动效果集合

多种图片切换效果:1、左右图片全屏切换2、自适应图片大小图片特效...当然,还可以支持异步加载 效果还是比较全面的