Skip to content

Commit d9d3913

Browse files
HemendraKhatikHemendraKhatik
authored
Merge pull request #152 from tomek-em/master
responsive sliders added by tomek-em
2 parents 809a1a2 + c03b88b commit d9d3913

11 files changed

+406
-0
lines changed

‎Responsive Slider/Responsive Bootstrap Slider/Readme.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Responsive Bootstrap Sliders:
2+
- Home Page Slider ( index.html )
3+
- Full Page slider with text ( full-page.html )
4+
- Background Image slider ( bg-img-slider.html )
5+
6+
## Created by:
7+
tomek-em
8+
Email: [email protected]
9+
My Website: https://tomaszmejer.com/
10+
11+

‎Responsive Slider/Responsive Bootstrap Slider/bg-img-slider.html

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
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, shrink-to-fit=no">
6+
<meta name="description" content="">
7+
<meta name="author" content="">
8+
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
9+
10+
<title>Background Image Slider</title>
11+
12+
<!-- Bootstrap css -->
13+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
14+
15+
<!-- Custom styles for this template -->
16+
<link href="css/style.css" rel="stylesheet">
17+
</head>
18+
19+
<body>
20+
21+
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
22+
<div class="container">
23+
<a class="navbar-brand" href="#">Background Image Slider</a>
24+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
25+
<span class="navbar-toggler-icon"></span>
26+
</button>
27+
28+
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
29+
<ul class="navbar-nav ml-auto">
30+
<li class="nav-item">
31+
<a class="nav-link" href="#">Home</a>
32+
</li>
33+
<li class="nav-item">
34+
<a class="nav-link" href="index.html">Home Page Slider</a>
35+
</li>
36+
<li class="nav-item">
37+
<a class="nav-link" href="full-page.html">Full Page Slider</a>
38+
</li>
39+
</ul>
40+
</div>
41+
</div>
42+
</nav>
43+
44+
<!-- Slider -->
45+
<div id="carousel" class="carousel slide bg-dark mb-4 h-100" data-ride="carousel">
46+
<div class="carousel-inner h-100" >
47+
48+
<div class="carousel-item h-100 active">
49+
<div class="fill position-relative" style="background-image:url('img/zach-lezniewicz-o8cMgOUB-Z0-unsplash-ed.jpg');">
50+
<div class="position-absolute fixed-bottom mb-4 mx-4 px-4 text-white">
51+
<h2 class="">Slide 1</h2>
52+
<p class="">Photo by Zach Lezniewicz on Unsplash</p>
53+
</div>
54+
</div>
55+
</div>
56+
<div class="carousel-item h-100">
57+
<div class="fill position-relative" style="background-image:url('img/andrey-larin-RWbZ7YWAXoQ-unsplash-ed.jpg');">
58+
<div class="position-absolute fixed-bottom mb-4 mx-4 px-4 text-white">
59+
<h2 class="">Slide 2</h2>
60+
<p class="">Photo by Andrey Larin on Unsplash</p>
61+
</div>
62+
</div>
63+
</div>
64+
<div class="carousel-item h-100">
65+
<div class="fill" style="background-image:url('img/curren-podlesny-V7MplrFOU4E-unsplash.jpg');">
66+
<div class="position-absolute fixed-bottom mb-4 mx-4 px-4 text-white">
67+
<h2 class="">Slide3</h2>
68+
<p class="">Photo by Curren Podlesny on Unsplash</p>
69+
</div>
70+
</div>
71+
</div>
72+
</div> <!-- end of container -->
73+
74+
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
75+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
76+
<span class="sr-only">Previous</span>
77+
</a>
78+
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
79+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
80+
<span class="sr-only">Next</span>
81+
</a>
82+
</div>
83+
84+
<!-- Page text -->
85+
<div class="container">
86+
<div class="starter-template mt-4">
87+
<h1>Background Image Slider</h1>
88+
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
89+
</div>
90+
</div> <!-- /.container -->
91+
92+
<!-- Bootstrap core JavaScript
93+
================================================== -->
94+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
95+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
96+
97+
</body>
98+
</html>

