This time I will share jQuery Plugin and tutorial about Responsive Retina-ready Slider/Carousel In jQuery, hope it will help you in programming stack.
File Size: | 11.2 KB |
---|---|
Views Total: | 3569 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is a small slider jQuery plugin to create a responsive, mobile-friendly, retina-ready, full-screen content slider/carousel from semantic HTML markup.
Licensed under the Apache License, Version 2.0.
How to use it:
1. Insert slides together with next/prev navigation controls into the HTML page.
01 |
< article class = "slider" > |
02 |
03 |
< section class = "slide" > |
04 |
< img src = "img/1.jpg" alt = "" > |
05 |
< div class = "slide-content" > |
06 |
< p class = "slide-title" >Slide 1</ p > |
07 |
</ div > |
08 |
</ section > |
09 |
10 |
< section class = "slide" > |
11 |
< img src = "img/2.jpg" alt = "" > |
12 |
< div class = "slide-content" > |
13 |
< p class = "slide-title" >Slide 2</ p > |
14 |
</ div > |
15 |
</ section > |
16 |
17 |
< section class = "slide" > |
18 |
< img src = "img/3.jpg" alt = "" > |
19 |
< div class = "slide-content" > |
20 |
< p class = "slide-title" >Slide 3</ p > |
21 |
</ div > |
22 |
</ section > |
23 |
24 |
< nav class = "slider-nav" > |
25 |
< span class = "prev-slide" ></ span > |
26 |
< span class = "next-slide" ></ span > |
27 |
</ nav > |
28 |
|
29 |
</ article > |
2. Load both jQuery JavaScript library and the slider.js
script in the document.
1 |
< script src = "/path/to/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/slider.js" ></ script > |
3. The basic styling of the carousel/slider.
01 |
.slider { |
02 |
position: relative; |
03 |
width: 100%; |
04 |
height: 100%; |
05 |
overflow: hidden; |
06 |
background-color: #555; |
07 |
} |
08 |
09 |
.slide { |
10 |
position: absolute; |
11 |
top: 0; |
12 |
left: 0; |
13 |
display: none; |
14 |
width: 100%; |
15 |
height: 100%; |
16 |
overflow: hidden; |
17 |
} |
18 |
19 |
.slide img { |
20 |
position: absolute; |
21 |
top: 0; |
22 |
left: 0; |
23 |
display: block; |
24 |
width: 100%; |
25 |
height: 100%; |
26 |
cursor: default; |
27 |
} |
28 |
29 |
.slide-content { |
30 |
position: absolute; |
31 |
bottom: 20%; |
32 |
width: 100%; |
33 |
text-align: center; |
34 |
color: #fff; |
35 |
-webkit-text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.5); |
36 |
-moz-text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.5); |
37 |
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.5); |
38 |
} |
39 |
40 |
.slide-title { |
41 |
font-size: 10vw; |
42 |
} |
43 |
44 |
@media screen and (max-width: 61.25em) { |
45 |
.slider { |
46 |
max-height: 57.95918367vw; |
47 |
} |
48 |
} |
49 |
50 |
@media screen and (min-height: 61.25em) { |
51 |
.slider { |
52 |
max-height: 57.95918367vw; |
53 |
} |
54 |
} |
4. The CSS for the navigation controls.
01 |
.next-slide, |
02 |
.prev-slide { |
03 |
position : absolute ; |
04 |
display : inline- block ; |
05 |
width : 3.125em ; |
06 |
height : 3.125em ; |
07 |
line-height : 3.125 ; |
08 |
margin : 0 ; |
09 |
border : . 125em solid white ; |
10 |
backface- visibility : hidden ; |
11 |
background-color : rgba( 0 , 0 , 0 , 0.3 ); |
12 |
color : white ; |
13 |
overflow : hidden ; |
14 |
cursor : pointer ; |
15 |
z-index : 20 ; |
16 |
-webkit-transition: all . 3 s ease-in-out 0 s; |
17 |
-moz-transition: all . 3 s ease-in-out 0 s; |
18 |
-o-transition: all . 3 s ease-in-out 0 s; |
19
|