Skip to content

responsive sliders added by tomek-em #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 16, 2020
Merged

responsive sliders added by tomek-em #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79a0c09
responsive sliders added by tomek-em
tomek-em Jan 21, 2020
d506c49
Update Readme.md
tomek-em Jan 21, 2020
c03b88b
responsive sliders by tomek-em
tomek-em Jan 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions Responsive Slider/Responsive Bootstrap Slider/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# Responsive Bootstrap Sliders:
- Home Page Slider ( index.html )
- Full Page slider with text ( full-page.html )
- Background Image slider ( bg-img-slider.html )

## Created by:
tomek-em
Email: [email protected]
My Website: https://tomaszmejer.com/


98 changes: 98 additions & 0 deletions Responsive Slider/Responsive Bootstrap Slider/bg-img-slider.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">

<title>Background Image Slider</title>

<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>

<body>

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Background Image Slider</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home Page Slider</a>
</li>
<li class="nav-item">
<a class="nav-link" href="full-page.html">Full Page Slider</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Slider -->
<div id="carousel" class="carousel slide bg-dark mb-4 h-100" data-ride="carousel">
<div class="carousel-inner h-100" >

<div class="carousel-item h-100 active">
<div class="fill position-relative" style="background-image:url('img/zach-lezniewicz-o8cMgOUB-Z0-unsplash-ed.jpg');">
<div class="position-absolute fixed-bottom mb-4 mx-4 px-4 text-white">
<h2 class="">Slide 1</h2>
<p class="">Photo by Zach Lezniewicz on Unsplash</p>
</div>
</div>
</div>
<div class="carousel-item h-100">
<div class="fill position-relative" style="background-image:url('img/andrey-larin-RWbZ7YWAXoQ-unsplash-ed.jpg');">
<div class="position-absolute fixed-bottom mb-4 mx-4 px-4 text-white">
<h2 class="">Slide 2</h2>
<p class="">Photo by Andrey Larin on Unsplash</p>
</div>
</div>
</div>
<div class="carousel-item h-100">
<div class="fill" style="background-image:url('img/curren-podlesny-V7MplrFOU4E-unsplash.jpg');">
<div class="position-absolute fixed-bottom mb-4 mx-4 px-4 text-white">
<h2 class="">Slide3</h2>
<p class="">Photo by Curren Podlesny on Unsplash</p>
</div>
</div>
</div>
</div> <!-- end of container -->

<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

<!-- Page text -->
<div class="container">
<div class="starter-template mt-4">
<h1>Background Image Slider</h1>
<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>
</div>
</div> <!-- /.container -->

<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>
</html>
40 changes: 40 additions & 0 deletions Responsive Slider/Responsive Bootstrap Slider/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
html, body {
height: 100%;
}

.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}



/* Full page slider -------- */

.slider-img {
max-height: 100%;
}

.slider-frame {
padding: 5px;
color: white;
}

.description {
height:80px;
line-height: 80px;
padding-left: 10px;
}

.grey-bg {
background: #222;
}

#carousel1 {
display: none;
}
166 changes: 166 additions & 0 deletions Responsive Slider/Responsive Bootstrap Slider/full-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">

<title>Full Page Slider</title>

<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>

<body>
<!-- trzy zdjeica on clik JS displays div ze sliderem -->


<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Full Page Slider</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home Page Slider</a>
</li>
<li class="nav-item">
<a class="nav-link" href="bg-img-slider.html">Background Image Slider</a>
</li>
</ul>
</div>
</div>
</nav>


<!-- Pictures -->
<div class="container mt-2">
<div class="row">
<div class="col-md-4 mb-4 overflow-hidden picture" id="pic-1">
<img src="img/heron-4746555_1920.jpg" class="w-100 img" >
</div>
<div class="col-md-4 mb-4 overflow-hidden overflow-hidden picture" id="pic-2">
<img src="img/myanmar-4708901_1920.jpg" class="w-100 img" >
</div>
<div class="col-md-4 mb-4 overflow-hidden overflow-hidden picture" id="pic-3">
<img src="img/wolf-4707294_1920.jpg" class="w-100 img">
</div>
</div>
</div>

<!-- Slider -->
<div id="carousel1" class="carousel slide h-100 fixed-top grey-bg" data-ride="carousel">
<div class="container h-100">

<div class="carousel-item h-100 grey-bg" id="carousel-item-1">
<div class="d-flex flex-column justify-content-center h-100 ">
<div class=" d-flex justify-content-center">
<img src="img/heron-4746555_1920.jpg" class="h-100" >
</div>
<div class="bg-light description">
<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>
</div>
</div>
</div>

<div class="carousel-item h-100 grey-bg" id="carousel-item-2">
<div class="d-flex flex-column justify-content-center h-100">
<div class="d-flex justify-content-center">
<img src="img/myanmar-4708901_1920.jpg" class="h-100" >
</div>
<div class="bg-light description">
<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>
</div>
</div>
</div>

<div class="carousel-item h-100 grey-bg" id="carousel-item-3">
<div class="d-flex flex-column justify-content-center h-100">
<div class="d-flex justify-content-center ">
<img src="img/wolf-4707294_1920.jpg" class="h-100" >
</div>
<div class="bg-light description">
<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>
</div>
</div>
</div>

<!-- slider controls -->
<a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- end of container -->


</div>

<!-- Page text -->
<div class="container">
<div class="starter-template mt-4">
<!-- CREDITS -->


<h1>Full Page Slider</h1>
<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>

</div>
</div> <!-- /.container -->

<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<script>
// const img1 = document.querySelector('#pic-1');
// const img2 = document.querySelector('#pic-2');
// const img3 = document.querySelector('#pic-3');
var pic = document.querySelectorAll('.picture');
var slide = document.querySelectorAll('.carousel-item');

function showSlider() {
[].forEach.call(slide, function(el) {
el.classList.remove("active");
});

document.getElementById('carousel1').style.display = 'block';

for (var i = 0; i < slide.length; i++) {
slide[i].onclick = () => {
document.getElementById('carousel1').style.display = 'none';
}
}
}

pic[0].onclick = () => {
showSlider();
document.getElementById('carousel-item-1').classList.add('active');
}
pic[1].onclick = () => {
showSlider();
document.getElementById('carousel-item-2').classList.add('active');
}
pic[2].onclick = () => {
showSlider();
document.getElementById('carousel-item-3').classList.add('active');
}
</script>

</body>
</html>
Binary file added ...Slider/Responsive Bootstrap Slider/img/andrey-larin-RWbZ7YWAXoQ-unsplash-ed.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...Slider/Responsive Bootstrap Slider/img/curren-podlesny-V7MplrFOU4E-unsplash.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Responsive Slider/Responsive Bootstrap Slider/img/heron-4746555_1920.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Responsive Slider/Responsive Bootstrap Slider/img/myanmar-4708901_1920.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Responsive Slider/Responsive Bootstrap Slider/img/wolf-4707294_1920.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...der/Responsive Bootstrap Slider/img/zach-lezniewicz-o8cMgOUB-Z0-unsplash-ed.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading