Skip to content

Commit 7a5fc30

Browse files
vaibhavpacharyavaibhavpacharya
committed
First commit
1 parent e953219 commit 7a5fc30

File tree

10 files changed

+266
-0
lines changed

10 files changed

+266
-0
lines changed

‎jQuery Content Slider/css/style.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body{
7+
font-size: 15px;
8+
color: black;
9+
line-height: 1.6em;
10+
}
11+
12+
a{
13+
color: black;
14+
text-decoration: none;
15+
}
16+
17+
18+
body header h1{
19+
text-align: center;
20+
margin-bottom: 20px;
21+
font-family: 'Sigmar One', cursive;
22+
font-weight: bold;
23+
}
24+
25+
#container{
26+
width: 980px;
27+
margin: 40px auto;
28+
overflow: hidden;
29+
}
30+
31+
#slider{
32+
width: 940px;
33+
height: 550px;
34+
position: relative;
35+
float: left;
36+
overflow: hidden;
37+
border: green solid 2px;
38+
border-radius: 30px;
39+
}
40+
41+
#slider img{
42+
/*max-width:100%;
43+
max-height:100%;*/
44+
width: 940px;
45+
height: 550px;
46+
}
47+
48+
h2{
49+
font-family: 'Lobster', cursive;
50+
color: white;
51+
}
52+
53+
p{
54+
color: white;
55+
}
56+
57+
58+
59+
.slide{
60+
position: absolute;
61+
}
62+
63+
64+
.slide-copy{
65+
position: absolute;
66+
bottom: 0;
67+
left: 0;
68+
right: 0;
69+
padding: 20px;
70+
background: rgba(0, 0, 0, 0.5);
71+
}
72+
73+
74+
#next, #prev{
75+
float: left;
76+
margin-top: 240px;
77+
z-index: 100;
78+
cursor: pointer;
79+
position: relative;
80+
}
81+
82+
#prev{
83+
margin-right: -45px;
84+
}
85+
86+
#next{
87+
margin-left: -45px;
88+
}
89+
90+
.fa{
91+
color: red;
92+
}

‎jQuery Content Slider/img/bg1.jpg‎

710 KB
Loading

‎jQuery Content Slider/img/bg2.jpg‎

81.3 KB
Loading

‎jQuery Content Slider/img/bg3.jpg‎

911 KB
Loading

‎jQuery Content Slider/img/bg4.jpg‎

648 KB
Loading

‎jQuery Content Slider/img/bg5.jpg‎

727 KB
Loading

‎jQuery Content Slider/img/bg6.jpg‎

207 KB
Loading

‎jQuery Content Slider/img/bg7.jpg‎

218 KB
Loading

