gonzedge / rambling.slider Goto Github PK
View Code? Open in Web Editor NEWA CoffeeScript improved version of the jQuery NivoSlider
License: MIT License
A CoffeeScript improved version of the jQuery NivoSlider
License: MIT License
The orman
and pascal
themes are apparently missing some styling.
When initializing the ramblingSlider
, you should be able to add custom animations with something like this:
$('#slider').ramblingSlider({
animations:
animationName: function() {
/* ... */
}
});
When the effect is set to a list that doesn't include the 'fade' effect, it still sometimes uses that animation.
Also, when the effect is set to 'random', the 'fade' effect happens more often than the other ones.
Let's say, I added 3 slides with 3 different links:
a href="link_1" img /a
a href="link_2" img /a
a href="link_3" img /a
For some reason on the fron-end all slides have one link, common for all - "link_3" (or link of the final slide),
like if I added:
a href="link_3" img /a
a href="link_3" img /a
a href="link_3" img /a
Also, if 1st slide doesn't include the link, anyway it will be linked with "link_3" on the front-end.
For example:
just img
a href="link_2" img /a
a href="link_3" img /a
Will work like:
a href="link_3" img /a
a href="link_3" img /a
a href="link_3" img /a
I am using last version - 0.3.1
The html should be changed from this:
<div id="slider">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
<a href="link"><img src="image4.jpg" alt="" /></a>
</div>
To this:
<div id="slider">
<ul>
<li><img src="image1.jpg" alt="" /></li>
<li><img src="image2.jpg" alt="" /></li>
<li><img src="image3.jpg" alt="" /></li>
<li><a href="link"><img src="image4.jpg" alt="" /></a></li>
</ul>
</div>
Also take into account the dynamically generated html.
If possible, add some new transition effects, based on the existing ones.
The caption animation gets off timing if the animation is too slow.
It also happens with the default speed if left for a long time.
Also happens when the pauseTime
option is greater than the speed
.
When generating the jquery.rambling.slider.js
, generate a CoffeeScript equivalent (jquery.rambling.slider.coffee
)
When the alignBottom
is set to true
, the transition is done with top alignment instead of bottom.
This is true for the slice
effects.
As well as there is a controlNavThumbs
option to enable control navigation thumbnails, add a controlNavText
option to enable control navigation text.
Method contains
throws this error when called on IE 8, because the indexOf
method is not supported by IE 8 's Array object.
The slider keeps animating the same image over and over again.
Also, the next and previous buttons are not disabled.
Write some methods so that you can go to the previous slide like this:
$('#slider').ramblingSlider('previousSlide')
To the next slide like this:
$('#slider').ramblingSlider('nextSlide')
And to any specific slide like this:
$('#slider').ramblingSlider('slide', 2)
Also to get the current slide:
$('#slider').ramblingSlider('slide')
Add the theme
option to be specified on initializing, like this:
$('#slider').ramblingSlider({theme: 'whatever'});
Which will in turn result in this:
<div id="slider" class="ramblingSlider theme-whatever">
...
</div>
For elements like this:
<a href="#">
<img src="image1.jpg" alt="image one" />
</a>
The link isn't showing.
For some animations, an http request is done to fetch the image again.
The slideInLeft
effect is different from the slideInRight
. The slideInRight
isn't really sliding.
Add the correct slideInRight
effect and a new effect both Right
and Left
to do the current slideInRight
effect.
(Maybe rollover
)
The current jQuery Rambling Slider is based on Nivo Slider v2.7.1. Bring it up to date with the features from subsequent versions.
If possible, add ability to add one or more flash element to the slider along with the images and images with links.
There is no transition from image to flash or from flash to another flash.
If the slider has no height, even if it gets it later from an image, the animation container is not shown
There should be a destroy
method to eliminate the slider.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.