AnythingSlider/example.html at master · PulkitJain/AnythingSlider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>anythingSlider</title>

    <link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
	<script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        function formatText(index, panel) {
		  return index + "";
	    }

        $(function () {

            $('.anythingSlider').anythingSlider({
                easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
                autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
                delay: 3000,                    // How long between slide transitions in AutoPlay mode
                startStopped: false,            // If autoPlay is on, this can force it to start stopped
                animationTime: 600,             // How long the slide transition takes
                hashTags: true,                 // Should links change the hashtag in the URL?
                buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        		pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        		startText: "Go",             // Start text
		        stopText: "Stop",               // Stop text
		        navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
            });

            $("#slide-jump").click(function(){
                $('.anythingSlider').anythingSlider(6);
            });

        });
    </script>
</head>

<body>

    <div id="page-wrap">

        <a href="http://css-tricks.com/examples/AnythingSlider.zip" id="dl">Download v1.2</a>

        <h5>By <a href="http://css-tricks.com">Chris Coyier</a>, based upon lots of smart stuff by <a href="http://jqueryfordesigners.com/">Remy Sharp</a>,<br />
        significantly improved by <a href="http://pixelgraphics.us/">Douglas Neiner</a></h5>

        <h1>AnythingSlider</h1>

        <div class="anythingSlider">

          <div class="wrapper">
            <ul>
               <li>
                    <img src="images/slide-civil-1.jpg" alt="" />
               </li>
              <li>

                 <div id="textSlide">

                    <img src="images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />

                    <h3>Queenie's Killer Tomato Bagel Sandwich</h3>

                    <h4>Ingredients</h4>

                    <ul>
                        <li>1 bagel, split and toasted</li>
                        <li>2 tablespoons cream cheese</li>
                        <li>1 roma (plum) tomatoes, thinly sliced</li>
                        <li>salt and pepper to taste</li>
                        <li>4 leaves fresh basil</li>
                    </ul>


                 </div>

              </li>
              <li>
                 <img src="images/slide-env-1.jpg" alt="" />
              </li>
              <li>
                 <img src="images/slide-civil-2.jpg" alt=""  />
              </li>
              <li>
                 <div id="quoteSlide">

                    <blockquote>Life is conversational. Web design should be the same way. On the web, you&#8217;re talking to someone you&#8217;ve probably never met – so it&#8217;s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
                    <p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>

                 </div>
              </li>
              <li>
                 <img src="images/slide-env-2.jpg" alt="" />
              </li>
            </ul>
          </div>

        </div> <!-- END AnythingSlider -->


        <h2>Features</h2>
        <ul>
            <li>Slides are HTML Content (can be anything)</li>
            <li>Next Slide / Previous Slide Arrows</li>
            <li>Navigation tabs are built and added dynamically (any number of slides)</li>
            <li>Optional custom function for formatting navigation text</li>
            <li>Auto-playing (optional feature, can start playing or stopped)</li>
            <li>Each slide has a hashtag (can link directly to specific slides)</li>
            <li>Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide)</li>
            <li>Multiple sliders allowable per-page (hashtags only work on first)</li>
            <li>Pauses autoPlay on hover (option)</li>
            <li>Link to specific slides from static text links (<a href="#" id="slide-jump">Slide 6</a>)</li>
        </ul>


        <h2>Usage &amp; Options (defaults)</h2>
        <pre>$('.anythingSlider').anythingSlider({
        easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
        startStopped: false,            // If autoPlay is on, this can force it to start stopped
        delay: 3000,                    // How long between slide transitions in AutoPlay mode
        animationTime: 600,             // How long the slide transition takes
        hashTags: true,                 // Should links change the hashtag in the URL?
        buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Start",             // Start text
        stopText: "Stop",               // Stop text
        navigationFormatter: null       // Details at the top of the file on this use (advanced use)
});</pre>

        <h3>Linking directly to slides</h3>
        <pre>$("#slide-jump").click(function(){
     $('.anythingSlider').anythingSlider(6);
});</pre>

        <h2>Changelog</h2>

		<h3>Version 1.2</h3>
		<ul>
			<li>Bug Fix: When autoPlay was set to false, any interaction with the control would cause a javascript error.</li>
		</ul>

        <h3>Version 1.1</h3>
        <ul>
            <li>Changed default easing to "swing" so didn't depend on any other plugins</li>
            <li>Removed extra junk (other plugins used for design, etc)</li>
            <li>Added Pause on Hover option</li>
            <li>Added options for passing in HTML for the start and stop button</li>
            <li>Added option to use custom function for formatting the titles of the navigation</li>
            <li>Added public interface for linking directly to certain slides</li>
        </ul>

        <h3>Version 1.0</h3>
        <ul>
            <li>First version</li>
        </ul>

    </div>

</body>

</html>