‎jQuery Content Slider/index.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<link href="https://fonts.googleapis.com/css?family=Sigmar+One" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
12+
<link rel="stylesheet" href="css\style.css">
13+
14+
<title>Content Slider using jQuery</title>
15+
</head>
16+
<body>
17+
<div id="container">
18+
<header>
19+
<h1>JUSTICE LEAGUE</h1>
20+
</header>
21+
22+
<i class="fa fa-arrow-left fa-5x" alt="Previous" id="prev"></i>
23+
24+
<div id="slider">
25+
<!-- Slide 1 -->
26+
<div class="slide active">
27+
<div class="slide-copy">
28+
<h2>Superman</h2>
29+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
30+
Suscipit quam officiis nesciunt illum voluptate animi ad id sequi ipsam rerum?</p>
31+
</div>
32+
<img src="img\bg1.jpg" alt="Superman">
33+
</div>
34+
35+
<!-- Slide 2 -->
36+
<div class="slide">
37+
<div class="slide-copy">
38+
<h2>Batman</h2>
39+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
40+
Suscipit quam officiis nesciunt illum voluptate animi ad id sequi ipsam rerum?</p>
41+
</div>
42+
<img src="img\bg2.jpg" alt="Batman">
43+
</div>
44+
45+
46+
<!-- Slide 3 -->
47+
<div class="slide">
48+
<div class="slide-copy">
49+
<h2>Wonder Woman</h2>
50+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
51+
Suscipit quam officiis nesciunt illum voluptate animi ad id sequi ipsam rerum?</p>
52+
</div>
53+
<img src="img\bg4.jpg" alt="Wonder Woman">
54+
</div>
55+
56+
57+
<!-- Slide 4 -->
58+
<div class="slide">
59+
<div class="slide-copy">
60+
<h2>Green Lantern</h2>
61+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
62+
Suscipit quam officiis nesciunt illum voluptate animi ad id sequi ipsam rerum?</p>
63+
</div>
64+
<img src="img\bg3.jpg" alt="GL">
65+
</div>
66+
67+
68+
<!-- Slide 5 -->
69+
<div class="slide">
70+
<div class="slide-copy">
71+
<h2>Flash</h2>
72+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
73+
Suscipit quam officiis nesciunt illum voluptate animi ad id sequi ipsam rerum?</p>
74+
</div>
75+
<img src="img\bg5.jpg" alt="FLash">
76+
</div>
77+
78+
79+
<!-- Slide 6 -->
80+
<div class="slide">
81+
<div class="slide-copy">
82+
<h2>Aquaman</h2>
83+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
84+
Suscipit quam officiis nesciunt illum voluptate animi ad id sequi ipsam rerum?</p>
85+
</div>
86+
<img src="img\bg6.jpg" alt="AQ">
87+
</div>
88+
89+
90+
<!-- Slide 7 -->
91+
<div class="slide">
92+
<div class="slide-copy">
93+
<h2>Martian Manhunter</h2>
94+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
95+
Suscipit quam officiis nesciunt illum voluptate animi ad id sequi ipsam rerum?</p>
96+
</div>
97+
<img src="img\bg7.jpg" alt="MM">
98+
</div>
99+
<!-- <i class="fa fa-arrow-right fa-5x" alt="Next" id="next"></i> -->
100+
</div>
101+
<i class="fa fa-arrow-right fa-5x" alt="Next" id="next"></i>
102+
103+
</div>
104+
<script type="text/javascript" src="js\script.js">
105+
106+
</script>
107+
</body>
108+
</html>

‎jQuery Content Slider/js/script.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// console.log("CONNECTED");
2+
$(document).ready(function(){
3+
// Set options
4+
var speed = 500; //fade speed
5+
var autoswitch = true; //Autoslider options
6+
var autoswitch_speed = 4000; //Autoslider speed
7+
8+
// Add initial active class
9+
$('.slide').first().addClass('active');
10+
11+
// Hide all slides
12+
$('.slide').hide();
13+
14+
//Show first slide
15+
$('.active').show();
16+
17+
// Next handler
18+
$('#next').on('click',nextSlide);
19+
20+
// Previous Handler
21+
$('#prev').on('click',prevSlide);
22+
23+
// Auto SLider
24+
if(autoswitch==true){
25+
setInterval(nextSlide,autoswitch_speed);
26+
}
27+
28+
// Switch to Next Slide
29+
30+
function nextSlide(){
31+
console.log("NEXT CLICKED!");
32+
$('.active').removeClass('active').addClass('oldActive');
33+
if ($('.oldActive').is(':last-child')){
34+
$('.slide').first().addClass('active');
35+
}
36+
else {
37+
$('.oldActive').next().addClass('active')
38+
}
39+
$('.oldActive').removeClass('oldActive');
40+
$('.slide').fadeOut(speed);
41+
$('.active').fadeIn(speed);
42+
}
43+
44+
function prevSlide(){
45+
console.log("PREV CLICKED!");
46+
$('.active').removeClass('active').addClass('oldActive');
47+
if ($('.oldActive').is(':first-child')){
48+
$('.slide').last().addClass('active');
49+
}
50+
else {
51+
$('.oldActive').prev().addClass('active');
52+
}
53+
$('.oldActive').removeClass('oldActive');
54+
$('.slide').fadeOut(speed);
55+
$('.active').fadeIn(speed);
56+
}
57+
58+
59+
60+
61+
62+
63+
64+
65+
66+
});

0 commit comments

Comments
 (0)