Code

Discussion on CSS3 Cube Slider - jQuery 3D slider

albanx

albanx supports this item

Supported

44 comments found.

I just sent you an email. This does not work in Chrome (I’m sure it did when I purchased it). Can you please fix.

Hi Andrew

I just tested in Chrome and it works fine (better than on safari and firefox).

Can you send me please the link so I can test?

Alban

Can I use video files instead of photos? thanks

Not directly. You can use an image as preview of video, with a link to the video (so when click over the image the video is opened).

Is autoplay possible in IE fallback?

Thank you! When can we expect a response on this?

at max tomorrow , but I will fix today. Contact me via email so I can send the fix directly. Alban

Fixed. See the email.

Heh sorry but can you tell me the difference between this and

http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/comment-page-1/#comments http://tympanus.net/Development/Slicebox/

cause as i see this, you just ripped this off more or less, i could be wrong tho, if that is the case i apologize

When I create this plugin, first I was inspired from my sliders plugin:

http://codecanyon.net/item/3d-touch-carousel/2561830 http://codecanyon.net/item/fine-slider-jquery-css3-slider/1475745

Then after looking at this slider http://getcu3er.com/ I decided to realise my own cube slider, but first I made a search on Internet and I saw the SliceBox plugin, and was a basic version. So I started my work from that (license permitted it, it was a tutorial) BUT making many many changes:

- I made my own 3D transition functions inside
- I made my plugin compatibility for all browsers that support css3
- created more options like nagivation arrows, APIs
- I added possibility to link images to link
- Multi Cubes sliding (like cubrick cube)

So they might look equal, but they aren’t source code differs.

Hope understand.

Alban

ahh right then, well i like the new transitions in this one so good job on that, rest i have not looked into. but good luck with it

Hi, i´m trying to make it works, but dont know why, it onlys works two times and stop working. I load the page, click next ( or back button) and works 2 times, the just cannot push nothing, its stay static. on chrome and firefox, in explorer just dont works from the very first time. Maybe its interfering any oter js in the web site? thanks

Just made some test on IE. It works on IE 8,9 (without the 3d effect but with a standard slide). Try clearing the IE cache and see what happens

yes, now transitions works, but links on images don´t do( only on ie, on chrome, firefox &safari do well). thx for your help!

Right, this is a bug. I am going to fix it ASAP. Contact me via email so I can have the email and send a fix directly.

Alban

Does this only work with images? or would it work with any html?

The cubeslider works only on images, the caption can be html. Only the http://codecanyon.net/item/3d-touch-carousel/2561830 can work with any html. Contact me via email I will send you a demo of the last one ;).

Alban

