flexisel/index.html at master · 9bitStudios/flexisel · 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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "viewport" content = "user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Flexisel - A responsive jQuery Carousel</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>

</head>

<body>

<h1>Flexisel</h1>

<p>Flexisel will adapt responsively as the screen width gets smaller...</p>

<ul id="flexiselDemo1">
    <li><img src="images/logo-nyt.png" /></li>
    <li><img src="images/logo-microsoft.png" /></li>
    <li><img src="images/logo-ebay.png" /></li>
    <li><img src="images/logo-hp.png" /></li>
    <li><img src="images/logo-youtube.png" /></li>
</ul>

<div class="clearout"></div>

<p>You can also change the number of items shown depending on the screen width.</p>

<ul id="flexiselDemo2">
    <li><img src="images/logo-adidas.png" /></li>
    <li><img src="images/logo-nike.png" /></li>
    <li><img src="images/logo-amazon.png" /></li>
    <li><img src="images/logo-spotify.png" /></li>
    <li><img src="images/logo-android.png" /></li>
</ul>

<div class="clearout"></div>

<p>Other options include autoplay, number of items to scroll, animation speed when scrolling right and left, initial number of visible items, and more!</p>

<ul id="flexiselDemo3">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
    <li><img src="images/4.jpg" /></li>
</ul>

<div class="clearout"></div>

<p>And you can set whether you want the slider to be infinite or not.</p>

<ul id="flexiselDemo4">
    <li><img src="images/chevrolet.png" /></li>
    <li><img src="images/ford.png" /></li>
    <li><img src="images/aston-martin.png" /></li>
    <li><img src="images/mini.png" /></li>
    <li><img src="images/lamborghini.png" /></li>
    <li><img src="images/ferrari.png" /></li>
</ul>

<script type="text/javascript">

$(window).load(function() {
    $("#flexiselDemo1").flexisel();

    $("#flexiselDemo2").flexisel({
        visibleItems: 4,
        itemsToScroll: 3,
        animationSpeed: 200,
        infinite: true,
        navigationTargetSelector: null,
        autoPlay: {
            enable: false,
            interval: 5000,
            pauseOnHover: true
        },
        responsiveBreakpoints: {
            portrait: {
                changePoint:480,
                visibleItems: 1,
                itemsToScroll: 1
            },
            landscape: {
                changePoint:640,
                visibleItems: 2,
                itemsToScroll: 2
            },
            tablet: {
                changePoint:768,
                visibleItems: 3,
                itemsToScroll: 3
            }
        },
        loaded: function(object) {
            console.log('Slider loaded...');
        },
        before: function(object){
            console.log('Before transition...');
        },
        after: function(object) {
            console.log('After transition...');
        },
        resize: function(object){
            console.log('After resize...');
        }
    });

    $("#flexiselDemo3").flexisel({
        visibleItems: 3,
        itemsToScroll: 1,
        autoPlay: {
            enable: true,
            interval: 5000,
            pauseOnHover: true
        }
    });

    $("#flexiselDemo4").flexisel({
        infinite: false
    });

});
</script>


</body>
</html>