Discussion on JSON Slider, Carousel & Timeline - Responsive jQuery Plugin


aeonian supports this item


This author's response time can be up to 10 business days.

14 comments found.

Documentation link does not appear to work. Slider looks great!

Thank you & let me check documentation link.

documentation link working now.

How to add links to the slide so that each slide goes to it’s own url link when clicked.

Thank you so much for your reply. Will review.

Your support has been great just want to say that and hope you have many sales. This is a great slider.

Thank You Sir

Is there a possibly with this slider to go to the next slider after the video is ended?

Can you please send me your email or Skype


my email is tom@tm-media.nl, i can send you my skype by email.

Okay will contact you soon


I bought your plugin in the goal to use the timeline. Unfortunatelly, the timeline items in a year are not correctly ordered. If two items are in the same year, the oldest one in displayed first, it should be the other way since years are displayed in reverse order.

Do you plan to fix this? By the way, I’m not an expert in JS but you use Objects instead of array to store ordered years/month/day items but there is no guarantee on ordering for object properties in JS.

Thank you in advance, Regards, Benoit Pironet

Ohh… Actually there is easy way for solve this issue.

You have to just change object position for change there order.

Please try with this and let me know if you still have issue.


Sorry for late reply, I finaly fixed it on my own:

var tl_html_arr = [];
for (get_year in tl_data) {
    var html_str = '';
    html_str = ' '">';
    html_str += ' ' + get_year + ' ';
    var month_keys = Object.keys(tl_data[get_year]);          
    for (var i=0; i < month_keys.length; i++) {
        var get_month = month_keys[i];
        var day_keys = Object.keys(tl_dataget_year);
        for (var j=0; j < day_keys.length; j++) {
            var get_day = day_keys[j];
            for (get_data in tl_dataget_year[get_day]) {
                html_str += ' ';
                html_str += '  ';

Using the keys and reverse for days and month. Feel free to include this fix in a future release if it suits you.

Regards, Benoit Pironet Be The Wave

Thank You :)

So this is kind of a really big deal. When you are resizing the browser, just pretend you want to test out different device sizes, and you shrink it down to mobile view, then back up to regular size, the browser just locks / freezes and pretty much causes a crash where you need to kill chrome, or wait forever for it to finally get back where it needs to be.

Are you going to be able to implement a fix for this? I’ve narrowed it down to your testimonial slider, even on your own demo page you can see what I mean.

Welcome Sir,

For testimonial please comment below code in json-slider.js line number 32 to 39

/if (settings.ori_data) { options.ori_data = settings.ori_data; } else { options.ori_data = settings.data; } options.data = settings.data; _this.html(’’); _this.jSonSlider(options);/

Thank You

WOW, that worked. Thank you so much. I don’t fully understand why that code would be there if it really causes that much trouble on the browser, it’s really bad actually. I truly appreciate the help, this goes a long way in my book of ‘good support’. Problem solved!

You are welcome Sir. Can you please give rating If you like this plugin. Thank you

Hey there ;) This is a great, easy to use, and easy to learn plugin ;)

However I regret it is not possible nesting is not possible, such as: tags:[tags:[tags:[]]], so you could i.e. have an animation for the two panes of a table, and within each of those panes, an animation for their inside tags… ;))))

However and more sad ;) is that I am unable to load other components within yours, such as : var data = [ {tags: [{name: ‘div’, attr: {id:’Map’}, cssanimate: ‘fadeInLeft’}], thumbnhtml: ‘Thumb1’}, {tags: [{name: ‘div’, cssanimate: ‘fadeInRight’}], thumbnhtml: ‘Thumb2’} ]; $(’#Tabs’).jSonSlider({‘loadallslides’: false, ‘data’: data, ‘touch’: false}); $scope.map = new google.maps.Map(document.getElementById(‘Map’), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); This works fine when loaded, but when thumb switching, it doesn’t. It looks that it “looses” the inner data inside the tags, or like your component re-creates the tags at each tab switch… ;(

Do you have any “trick” to make this kind of code work? ;))


Hi, Thanks u sir, Can u pls send me your email address for future discussen. Thanks

Of course ;) EMail is: olivier.ragheb@muxys.com Thanks


dls1138 Purchased

Hi there. I just purchased the JSON slider. The simple.html demo works well until I resize my browser window. Resizing the window to a larger or smaller size will cause the browser to lock up and sometimes crash. I’ve tested on the latest Chrome and Safari on Mac OS.

Is this is a known issue? Please help I bought this to save time.


dls1138 Purchased

Whoops I just read the comment above. I commented out the lines 32-39 in json-slider.js and all is well now. Thanks.

Great… :)

Sorry for late replay..

How do I autoplay wait for the video to display and then go to the next slide?


Once you play video autoplay countdown stop and as you pause video autoplay countdown start again.



Just curious how the “play” feature is implemented on button click for the automatic transitions. I am trying to make the slider auto start on page load.



Never mind on the auto-play feature. I just initially messed up changing the default values when I called the slider. ‘auto’: [true, ‘10000’] works now that I saw the original JS.

My mistake everything is good.

Hi, I need to animate this https://www.corobori.com/sos/picSlideFading.jpg.

What I want is to see picture fading in and out. I do not want the pictures to be sliding from left to right or vice versa. Just showing a bunch of 7 logos (all of them are individual pics), make them disappear and show another bunch of 7 logos, etc.

Is it possible with your slider ?


Please check this carousal. http://aeonian.in/json-slider/carousel.html This demo is perfect as per your rquirement.

But this is json slider so you need to create json first and its auto convert to carousal.


Purchased !

Have a nice day I think I found a bug in the slider. File – image.html If you change the size of the window it stops working

I just check in chrome browser and its working fine. In which browser you faced bug?

I comment code in json-slider.js line number 32 to 39. The slider started working. But only on my computer. When I upload files to the server, the error appears again

Hi, Let me check it. Will replay you soon. Thanks

json-slider.js line number 32 to 39

This is code for resize browser. When you resize browse main slider function call again and slider restart. Its work in local and live, you can check it in demo url. http://aeonian.in/json-slider/image.html

Please mail me on aeonian.in@gmail.com with more detail. your live url OR screenshots