Git Product home page Git Product logo

af-carousel's Introduction

#af.carousel.js

af.carousel

To use af.carousel you must do the following

  1. Create a div with the content inside you want to page between. You must set the height and width of this div, along with overflow:hidden
<div id="my_div" style="width:768px;height:400px;overflow:hidden">
   <div style="float:left;width:766px;height:400px;border:1px solid white;background:yellow;"></div>
   <div style="float:left;width:766px;height:400px;border:1px solid white;background:green;"></div>
</div>
  1. if you want the dots to show up for paging, create the div
<div id="carousel_dots" style="text-align: center; margin-left: auto; margin-right: auto; clear: both;position:relative;top:-40px;z-index:200"></div>
  1. Call the javascript function to create the carousel
var carousel = $("#my_div").carousel();

There are additional configuration options that are passed in as an object parameter

var options={
   vertical:false, // page up/down
   horizontal:true, // page left/right
   pagingDiv:null, // div to hold the dots for paging
   pagingCssName:"carousel_paging", //classname for the paging dots
   pagingCssNameSelected: "carousel_paging_selected", //classname for the selected page dots
   wrap:true //Creates a continuous carousel
}
var carousel = $("#my_div").carousel(options);

There are two functions for adding/removing items

carousel.addItem(element);
carousel.removeItem(); //remove all items
carousel.removeItem(index); //remove an item by index

af-carousel's People

Contributors

manuelwenner avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

af-carousel's Issues

af undefined error

I am trying to integrate this with my appframework 2.0 based code. I get an error:
Uncaught ReferenceError: af is not defined

on the last line of the af.carousel.js file leading to a

Uncaught TypeError: Object [object Object] has no method 'carousel' index.html:213
init_carousel

Any ideas on how to fix it?

Getting the slide index on carousel change

How might I get the index of the new slide/element after the carousel has moved and relay it back to my code as an event?

By placing console.log(this.carouselIndex); at the end of the touchEnd() function I can see the correct index, but can't seem get it back to my main code.

I also see $.trigger(this,"movestop",[this.el]); in the same function, which presumably does what I'm trying to do, but listening for it with the below has no effect.

// begin ui ready -----------------
$.ui.ready(function(){
var options={
...
wrap:true //Creates a continuous carousel
}
var carousel = $("#my_div").carousel(options);

$(document).on('movestop', "#my_div", function(evt) {         
    alert(123);        
});   

});
// end ui ready -----------------

Any ideas what might be wrong? Thanks

e.touches undefined

Hello Ian,

I think

e.touches

should be replaced by

e.originalEvent.touches

for instance in e.originalEvent.touches[0] on line 133.

Tell me if it seems ok for you and i'll do a pull request.

Pascal

Next/prev

Does it have next and prev buttons?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.