How to create a horizontal and vertical coda slider with The Wall. A draggable and intelligent coda. This tutorial shows how to set The Wall to obtain this type of use. It is also possible to use bullets and browse arrows fast and easily. As for The Wall’s way of thinking, contents are retrieved only if they are required.

---

---

---

CONFIGURATION FOR HORIZONTAL CODA

Snippet code Css

                    /*
                        Minimal Css Required
                        Coda not included */
            	    #viewport{
                    	width:450px;
                    	height:450px;
                        position:relative;
                    	overflow:hidden;
                    }

                    #wall{
                        z-index:1;
                    }
                        #wall .tile{ }
                

---

Snippet code Html

---

Configuration The Wall

                    var images = [
                                    "url1",
                                    "url2",
                                    "url3",
                                    ...
                                    "url9"
                                 ];

                     var wall = new Wall("wall", 
                                         {
                                             "draggable":true,
                                             "autoposition":true,
                         				 	 "speed":1000,
                         					 "inertia":true,
											 "preload":true,
                                             "transition":Fx.Transitions.Expo.easeInOut,
                                             "width":450,
                                             "height":450,
                                             "rangex":[0,10],
                                             "rangey":[0,1]
                                         });

                         // CallBack
                         callBack = function(items){
                             items.each(function(e, i){
                                     e.node.setStyle("background", "url('"+images[(e.y)+1]+"') no-repeat center center");
                             })
                         }

                         // Define CallBack
                         wall.setCallOnUpdate(callBack)

                         // Init il Wall
                         wall.initWall();

                         // List Coda
                         wall.getListLinksPoints("coda-list");