‎Responsive Slider/Responsive Bootstrap Slider/css/style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
html, body {
2+
height: 100%;
3+
}
4+
5+
.fill {
6+
width: 100%;
7+
height: 100%;
8+
background-position: center;
9+
-webkit-background-size: cover;
10+
-moz-background-size: cover;
11+
background-size: cover;
12+
-o-background-size: cover;
13+
}
14+
15+
16+
17+
/* Full page slider -------- */
18+
19+
.slider-img {
20+
max-height: 100%;
21+
}
22+
23+
.slider-frame {
24+
padding: 5px;
25+
color: white;
26+
}
27+
28+
.description {
29+
height:80px;
30+
line-height: 80px;
31+
padding-left: 10px;
32+
}
33+
34+
.grey-bg {
35+
background: #222;
36+
}
37+
38+
#carousel1 {
39+
display: none;
40+
}

‎Responsive Slider/Responsive Bootstrap Slider/full-page.html

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
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, shrink-to-fit=no">
6+
<meta name="description" content="">
7+
<meta name="author" content="">
8+
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
9+
10+
<title>Full Page Slider</title>
11+
12+
<!-- Bootstrap css -->
13+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
14+
15+
<!-- Custom styles for this template -->
16+
<link href="css/style.css" rel="stylesheet">
17+
</head>
18+
19+
<body>
20+
<!-- trzy zdjeica on clik JS displays div ze sliderem -->
21+
22+
23+
<nav class="navbar navbar-expand-md navbar-light bg-light">
24+
<div class="container">
25+
<a class="navbar-brand" href="#">Full Page Slider</a>
26+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
27+
<span class="navbar-toggler-icon"></span>
28+
</button>
29+
30+
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
31+
<ul class="navbar-nav ml-auto">
32+
<li class="nav-item">
33+
<a class="nav-link" href="#">Home</a>
34+
</li>
35+
<li class="nav-item">
36+
<a class="nav-link" href="index.html">Home Page Slider</a>
37+
</li>
38+
<li class="nav-item">
39+
<a class="nav-link" href="bg-img-slider.html">Background Image Slider</a>
40+
</li>
41+
</ul>
42+
</div>
43+
</div>
44+
</nav>
45+
46+
47+
<!-- Pictures -->
48+
<div class="container mt-2">
49+
<div class="row">
50+
<div class="col-md-4 mb-4 overflow-hidden picture" id="pic-1">
51+
<img src="img/heron-4746555_1920.jpg" class="w-100 img" >
52+
</div>
53+
<div class="col-md-4 mb-4 overflow-hidden overflow-hidden picture" id="pic-2">
54+
<img src="img/myanmar-4708901_1920.jpg" class="w-100 img" >
55+
</div>
56+
<div class="col-md-4 mb-4 overflow-hidden overflow-hidden picture" id="pic-3">
57+
<img src="img/wolf-4707294_1920.jpg" class="w-100 img">
58+
</div>
59+
</div>
60+
</div>
61+
62+
<!-- Slider -->
63+
<div id="carousel1" class="carousel slide h-100 fixed-top grey-bg" data-ride="carousel">
64+
<div class="container h-100">
65+
66+
<div class="carousel-item h-100 grey-bg" id="carousel-item-1">
67+
<div class="d-flex flex-column justify-content-center h-100 ">
68+
<div class=" d-flex justify-content-center">
69+
<img src="img/heron-4746555_1920.jpg" class="h-100" >
70+
</div>
71+
<div class="bg-light description">
72+
<p>Image by <a href="https://pixabay.com/users/soap0119-14518348/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=4746555">Seonghun Jeong</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=4746555">Pixabay</a></p>
73+
</div>
74+
</div>
75+
</div>
76+
77+
<div class="carousel-item h-100 grey-bg" id="carousel-item-2">
78+
<div class="d-flex flex-column justify-content-center h-100">
79+
<div class="d-flex justify-content-center">
80+
<img src="img/myanmar-4708901_1920.jpg" class="h-100" >
81+
</div>
82+
<div class="bg-light description">
83+
<p>Image by <a href="https://pixabay.com/users/IngoMoringo-14497112/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=4707294">IngoMoringo</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=4707294">Pixabay</a></p>
84+
</div>
85+
</div>
86+
</div>
87+
88+
<div class="carousel-item h-100 grey-bg" id="carousel-item-3">
89+
<div class="d-flex flex-column justify-content-center h-100">
90+
<div class="d-flex justify-content-center ">
91+
<img src="img/wolf-4707294_1920.jpg" class="h-100" >
92+
</div>
93+
<div class="bg-light description">
94+
<p>Image by <a href="https://pixabay.com/users/sippakorn-1917747/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=4708901">sippakorn yamkasikorn</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=4708901">Pixabay</a></p>
95+
</div>
96+
</div>
97+
</div>
98+
99+
<!-- slider controls -->
100+
<a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev">
101+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
102+
<span class="sr-only">Previous</span>
103+
</a>
104+
<a class="carousel-control-next" href="#carousel1" role="button" data-slide="next">
105+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
106+
<span class="sr-only">Next</span>
107+
</a>
108+
</div> <!-- end of container -->
109+
110+
111+
</div>
112+
113+
<!-- Page text -->
114+
<div class="container">
115+
<div class="starter-template mt-4">
116+
<!-- CREDITS -->
117+
118+
119+
<h1>Full Page Slider</h1>
120+
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
121+
122+
</div>
123+
</div> <!-- /.container -->
124+
125+
<!-- Bootstrap core JavaScript
126+
================================================== -->
127+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
128+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
129+
130+
<script>
131+
// const img1 = document.querySelector('#pic-1');
132+
// const img2 = document.querySelector('#pic-2');
133+
// const img3 = document.querySelector('#pic-3');
134+
var pic = document.querySelectorAll('.picture');
135+
var slide = document.querySelectorAll('.carousel-item');
136+
137+
function showSlider() {
138+
[].forEach.call(slide, function(el) {
139+
el.classList.remove("active");
140+
});
141+
142+
document.getElementById('carousel1').style.display = 'block';
143+
144+
for (var i = 0; i < slide.length; i++) {
145+
slide[i].onclick = () => {
146+
document.getElementById('carousel1').style.display = 'none';
147+
}
148+
}
149+
}
150+
151+
pic[0].onclick = () => {
152+
showSlider();
153+
document.getElementById('carousel-item-1').classList.add('active');
154+
}
155+
pic[1].onclick = () => {
156+
showSlider();
157+
document.getElementById('carousel-item-2').classList.add('active');
158+
}
159+
pic[2].onclick = () => {
160+
showSlider();
161+
document.getElementById('carousel-item-3').classList.add('active');
162+
}
163+
</script>
164+
165+
</body>
166+
</html>

‎Responsive Slider/Responsive Bootstrap Slider/img/andrey-larin-RWbZ7YWAXoQ-unsplash-ed.jpg

2.98 MB
Loading

‎Responsive Slider/Responsive Bootstrap Slider/img/curren-podlesny-V7MplrFOU4E-unsplash.jpg

7.31 MB
Loading

‎Responsive Slider/Responsive Bootstrap Slider/img/heron-4746555_1920.jpg

121 KB
Loading

‎Responsive Slider/Responsive Bootstrap Slider/img/myanmar-4708901_1920.jpg

539 KB
Loading

‎Responsive Slider/Responsive Bootstrap Slider/img/wolf-4707294_1920.jpg

980 KB
Loading

‎Responsive Slider/Responsive Bootstrap Slider/img/zach-lezniewicz-o8cMgOUB-Z0-unsplash-ed.jpg

672 KB
Loading

0 commit comments

Comments
 (0)