/var/www/clients/client1/web2/web/latynfusion/2024_borrar/js/owl.carousel/demos
NameSizeModeActions
assets/-0755rm
json/-0755rm
autoHeight.html126640644editdlrm
click.html134220644editdlrm
custom.html148560644editdlrm
customJson.html117480644editdlrm
full.html116630644editdlrm
images.html119280644editdlrm
itemsCustom.html138850644editdlrm
json.html121780644editdlrm
lazyLoad.html143050644editdlrm
manipulations.html159510644editdlrm
navOnTop.html137400644editdlrm
navOnTop2.html119070644editdlrm
one.html113750644editdlrm
owlStatus.html157920644editdlrm
progressBar.html148650644editdlrm
randomOrder.html145830644editdlrm
scaleup.html117760644editdlrm
sync.html201010644editdlrm
transitions.html130160644editdlrm
Edit: /var/www/clients/client1/web2/web/latynfusion/2024_borrar/js/owl.carousel/demos/manipulations.html (15951B)
Owl Carousel - Content Manipulations

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;
}