{desc}
This sample creates a Sliding Panels widget by using Spry Data to build the repeating markup. In this sample the content panels are generated dynamically and the photo in each panel comes from Spry Data. The text is static, which is just there for example.
The content panel is generated in a Spry:repeat region. An important thing in the panel widget is that each panel should have a unique ID. This ID is generated with a Spry data reference. Using the same method, the Panel links are generated the same way, using the same data values. This ensures that the panel links and IDs match up correctly. In this sample, the visible window is twice as wide as the content panel. This allows for 2 panels to show at once. The links, therefore, need to show only every other panel number. This will allow the panel to move by 2 content panels each time. To do this, a spry:if is used to only display the even number panel numbers.
Note: Since this sample depends on Spry Data for the content and markup, it will not degrade when JavaScript is turned off. This sample shows how to construct this widget with Data. Determine if this method fits your needs with degredation and accessibility in mind. Also, this sample is more complicated only because we are showing 2 panels at once and there are differing lengths of text in the panels.
Page: {viewNumber}