workbench

This is page is meant to serve as sandbox for experiments and the testing of new features for both this site and others. Most of this page's content is not permanent, and it should not be surprising if some or all of the individual components on the page are not working correctly (server errors not withstanding). However, I have chosen to keep this page public, as it provides me with a publicly visible space that I can use for demonstration and teaching purposes, in addition to my own learning, both locally and remotely without having to set up new sites or sandboxes.

3D Carousel

Wednesday, September 04, 2013

This experiment showcases a little bit of CSS3 transformations, coupled with a bit of data access. Each slide is taken from slide items in the Sitecore database and subsequently rendered here, in the carousel. Although I have not yet added the controls to do so, I will be adding the ability to add and remove slides to the carousel. This is not an overly complicated experiment; the data access is fairly simple, but the real experiment is the integration of the carousel with Sitecore. There are a few remaining bugs in the carousel, but I am working to iron them out.

Add a New Slide

 
 

Delete a Slide

NOTE: As expected, spammers have begun to abuse the fact that I left this experiment open without captcha. As it is just an experiment, I do not have time to put into writing a captcha or other spam prevention measures, so I have disabled it. If you would like to see it in action, please send me a message and I will be happy to temporarily re-enable it for you.

Click the "Next" and "Prev" buttons to rotate the Carousel to the next or previous slide, respectively. Note that you can also try hovering your mouse over a slide, and the carousel should rotate that slide into view.


Issues faced:



  1. Shortest Path Rotation
    The first real issue that I faced was one more of design choice than anything else. As I had decided to make the carousel be AN ACTUAL CAROUSEL, the component was a giant, 3D circle and so if someone was on the last slide then the next slide would be the first slide. This was actually a bit of a problem, since the script originally used the Current Slide Index to determine the rotation angle. The result of this was that the user would click "next" when viewing the last slide, and would then have to watch the carousel scroll all the way back to the beginning, rather than just scroll to the slide immediately to its right. YIKES!

    • Resolution:
      It didn't take long for me to figure out that I needed a second counter, which I named "currentOffset" (Offset for short), to keep track of the current rotation angle. This value enables me to scroll to the desired slide the fastest way possible when hovering over a slide or clicking "Next" while viewing the last slide, i.e. I can rotate left or right based on whichever direction has the shortest path. There were A LOT of changes that had to be made to implement this counter, but the end result was a much more elegant component. Note that the OFFSET could have potentially replaced the Current Slide Index. I chose not to do this, as the Current Slide Index could be useful for later extensions or implementations, and it would have required an entirely new function call in order to calculate the current slide from the offset, as opposed to simply incrementing/decrementing a counter as the slider moves.

    • Final Thoughts/Reflection:
      I am actually pretty proud of this solution to the issue. The Offset value is the crux of the component, and is the core of the elegance and natural feel of the carousel's functionality. Is this solution original? Probably not - I am sure that there were many who came up with this before me; it really is not all that difficult or complex. However, since the way this component works is all but entirely based on this one solution, my favor towards this experiment makes me rather fond of this solution.



  2. Skipping Slides
    The second issue that I faced stemmed from the fact that the carousel was originally written in pure HTML, JS, and CSS3 and was designed to be interactive enough for users to add/remove slides to/from the page, at will. The problem I encountered was with keeping track of the carousel's current Offset (recall: the counter used to store the rotation angle). As new slides were added and old slides removed, the Offset and current slide Index became increasingly complex to keep track of. The result is that the carousel would begin to skip over slides or scroll to the wrong slides, after too many adds and removals had ben performed.

    • Resolution:
      I am sorry to say it, but I did not find a resolution - debugging the issue was consuming too much of my bandwidth, and I needed that time to spend on work and other projects.
      :-/
      We all have our limits.

    • Final Thoughts/Reflection:
      After going back and reviewing this issue, I realized that it really was not an issue at all. Truth be told, it would have been cool to be able to add or remove slides at will like that, but what would be the purpose? In all honesty, if this component was to be incorporated into a larger project, I cannot think of any situation in which end-users would be able to add or remove slides at will (that does not mean that there are none, however). Most likely, this component would be used and set up the way it is currently, i.e. grabbing a defined number of slides out of a database and rendering them here. There are no bugs present, so long as the amount of slides are not changed without postback. Regardless, even if the number of slides were to be changed without postback, i.e. reverting to the initial implementation, the bug is only noticeable after playing around with the carousel for a few minutes and intentionally trying to break it. In conclusion, I am satisfied with this experiment and the resolution (or lack thereof) of this bug. If ever a situation arises when I need to use this and I do need to make the carousel more dynamic, I can address that issue on the clock. For now, I think I have created solid component that does its job without bugs or issues, and may serve as the foundation for future components and maybe even a plugin (queue 'gasps').
      :-)