Drat, I really just need a simple cube that rotates vertically or horizontally, not all the fanciness of slices or a 3d carousel with perspective—but I need it for html (a mixture of an image with various other elements.

I love the simplicity of the Hexaflip (see demo 3) on codedrops but I would need fallbacks. http://tympanus.net/codrops/2013/03/07/hexaflip-a-flexible-3d-cube-plugin/

Would you be able to do something like this with html for me if I paid?

I can do that but I have no time now

Great product. The current version allows to slide left / right. Is there any possibility to slide up and down, too?

Good question. For the moment it is not possible.

Alban

I have installed this on www.writtlesingers.org. It works beautifully on Firefox, but… not well on Safari, it misses out one of the image titles, pretty poorly on ipad and iphone, even worse on IE (though I don’t have a copy of this and I haven’t tried Chrome. Please can you help. Thanks

Hi

On IE 10 there is a browser bug on the 3d, I have a fix fot that, but still to release. in general IE do not use 3d but a simple slider. on the other browsers it should be fine, even on safari. What version of safari are you using? Can you send me a screenshoot?

Ps. Right now I am refactoring this plugin adding more functions, so will be the good moment to fix all problems.

Alban

Safari 6.0.5 This is what it looks like in Firefox https://dl.dropboxusercontent.com/u/8036016/Screen%20Shot%202013-09-25%20at%2016.58.28.png The second image is Safari where a little box flashes up in the far right corner instead of the title, you can see a little sign of it on the second image. This only happens on the second of four slides. When I tested it with a larger number of slides, it seemed to have the problem on every 4th slide so it changed which picture it was as the presentation looped. https://dl.dropboxusercontent.com/u/8036016/Screen%20Shot%202013-09-25%20at%2016.54.11.png

I do notice that it happens on your demo too. I am using the vertical cubes and faces. Thanks

Frances

In a few days I will release the update, you will receive a mail when it will be available for download. Thank you very much for the screenshots Alban

Is it possible that autoplay parameter doesn’t work? cubesNum: {rows:1, cols:1}, orientation: ‘h’, cubeSync :50, autoplay: true, autoplayinterval: 3000, play: false, arrows: false, navigation: false

Thanks

Ingnoring autoplayinterval not true…

... and yes, I mean CubeSlider…

Sorry for late replay.

Now fixing …

How do I make a autoplay? Thanks for your help!

Hi set the autoplay option to true:
autoplay:true

Hi albanx, it’s not working with ie8, slide only once after that an error with the script “me is undefined”.

Let me know if you can fix this.

Regards

Ouu , ok I am going to fix it in 10 minutes. Thanks

fixed online

Hi Great stuff How do I slow down the transformation?

Why is my slider acting drunk?? Please help: http://maliganisinj.com

Have you forced the sizes?

i changed the size of the pictures and now it works better

I have two quick things I just installed my images over the demo single cube slider and I just want to know where I change the background from that sky blue (#1) and 2, my images (which are tabled) are about w=1000 & h=800 but when the transition turns, it only retains the top sliced image. Is there a way to make the whole table image turn?

I chopped the complete image into slices with photoshop so that I can have it change to the secondary image when I do a mouseover. I did that 3 times for 3 separate images. example: http://terrencedelane.com

Instead of clicking on an arrow to take them to a separate html page with the next image, I purchased your slider to transition to the next image (table) easier and on the same html. The problem Im having is, since I sliced the images, when I click the arrow to go to the next image, it only takes the top sliced image and turns it, THEN shows the whole image aferwards http://terrencedelane.com/examples/index2.html

ok I understand now. I have never test a such configuration. The basic problem is that this plugin is design to work with images for each slide. you have multiple images on each face of the cube.

I really do not recommend that configuration (with tables and slices). You can try to transform each face in a full image, then apply the cube slider, and then also add of each image the mouse over effect based on position of mouse load the right image in a absolute position.

Cheers

Thanks man, I figured out a small solution…change the top image to something I dont mind being the rotator: http://terrencedelane.com (last problem I swear) its not sticking with that image, it goes to others. I know you haven’t tested it out with this but do you have any ideas?

I am using this on a Wordpress site.

1) I initially installed it directly into a Wordpress page. The images winked in and out of existence. The cube did too, sometimes showing as a blank gray form, sometimes not visible at all.

I put the js and css references in the header as well as in the body. It seemed to work the same either way.

Wordpress notoriously has a lot of CSS and jQuery going on, and this site is dense. Instead of trying to debug the whole thing for conflicts, I instead…

2) Created a stand-alone HTML page with this slider built into it, and

3) Displayed it within wordpress using an iframe. Any conflicts with CSS, js, or jQuery went away. Great! BUT….

4) I wanted TWO sliders on the same HTML page, which looked AWESOME in Chrome, but only one showed in any other browser that I tried, so….

5) I created a SECOND html page for the second slider, and

6) Simply installed a second iframe in the Wordpress page.

I have this looking just the way I want right now. I am submitting this comment to help anyone else who might encounter similar problems.

7) The moral of this story: This slider might conflict a little with Wordpress or with some browsers. Displaying it using iframes might be a good way to keep things debugged.

I have it in place here: http://allticketsinc.com/2014/educational/educational-experiences/ When the site goes live later, it will be here: http://allticketsinc.com/educational/educational-experiences/ (assuming nothing changes in the design in the next three weeks).

I am happy you have managed to make it go on wordpress. Maybe initially you got problem for any css incompatibility.

Hello, great slider. I have a problem tho with the fallback in IE7.

I am using jQuery 1.1.11 (the latest version) and what happens is the first two images fall in to its place with different animation than the rest (from top right) and than disappear. I believe it is the jQuery version doing that.

Any help on this would be appreciated. Either fixing the script to work with jQuery 1.1.11 or an advice on how to force all images in the fallback mode to follow the same easing. Btw the “random” is set to false.

Thank you

Thanks for Slider ;)

Vraiment facile a intégrer, et ne prend pas beaucoup de places

Thank you :)

hi, after having purchased your multiloader, I’ve just bought an extended license of this cube slider. I would like to customize one example (index 5). My pictures are smaller than yours (180*140), and I would like to change the size of bullets, shadox, ...., and the font-size of the text (titles) Where can I make this changes ? Another question: is it possible to write the text on 3 lines? (it seems difficult with the tag “title”

Thanks

Hi Alban,

I’m using the folder I’ve downloaded on my account, and I’m surprised that the ramdom cubes effect doesn’t work on IE>=9. On IE7 and IE8 the fallback mode is acting, but IE9, IE10 and IE11 are CSS3 browsers…. Have I downloaded the right version?

Thanks

Michel

Hi Michel Yes it is true IE9+ are css3 browsers but they have bug still not resolved on in the rotate3d css method. That is why I have forced the fallback 3d mode inside the code for IE.

Alban

Ok thank you Alban

Is it possible to use the slider for “posts” ?

You mean for posts in wordpress? No because it is just a image slider does not support other elements.

ok – thanks for your answer

Hello there I just purchased your software how to install it and how to do it

can it work on blogger?

it is a simple js script, so Yes . does not need any particular server side support.

by
by
by
by
by
by