UNPKG

accordion-slider-js

Version:

Modular accordion slider built in Vanilla JavaScript.

bqworks.net/accordion-slider/

bqworks/accordion-slider-js

116 lines (90 loc) • 5.32 kB
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
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Accordion Slider - Example 2</title> <link rel="stylesheet" type="text/css" href="../build/accordion-slider.css" media="screen"/> <link rel="stylesheet" type="text/css" href="css/examples.css" media="screen"/> <script type="text/javascript" src="../build/accordion-slider.js"></script> <script type="text/javascript"> document.addEventListener( 'DOMContentLoaded', () => { const accordion = new AccordionSlider( '#example2', { width: 960, height: 400, responsiveMode: 'custom', autoplay: false, mouseWheel:false, breakpoints: { 700: {visiblePanels: 6}, 500: {visiblePanels: 4} } }); }); </script> </head> <body> <!-- Accordion Slider --> <div id="example2" class="accordion-slider"> <div class="as-panels"> <!-- Panel 1 --> <div class="as-panel"> <img class="as-background" src="https://bqworks.net/accordion-slider/images/image1.jpg" data-retina="https://bqworks.net/accordion-slider/images/image1@2x.jpg"/> <a href="https://bqworks.net/accordion-slider/images/image1@2x.jpg" title="Lorem ipsum dolor sit amet"> <img class="as-background-opened" src="https://bqworks.net/accordion-slider/images/image1_crop.jpg" data-retina="https://bqworks.net/accordion-slider/images/image1_crop@2x.jpg"/> </a> </div> <!-- Panel 2 --> <div class="as-panel"> <img class="as-background" src="https://bqworks.net/accordion-slider/images/image2.jpg" data-retina="https://bqworks.net/accordion-slider/images/image2@2x.jpg"/> <a href="https://bqworks.net/accordion-slider/images/image2@2x.jpg" title="consectetur adipisicing elit"> <img class="as-background-opened" src="https://bqworks.net/accordion-slider/images/image2_crop.jpg" data-retina="https://bqworks.net/accordion-slider/images/image2_crop@2x.jpg"/> </a> </div> <!-- Panel 3 --> <div class="as-panel"> <img class="as-background" src="https://bqworks.net/accordion-slider/images/image3.jpg" data-retina="https://bqworks.net/accordion-slider/images/image3@2x.jpg"/> <a href="https://bqworks.net/accordion-slider/images/image3@2x.jpg" title="sed do eiusmod tempor incididunt"> <img class="as-background-opened" src="https://bqworks.net/accordion-slider/images/image3_crop.jpg" data-retina="https://bqworks.net/accordion-slider/images/image3_crop@2x.jpg"/> </a> </div> <!-- Panel 4 --> <div class="as-panel"> <img class="as-background" src="https://bqworks.net/accordion-slider/images/image4.jpg" data-retina="https://bqworks.net/accordion-slider/images/image4@2x.jpg"/> <a href="https://bqworks.net/accordion-slider/images/image4@2x.jpg" title="ut labore et dolore magna aliqua"> <img class="as-background-opened" src="https://bqworks.net/accordion-slider/images/image4_crop.jpg" data-retina="https://bqworks.net/accordion-slider/images/image4_crop@2x.jpg"/> </a> </div> <!-- Panel 5 --> <div class="as-panel"> <img class="as-background" src="https://bqworks.net/accordion-slider/images/image5.jpg" data-retina="https://bqworks.net/accordion-slider/images/image5@2x.jpg"/> <a href="https://bqworks.net/accordion-slider/images/image5@2x.jpg" title="Ut enim ad minim veniam"> <img class="as-background-opened" src="https://bqworks.net/accordion-slider/images/image5_crop.jpg" data-retina="https://bqworks.net/accordion-slider/images/image5_crop@2x.jpg"/> </a> </div> <!-- Panel 6 --> <div class="as-panel"> <img class="as-background" src="https://bqworks.net/accordion-slider/images/image6.jpg" data-retina="https://bqworks.net/accordion-slider/images/image6@2x.jpg"/> <a href="https://bqworks.net/accordion-slider/images/image6@2x.jpg" title="quis nostrud exercitation ullamco"> <img class="as-background-opened" src="https://bqworks.net/accordion-slider/images/image6_crop.jpg" data-retina="https://bqworks.net/accordion-slider/images/image6_crop@2x.jpg"/> </a> </div> <!-- Panel 7 --> <div class="as-panel"> <img class="as-background" src="https://bqworks.net/accordion-slider/images/image7.jpg" data-retina="https://bqworks.net/accordion-slider/images/image7@2x.jpg"/> <a href="https://bqworks.net/accordion-slider/images/image7@2x.jpg" title="laboris nisi ut aliquip"> <img class="as-background-opened" src="https://bqworks.net/accordion-slider/images/image7_crop.jpg" data-retina="https://bqworks.net/accordion-slider/images/image7_crop@2x.jpg"/> </a> </div> <!-- Panel 8 --> <div class="as-panel"> <img class="as-background" src="https://bqworks.net/accordion-slider/images/image8.jpg" data-retina="https://bqworks.net/accordion-slider/images/image8@2x.jpg"/> <a href="https://bqworks.net/accordion-slider/images/image8@2x.jpg" title="ex ea commodo consequat"> <img class="as-background-opened" src="https://bqworks.net/accordion-slider/images/image8_crop.jpg" data-retina="https://bqworks.net/accordion-slider/images/image8_crop@2x.jpg"/> </a> </div> </div> </div> <!-- End of Accordion Slider --> </body> </html>