Comments (5)
Slider.js currently only support images but you could hack the library to
support any slide of HTML.
However, I'm thinking of making this recurrent need of sliding any content
easier for the next Slider.js version (but of course, only CSS transitions
will works, not canvas one's).
2011/11/20 Luca G. Soave <
[email protected]
I need to slide/carousel siple html pages or iframes,
is it possible with Slider.js ?... follow an page sample I'd like to convert in a carousel :
http://gitwatcher.com/
any idea ?Thanks in advance
Luca
Reply to this email directly or view it on GitHub:
#9
Gatan Renaudeau, @greweb http://twitter.com/greweb
blog http://blog.greweb.fr | gaetanrenaudeau.fr
from diaporama.
No idea from 'where' to start hacking the lib, ... any suggestion ?
from diaporama.
You could create a new method "setContent" which take an Array of HTML
(which is like setPhotos but for HTML content).
You could adapt the tmpl() to fit your need.
Something like: (coffeescript)
tmplSlider = (o) ->
slider = $("""
and setContent :
setContent: (@content) ->
# Templating and appending to DOM
@node = @tmpl(slides: content)
@container.empty().append @node
@_sync()
Here is the full JS code which should work (haven't tested) with the
current Slider.js:
var container = $(...);
var slider = new Slider(container);
// On fly hacks ...
slider.tmpl = function(o) {
var slider;
slider = $("<div class="slider">\n<div class="loader"><span
class="spinner"> <span class="percent">0%\n<div
class="slide-images">\n<div class="options">\n<a
class="prevSlide" href="javascript:;">prev\n<span
class="slide-pager">\n<a class="nextSlide"
href="javascript:;">next\n\n");
slider.find('.slide-images').append($.map(o.slides, function(slide) {
return $(slide)[0];
}));
slider.find('.slide-pager').append($.map(o.slides, function(slide, i) {
return $('' + (i + 1) + '')[0];
}));
return slider;
};
slider.setContent = function(content) {
this.content = content;
this.node = this.tmpl({
slides: content
});
this.container.empty().append(this.node);
};
// Using
...
slider.setContent([
'html here ...',
'html here....',
...
])
remember it will break the setPhotos, fetchJson method and will only work
for CSS transitions
2011/11/20 Luca G. Soave <
[email protected]
No idea from 'where' to start hacking the lib, ... any suggestion ?
Reply to this email directly or view it on GitHub:
#9 (comment)
Gatan Renaudeau, @greweb http://twitter.com/greweb
blog http://blog.greweb.fr | gaetanrenaudeau.fr
from diaporama.
I'll get a try, many thanks.
(great job, my compliments!)
from diaporama.
created a #12 issue
from diaporama.
Related Issues (20)
- bug in tests
- Slide2D + Kenburns support ?
- easing alias
- New Slide Kind: GLSL Shader
- Diaporama.fromStream(observable)
- event 'slideEnd' should be triggered in another place HOT 8
- slide and slideEnd trigger twice when loop:true at last slide HOT 1
- retry over resource loading
- bower support HOT 1
- Add text into video HOT 6
- document freeSlideBehind option HOT 2
- No Bug: Only a Thanks HOT 1
- Transition effect not playing
- DiaporamaFormatError: Timeline item can't be understood as a segment.
- Diaporama transitions in PhantomJS HOT 1
- Video audio tracks not playing on Mobile Safari / iOS
- Can a slideshow be downloaded as an mp4? HOT 13
- Migrate from glsl-transitions to gl-transitions HOT 1
- Canvas DOM element not removed on destroy
- Dynamically add new image and change image order
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from diaporama.