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