How can I rewrite modal window jQuery into native Javascript?

How can I rewrite modal window jQuery into native Javascript? - javascript

How can I rewrite this jQuery code for modal windows into native Javascript?
It's important to save and using data attributes.
I can't write code using forEach and getAttribute together. I always write a code using jQuery and now I must write using native JavaScript.
$('[data-modal]').click(function () {
var target = $(this).attr('data-modal');
if (target == 'close') $('.modal-container').removeClass('active');
else $('.modal-container' + target).addClass('active');
});
body {
padding: 50px;
}
.btn-group .btn {
display: inline-block;
padding: 10px 20px;
background-color: #2980b9;
color: #fff;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.modal-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-container.active {
opacity: 1;
visibility: visible;
}
.modal-container .overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
}
.modal-container .modal {
position: relative;
z-index: 2;
background-color: #fff;
padding: 30px;
border-radius: 3px;
max-width: 600px;
margin: 50px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Modal example</title>
</head>
<body>
<div class="page-content">
<div class="btn-group">
<a class="btn" data-modal="#m1">Open modal 1</a>
<a class="btn" data-modal="#m2">Open modal 2</a>
<a class="btn" data-modal="#m3">Open modal 3</a>
</div>
</div>
<div id="m1" class="modal-container">
<div class="overlay" data-modal="close"></div>
<div class="modal">
<h2>Modal window title</h2>
<p>1 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p>
<button data-modal="close">Close window</button>
</div>
</div>
<div id="m2" class="modal-container">
<div class="overlay" data-modal="close"></div>
<div class="modal">
<h2>Modal window title</h2>
<p>2 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p>
<button data-modal="close">Close window</button>
</div>
</div>
<div id="m3" class="modal-container">
<div class="overlay" data-modal="close"></div>
<div class="modal">
<h2>Modal window title</h2>
<p>3 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p>
<button data-modal="close">Close window</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I will be very grateful for your help!

Have a go with this
document.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("btn")) {
document.querySelector(tgt.dataset.modal).classList.add('active')
} else if (tgt.classList.contains("overlay") || tgt.classList.contains("close")) {
tgt.closest('.modal-container').classList.remove('active')
}
});
document.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("btn")) {
document.querySelector(tgt.dataset.modal).classList.add('active')
} else if (tgt.classList.contains("overlay") || tgt.classList.contains("close")) {
tgt.closest('.modal-container').classList.remove('active')
}
});
body {
padding: 50px;
}
.btn-group .btn {
display: inline-block;
padding: 10px 20px;
background-color: #2980b9;
color: #fff;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.modal-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-container.active {
opacity: 1;
visibility: visible;
}
.modal-container .overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
}
.modal-container .modal {
position: relative;
z-index: 2;
background-color: #fff;
padding: 30px;
border-radius: 3px;
max-width: 600px;
margin: 50px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-content">
<div class="btn-group">
<a class="btn" data-modal="#m1">Open modal 1</a>
<a class="btn" data-modal="#m2">Open modal 2</a>
<a class="btn" data-modal="#m3">Open modal 3</a>
</div>
</div>
<div id="m1" class="modal-container">
<div class="overlay" data-modal="close"></div>
<div class="modal">
<p>1 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p><button class="close" data-modal="close">Close window</button>
</div>
</div>
<div id="m2" class="modal-container">
<div class="overlay" data-modal="close"></div>
<div class="modal">
<p>2 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p><button class="close" data-modal="close">Close window</button>
</div>
</div>
<div id="m3" class="modal-container">
<div class="overlay" data-modal="close"></div>
<div class="modal">
<p>3 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p><button class="close" data-modal="close">Close window</button>
</div>
</div>

Related

header menu to sidebar toggle not working

I'm tryng to make a responsive header menu . The main idea is that an sidebar will substitute the navigation bar links with the width of the screen and an icon with an onclick function to toggle that sidebar will appear at the header. I made de HTML and CSS, but can't make the JS function to add a class to the navigation menu (to show it) work. BTW i'm a begginer developer, started a month ago and still struggling a lot (the code also has a lot of placeholders and temporary CSS properties
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<header id="header">
<div id="container">
<nav id="nav-bar">
Placeholder.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">01. Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">02. Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">03. Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#contact-me">04. Contato</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">&#9776</h3>
</div>
</nav>
</div>
</header>
<main>
<section id="introduction">
<div>
<h2>
Hi, my name is
</h2>
</div>
<div>
<h2>
Placeholder
</h2>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="about-me">
<h2>01. About me</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="experience">
<h2>02. Experience</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="projects">
<h2>03. Projects</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="contact-me">
<h2>04. Contact me</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
</main>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
position: relative;
background-color: rgba(10,25,48,255);
height: 1000px;
}
header {
position: fixed;
top: 0;
width: 100%;
background-color: blueviolet;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#media only screen and (max-width: 900px) {
#nav-menu {
position: fixed;
top: 0;
right: -100%;
display: block;
background-color: brown;
margin: 0;
height: 100%;
box-shadow: -1px -1px 8px #3e3e3e99;
width: 250px;
transition: all 0.8s ease;
}
.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
}
#resume-btn {
font-size: 15px;
color: white;
background-color: rgba(10,25,48,255);
border-color: white;
border-style: solid;
border-radius: 6px;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
#resume-btn:hover {
color: gray;
border-color: gray;
}
li {
list-style: none;
}
h2 {
color: white;
}
p {
color: aqua;
}
Javascript:
function handleMenuToggle() {
const navContainer = document.getElementById('nav-menu')
navContainer.classList.toggle('show-nav')
}
Can't make Js onclick function work to toggle sidebar.

You're so close to getting this to work. You just need to change one line in your CSS to make it work (see the working demo below):
/* add #nav-menu to this declaration */
#nav-menu.show-nav {
right: 0;
}
The issue is CSS specificity. Because you've used an ID to declare the right property at -100%, even when you add the show-nav class to the element, the class alone in the declaration doesn't have enough specificity to override the right property value.
Learn more about css specificity here.
function handleMenuToggle() {
const navContainer = document.getElementById('nav-menu')
navContainer.classList.toggle('show-nav')
}
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
position: relative;
background-color: rgba(10,25,48,255);
height: 1000px;
}
header {
position: fixed;
top: 0;
width: 100%;
background-color: blueviolet;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#media only screen and (max-width: 900px) {
#nav-menu {
position: fixed;
top: 0;
right: -100%;
display: block;
background-color: brown;
margin: 0;
height: 100%;
box-shadow: -1px -1px 8px #3e3e3e99;
width: 250px;
transition: all 0.8s ease;
}
#nav-menu.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
}
#resume-btn {
font-size: 15px;
color: white;
background-color: rgba(10,25,48,255);
border-color: white;
border-style: solid;
border-radius: 6px;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
#resume-btn:hover {
color: gray;
border-color: gray;
}
li {
list-style: none;
}
h2 {
color: white;
}
p {
color: aqua;
}
<header id="header">
<div id="container">
<nav id="nav-bar">
Placeholder.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">01. Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">02. Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">03. Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#contact-me">04. Contato</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">&#9776</h3>
</div>
</nav>
</div>
</header>
<main>
<section id="introduction">
<div>
<h2>
Hi, my name is
</h2>
</div>
<div>
<h2>
Placeholder
</h2>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="about-me">
<h2>01. About me</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="experience">
<h2>02. Experience</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="projects">
<h2>03. Projects</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
<section id="contact-me">
<h2>04. Contact me</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
</p>
</section>
</main>

Effect on horizontal scroll

I created this horizontal scroll using only CSS (working only on Chrome because of the scroll style).
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
::-webkit-scrollbar {
height: 0;
width: 0;
}
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
h2 {
margin: 0;
}
p {
font-size: 1.25em;
letter-spacing: 0.56px;
line-height: 32px;
}
.container {
background-color: #000;
bottom: 0;
height: 100vh;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100vw;
}
.horScroll {
background-color: #abc;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-ms-scroll-snap-points-y: repeat(100vw);
scroll-snap-points-y: repeat(100vw);
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
-webkit-transform: translateX(-100%) rotate(-90deg);
-ms-transform: translateX(-100%) rotate(-90deg);
transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
width: 100vh;
}
.item {
background-color: #e4e4e4;
height: 100vw;
position: -webkit-sticky;
position: sticky;
scroll-snap-align: start;
top: 0;
width: 100vh;
}
.horScroll > div:nth-of-type(2n) {
background-color: #333;
color: #fff;
}
.item-inner {
height: 100vh;
max-height: 100vh;
overflow: scroll;
padding: 40px;
-webkit-transform: rotate(90deg) translateX(-100vh);
-ms-transform: rotate(90deg) translateX(-100vh);
transform: rotate(90deg) translateX(-100vh);
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
width: 100vw;
}
.item-content {
height: 100%;
}
<div class="container">
<div class="horScroll">
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 1</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 2</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 3</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 4</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 5</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 6</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
</div>
</div>
It works as expected. Now I'm trying to create an extra effect in JavaScript.
I want that when the next item is coming, there will be a change in opacity, scale or similar effect on the previous item showing that it is "fading out". It is a transition effect between two items. In this case I'm trying opacity.
In the reverse direction the opposite will happen: a "fade in" on the item that had disappeared.
Inside the forEach() loop I could identify what item is being scrolled at the moment (as you can check in the console.log), but now I'm not getting the opacity calculation right. I have a few factors to consider like the current item and current scroll position.
var widthBase = window.innerWidth;
window.addEventListener("resize", function() {
widthBase = window.innerWidth;
})
var items = document.querySelectorAll(".item");
document.querySelector(".horScroll").addEventListener("scroll", function(e) {
items.forEach(function(item, i) {
var currentScroll = e.target.scrollTop;
if (currentScroll >= widthBase * (i) && currentScroll < widthBase * (i + 1)) {
console.log("item index: " + i + ", scroll position: " + currentScroll);
// item.querySelector(".item-content").style.opacity = ? // opacity calculation value
}
})
})
I've tried item.querySelector(".item-content").style.opacity = (widthBase * (i + 1))/currentScroll - 1, but it works partially. Some other variations also failed. I'm missing something.
In addition, I think that a loop through all the items in each scroll is not performative, but I couldn't think of anything different.

I fixed the calculation. First, I had to consider this:
Top position of item is equal to 1.
Bottom position of item is equal to 0.001.
So, current scroll will be X, the value I need for each scroll.
1 and 0.001 are the opacity, transform: scale() or another property with value between 0 and 1.
It must be 0.001 instead of 0, otherwise the calculation will fail. "Top position" also must not be 0, so I will always add 1 to it.
.
Now, using scale instead of opacity, the result would be:
"scale(" + (1 - (currentScroll-((widthBase * i) + 1))*(1-0.55)/(((widthBase * (i + 1)) + 1)-((widthBase * i) + 1))) + ")";
Working snippet:
var widthBase = window.innerWidth;
window.addEventListener("resize", function() {
widthBase = window.innerWidth;
})
var items = document.querySelectorAll(".item");
document.querySelector(".horScroll").addEventListener("scroll", function(e) {
items.forEach(function(item, i) {
var currentScroll = e.target.scrollTop;
if (currentScroll > widthBase * (i) && currentScroll < widthBase * (i + 1)) {
item.querySelector(".item-content").style.transform = "scale(" + (1 - (currentScroll-((widthBase * i) + 1))*(1-0.55)/(((widthBase * (i+1)) + 1)-((widthBase * i) + 1))) + ")";
}
})
})
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
::-webkit-scrollbar {
height: 0;
width: 0;
}
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
h2 {
margin: 0;
}
p {
font-size: 1.25em;
letter-spacing: 0.56px;
line-height: 32px;
}
.container {
background-color: #000;
bottom: 0;
height: 100vh;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100vw;
}
.horScroll {
background-color: #abc;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-ms-scroll-snap-points-y: repeat(100vw);
scroll-snap-points-y: repeat(100vw);
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
-webkit-transform: translateX(-100%) rotate(-90deg);
-ms-transform: translateX(-100%) rotate(-90deg);
transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
width: 100vh;
}
.item {
background-color: #e4e4e4;
height: 100vw;
position: -webkit-sticky;
position: sticky;
scroll-snap-align: start;
top: 0;
width: 100vh;
}
.horScroll > div:nth-of-type(2n) {
background-color: #333;
color: #fff;
}
.item-inner {
height: 100vh;
max-height: 100vh;
overflow: scroll;
padding: 40px;
-webkit-transform: rotate(90deg) translateX(-100vh);
-ms-transform: rotate(90deg) translateX(-100vh);
transform: rotate(90deg) translateX(-100vh);
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
width: 100vw;
}
.item-content {
height: 100%;
}
<div class="container">
<div class="horScroll">
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 1</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 2</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 3</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 4</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 5</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-content">
<h2>Item 6</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Unfortunately, I didn't change the iteration on each scroll, which affects the performance a little bit.

Give opacity 0.5 to the 30% of scrollable div

I have a scrollable div for messages. I want opacity of 0.5 to the content at top 30% of scrollable div Like in image.
.
So while scrolling, whichever message comes on that div should have opacity 0.5. I have tried using an extra div background with linear gradient but the background color is clearly visible from my page's background color.Like this image So I just want to change the opacity of content but not the background of that region.
Thanks in advance.
.message-scroller {
height: 48vh;
overflow: hidden;
overflow-y:scroll;
position: relative;
width: 55%;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
display: flex;
//align-items: flex-end;
background-color: black
}
.sc-message{
padding: 0 10px 0 10px;
vertical-align: bottom;
width: 100%;
}
.single-message {
margin-bottom: 12px;
display: flex;
word-wrap: break-word;
flex-direction: row;
justify-content: space-between;
//overflow: hidden;
font-family: 'Barlow-SemiBold';
font-size: 22px;
color: #ffffff;
line-height: 24px;
.reserved{
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.bot-img{
display: flex;
height: 30px;
width: 40px;
img{
height: 15px;
width: 20px;
}
}
.user-img{
display: flex;
margin-left: auto;
img{
height: 20px;
width: 15px;
}
// margin: auto;
//align-items: flex-end;
}
.message{
padding: 5px 10px 5px 10px;
color: #ffffff;
max-width: 85%;
}
.show-more{
color: #DF3535;
font-size: 24px;
}
.arabic-message{
text-align: right !important;
margin-left: auto;
margin-right: 2vw;
}
.show-more:hover{
cursor: pointer;
}
}
img{
height: 25px;
width : 25px;
}
<div class="message-scroller">
<div class="sc-message">
<div class="single-message">
<div class="bot-img">
<div class="reserved"></div>
</div>
<div class="message">
<div class="LinesEllipsis ">
<div>hello</div>
</div>
</div>
<div class="user-img"><img src="
https://drive.google.com/uc?export=view&id=1G037foK0nwRpvvClvl9_WHA5bI_65goV
"></div>
</div>
<div class="single-message">
<div class="bot-img"><img src="https://drive.google.com/uc?export=view&id=1pu1s3lGPPUmgiu6j0CSbkcZMVFA4c_YC
"></div>
<div class="message">
<div class="LinesEllipsis ">
<div>Hi, How can I help you today?</div>
</div>
</div>
<div class="user-img">
<div class="reserved"></div>
</div>
</div>
<div class="single-message">
<div class="bot-img">
<div class="reserved"></div>
</div>
<div class="message">
<div class="LinesEllipsis ">
<div>why?</div>
</div>
</div>
<div class="user-img"><img src="
https://drive.google.com/uc?export=view&id=1G037foK0nwRpvvClvl9_WHA5bI_65goV
"></div>
</div>
<div class="single-message">
<div class="bot-img"><img src="https://drive.google.com/uc?export=view&id=1pu1s3lGPPUmgiu6j0CSbkcZMVFA4c_YC
"></div>
<div class="message">
<div class="LinesEllipsis ">
<div>Sorry, I can't answer that at this moment.<br>Feel free to ask something else in the meantime.</div>
</div>
</div>
<div class="user-img">
<div class="reserved"></div>
</div>
</div>
<div class="single-message">
<div class="bot-img">
<div class="reserved"></div>
</div>
<div class="message">
<div class="LinesEllipsis ">
<div>ok</div>
</div>
</div>
<div class="user-img"><img src="
https://drive.google.com/uc?export=view&id=1G037foK0nwRpvvClvl9_WHA5bI_65goV
"></div>
</div>
<div class="single-message">
<div class="bot-img"><img src="https://drive.google.com/uc?export=view&id=1pu1s3lGPPUmgiu6j0CSbkcZMVFA4c_YC
"></div>
<div class="message">
<div class="LinesEllipsis ">
<div>Okay, I can help you with queries related to HIV/AIDs</div>
</div>
</div>
<div class="user-img">
<div class="reserved"></div>
</div>
</div>
</div>
</div>

Here is my solution.
.container {
position: relative;
height: 200px; no need: just to get scrollable content
}
.container:before {
content: '';
position: absolute;
width: 100%;
height: 30%;
background: linear-gradient(#00000080, #00000000);
}
.content {
padding-bottom: 100vh;// no need : to get scrolled content
<div class="container">
<p class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet animi culpa cupiditate, dicta dignissimos distinctio dolor doloribus dolorum enim ex explicabo, harum impedit inventore ipsa molestiae nesciunt nihil omnis pariatur perferendis perspiciatis porro, quae quaerat quisquam recusandae reprehenderit repudiandae sint sit tempore totam unde veritatis voluptas voluptates? Aliquid consequuntur cumque cupiditate deleniti doloremque error harum libero, nostrum obcaecati odio optio provident quas qui recusandae sapiente sequi voluptates? Culpa dolorem dolorum esse exercitationem illum maxime minus molestias nobis officia officiis porro quos, repellat soluta! A amet animi distinctio dolore enim error ex explicabo nostrum odio quia similique soluta, totam voluptas! At culpa error harum minus reiciendis ullam voluptatem. Corporis illo ipsa perspiciatis quasi ut. Asperiores autem delectus dignissimos dolorum eius explicabo, id, illo laudantium modi neque porro quaerat qui quibusdam quidem quisquam quos sequi similique suscipit tenetur, ullam velit veritatis vitae? Ab accusantium adipisci alias aperiam asperiores at atque blanditiis consequatur corporis debitis dignissimos distinctio dolore dolorum eaqu
</p>
</div>

W3Schools Multiple modal box on same page does not work

I wanted to know what I should add or change so that the w3schools tutorial is for multiple "modal boxes"
Link: https://www.w3schools.com/howto/howto_css_modals.asp
The idea is that the code is adapted and I can create as many "items" or "modal boxes" as I need, I try not to use jquery only javasript.
Note: the first "item" works correctly while the second "item" does not work.
Edit: I know that the same id can not be repeated in html, but in javascript when I change document.getElementById () by document.getElementsByClassName () the modal boxes does not work
CODE:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.item {
display: block;
overflow: hidden;
background-color: cyan;
margin: 10px 0;
}
.image {
width: 160px;
float: left;
}
.modal {
display: none;
position: fixed;
z-index 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.418);
}
.modal-content {
background-color: white;
margin: 15% auto;
padding: 20px;
width 80%;
}
.close {
float: right;
font-size: 20px;
font-weight: 700;
}
.close:hover, close:focus {
color: gold;
text-decoration: none;
cursor: pointer;
}
<div class="container">
<div class="item">
<img class="image" src="https://www.w3schools.com/w3css/img_avatar3.png" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, quos provident similique, itaque officiis eos dolorum fuga doloribus quo, aut saepe voluptatem pariatur deleniti. Laudantium fugit nesciunt voluptates magni consectetur!</p>
<button class="open-modal" id="myBtn">More Info</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">X</span>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum fugit minima ab, recusandae dolorum nam voluptatibus fuga possimus minus totam molestiae illum numquam autem? Placeat vero natus molestias soluta nemo.</p>
<button>Button</button>
<button>Button</button>
</div>
</div>
</div>
<div class="item">
<img class="image" src="https://www.w3schools.com/w3css/img_avatar3.png" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, quos provident similique, itaque officiis eos dolorum fuga doloribus quo, aut saepe voluptatem pariatur deleniti. Laudantium fugit nesciunt voluptates magni consectetur!</p>
<button class="open-modal" id="myBtn">More Info</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">X</span>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum fugit minima ab, recusandae dolorum nam voluptatibus fuga possimus minus totam molestiae illum numquam autem? Placeat vero natus molestias soluta nemo.</p>
<button>Button</button>
<button>Button</button>
</div>
</div>
</div>
</div>

ID's should be unique, you could add an onclick event on your buttons/span;
<button class="open-modal" id="myBtn" onclick="openModal('myModal');">More Info</button>
<span class="close" onclick="closeModal('myModal')">X</span>
Then openModal and closeModal functions should have the ID's of the target as parameter. See and run the code below.
var modal = "";
function openModal(target) {
modal = document.getElementById(target);
modal.style.display = "block";
}
function closeModal(target) {
modal = document.getElementById(target);
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.item {
display: block;
overflow: hidden;
background-color: cyan;
margin: 10px 0;
}
.image {
width: 160px;
float: left;
}
.modal {
display: none;
position: fixed;
z-index 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.418);
}
.modal-content {
background-color: white;
margin: 15% auto;
padding: 20px;
width 80%;
}
.close {
float: right;
font-size: 20px;
font-weight: 700;
}
.close:hover,
close:focus {
color: gold;
text-decoration: none;
cursor: pointer;
}
<div class="container">
<div class="item">
<img class="image" src="https://www.w3schools.com/w3css/img_avatar3.png" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, quos provident similique, itaque officiis eos dolorum fuga doloribus quo, aut saepe voluptatem pariatur deleniti. Laudantium fugit nesciunt voluptates magni consectetur!</p>
<button class="open-modal" id="myBtn" onclick="openModal('myModal');">More Info</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('myModal')">X</span>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum fugit minima ab, recusandae dolorum nam voluptatibus fuga possimus minus totam molestiae illum numquam autem? Placeat vero natus molestias soluta nemo.</p>
<button>Button</button>
<button>Button</button>
</div>
</div>
</div>
<div class="item">
<img class="image" src="https://www.w3schools.com/w3css/img_avatar3.png" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, quos provident similique, itaque officiis eos dolorum fuga doloribus quo, aut saepe voluptatem pariatur deleniti. Laudantium fugit nesciunt voluptates magni consectetur!</p>
<button class="open-modal" onclick="openModal('myModal2')">More Info</button>
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('myModal2')">X</span>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum fugit minima ab, recusandae dolorum nam voluptatibus fuga possimus minus totam molestiae illum numquam autem? Placeat vero natus molestias soluta nemo.</p>
<button>Button</button>
<button>Button</button>
</div>
</div>
</div>
</div>

Change the id of the modals. Id’s cannot repeat..

html link and slider conflict

I use a scroll slider with the mouse or by clicking on image. My problem is that the other links as in the footer or another no longer work. I added "onclick =" window.open (this.href); return false; "but now it's the slide that no longer works when the footer link was clicked.
Appreciate the help
$(function() {
//make functions first
function showSlide(n) {
// unbind event listener to prevent retriggering
$("body").unbind("mousewheel");
currSlide += n;
// make sure currslide does not go out of min or max boundaries
currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
// displacement is window width times current slide number
var displacment = window.innerWidth*currSlide;
// translate slides div across to appropriate slide
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
// give small delay before rebinding event to prevent retriggering
setTimeout(function() {
$("body").bind('mousewheel', mouseEvent);
}, 800);
// change active class on link
$('nav a.active').removeClass('active');
$($('a')[currSlide]).addClass('active');
}
function mouseEvent(e, delta) {
// On upwards scroll, show next slide (+1)
// otherwise on downwards scroll show prev slide (-1)
showSlide(delta >= 0 ? -1 : 1);
e.preventDefault();
}
$('nav a').click(function(e) {
// When link clicked, find slide it points to
var newslide = parseInt($(this).attr('href')[1]);
// find how far it is from current slide
var diff = newslide - currSlide - 1;
showSlide(diff); // show that slide
e.preventDefault();
});
$(window).resize(function(){
// Keep current slide to left of window on resize
var displacment = window.innerWidth*currSlide;
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
});
//declare vars then make things happen
var currSlide = 0; //Keeps track of slide
var $slide = $('.slide'); //all slides
// give active class to first link
$($('nav a')[0]).addClass('active');
//add event listener for mousescroll
$("body").bind('mousewheel', mouseEvent);
})
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#-webkit-keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
#keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
html, body{
height:100%;
}
body {
font-size: 100%;
color:#555;
overflow:hidden;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
}
[itemprop="description"] {
margin-top: 120px;
padding: 20px;
}
[itemprop="name"] {
text-align: right;
padding: 20px;
padding-bottom: 0;
}
[itemprop="faxNumber"] {
padding: 0 20px 0 0;
}
[itemprop="email"] {
padding: 0 20px 0 0;
}
[itemprop="address"] {
padding: 0 20px 0 0;
}
[itemprop="telephone"] {
padding: 0 20px 0 0;
color:#4a974d;
text-decoration: overline;
}
div{
text-align:right;
}
h1 {
font-size: 2.25em;
font-weight: 700;
text-align:center;
padding-top: 20px;
}
h2 {
font-size: 1.25em;
text-align:left;
color:#e7c6c6;
}
#footer {
bottom:0;
width:100%;
height:60px; /* Height of the footer */
margin-top: 20px;
}
#footer p {
color:#555;
text-align:center;
font-size: 12px;
}
#footer a{
color:#555;
text-decoration: none;
border-bottom: dotted 1px #555;
}
nav {
background: #fff;
position: absolute;
z-index: 100;
height: 100vh;
right: 0;
width: 10vw;
font-weight: 300;
font-size: 1rem;
width: 300px;
overflow:scroll;
}
nav ul {
position: absolute;
list-style-type: none;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
text-decoration: none;
color: #fff;
}
nav a {
/*position: absolute;*/
-webkit-transition: color 2s, background 1s;
transition: color 2s, background 1s;
padding: 3px;
z-index: 0;
}
nav a.active {
background: rgba(0, 0, 0, 0.9);
}
nav a::before {
content: "";
position: absolute;
height: 0%;
width: 0%;
bottom: 0;
left: 0;
opacity: 1;
background: #555;
z-index: -1;
}
nav img {
width:120px;
float: left;}
#nav-thumbnails {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em 0.8em;
}
#nav-thumbnails h3{
font-size: 1.25em;
text-align:left;
color:#764a4a;
padding:8px;
}
/*nav a:hover {
-webkit-animation: fillColour 0.7s forwards ease-in-out;
animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
-webkit-animation: fill 0.7s forwards ease-in-out;
animation: fill 0.7s forwards ease-in-out;
opacity: 1;
}*/
#media only screen and (max-width: 460px) {
nav {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
position: absolute;
overflow: scroll;
}
nav a {
padding: 3px;
}
nav a.active {
background: none;
}
nav img {
width: 100%;
}
.slides {
display:none;
}
#footer {
position: inherit;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
width:120px;
}
}
.slides {
width: 600vw;
height: 100vh;
-webkit-transition: -webkit-transform 0.8s ease;
transition: -webkit-transform 0.8s ease;
transition: transform 0.8s ease;
transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
height: 100vh;
width: 100vw;
background: pink;
float: left;
text-align: center;
background-size: cover;
}
.slides .slide .content {
max-width: 600px;
padding: 20px;
background: rgba(24, 20, 20, 0.35);
/* margin: 35vh 0 0 15vw; */
border-radius: 5px;
position: absolute;
bottom: 0;
}
.slides .slide .content p {
padding: 10px 0;
border-bottom: 1px solid #f2e9e9;
width: 100%;
}
.slides .slide:nth-child(1) {
background-image: url(../img/1.jpg);
}
.slides .slide:nth-child(2) {
background-image: url(../img/2.jpg);
}
.slides .slide:nth-child(3) {
background-image: url(../img/3.jpg);
}
.slides .slide:nth-child(4) {
background-image: url(../img/4.jpg);
}
.slides .slide:nth-child(5) {
background-image: url(../img/5.jpg);
}
.slides .slide:nth-child(6) {
background-image: url(../img/6.jpg);
}
.slides .slide:nth-child(7) {
background-image: url(../img/7.jpg);
}
.slides .slide:nth-child(8) {
background-image: url(../img/8.jpg);
}
.slides .slide:nth-child(9) {
background-image: url(../img/9.jpg);
}
.slides .slide:nth-child(10) {
background-image: url(../img/10.jpg);
}
.slides .slide img {
width: 100%;
}
.slides .slide p {
color:#fff;
text-align:left;
}
#media only screen and (max-width: 900px) {
.slides .slide .content {
width: 300px;
}
.slides .slide .content p {
padding: 0;
border-bottom: 0;
}
}
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad#mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>
</div>
</div>
</header>
<!--section de navigation-->
<section id="nav-thumbnails">
<h3>La pépinière</h3>
<img src="img/1.jpg" alt="image1">
<img src="img/2.jpg" alt="image2">
<img src="img/3.jpg" alt="image3">
<img src="img/4.jpg" alt="image4">
<img src="img/5.jpg" alt="image5">
<img src="img/6.jpg" alt="image6">
</section>
<!--footer-->
<div id="footer"><p>Crédit : pixabay.com</p></div>
</nav>
</main>
<div class="slides">
<div id="1" class="slide">
<div class="content">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="2" class="slide">
<div class="content">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="3" class="slide">
<div class="content">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="4" class="slide">
<div class="content">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="5" class="slide">
<div class="content">
<h2>Slide 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="6" class="slide">
<div class="content">
<h2>Slide 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Jquery is correct, just you need take footer div outside the <nav> tag.
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad#mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>
</div>
</div>
</header>
<!--section de navigation-->
<section id="nav-thumbnails">
<h3>La pépinière</h3>
<img src="img/1.jpg" alt="image1">
<img src="img/2.jpg" alt="image2">
<img src="img/3.jpg" alt="image3">
<img src="img/4.jpg" alt="image4">
<img src="img/5.jpg" alt="image5">
<img src="img/6.jpg" alt="image6">
</section>
<!--footer-->
</nav>
<div id="footer"><p>Credit : pixabay.com</p></div>
</main>
<div class="slides">
<div id="1" class="slide">
<div class="content">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="2" class="slide">
<div class="content">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="3" class="slide">
<div class="content">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="4" class="slide">
<div class="content">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="5" class="slide">
<div class="content">
<h2>Slide 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="6" class="slide">
<div class="content">
<h2>Slide 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
</div>

Add onkeypress="window.open(this.href); return false;" to your code
pixabay.com
Remove below code
$('nav a').click(function(e) {
// When link clicked, find slide it points to
var newslide = parseInt($(this).attr('href')[1]);
// find how far it is from current slide
var diff = newslide - currSlide - 1;
showSlide(diff); // show that slide
e.preventDefault();
});

add this code to your js file.
$('#nav-thumbnails a').click(function(e) {
var newslide = parseInt($(this).attr('href')[1]);
var diff = newslide - currSlide - 1; showSlide(diff);
e.preventDefault();
});
$(function() {
//make functions first
function showSlide(n) {
// unbind event listener to prevent retriggering
$("body").unbind("mousewheel");
currSlide += n;
// make sure currslide does not go out of min or max boundaries
currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
// displacement is window width times current slide number
var displacment = window.innerWidth*currSlide;
// translate slides div across to appropriate slide
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
// give small delay before rebinding event to prevent retriggering
setTimeout(function() {
$("body").bind('mousewheel', mouseEvent);
}, 800);
// change active class on link
$('nav a.active').removeClass('active');
$($('a')[currSlide]).addClass('active');
}
function mouseEvent(e, delta) {
// On upwards scroll, show next slide (+1)
// otherwise on downwards scroll show prev slide (-1)
showSlide(delta >= 0 ? -1 : 1);
e.preventDefault();
}
$('#nav-thumbnails a').click(function(e) { var newslide = parseInt($(this).attr('href')[1]); var diff = newslide - currSlide - 1; showSlide(diff); e.preventDefault(); });
$(window).resize(function(){
// Keep current slide to left of window on resize
var displacment = window.innerWidth*currSlide;
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
});
//declare vars then make things happen
var currSlide = 0; //Keeps track of slide
var $slide = $('.slide'); //all slides
// give active class to first link
$($('nav a')[0]).addClass('active');
//add event listener for mousescroll
$("body").bind('mousewheel', mouseEvent);
})
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#-webkit-keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
#keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
html, body{
height:100%;
}
body {
font-size: 100%;
color:#555;
overflow:hidden;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
}
[itemprop="description"] {
margin-top: 120px;
padding: 20px;
}
[itemprop="name"] {
text-align: right;
padding: 20px;
padding-bottom: 0;
}
[itemprop="faxNumber"] {
padding: 0 20px 0 0;
}
[itemprop="email"] {
padding: 0 20px 0 0;
}
[itemprop="address"] {
padding: 0 20px 0 0;
}
[itemprop="telephone"] {
padding: 0 20px 0 0;
color:#4a974d;
text-decoration: overline;
}
div{
text-align:right;
}
h1 {
font-size: 2.25em;
font-weight: 700;
text-align:center;
padding-top: 20px;
}
h2 {
font-size: 1.25em;
text-align:left;
color:#e7c6c6;
}
#footer {
bottom:0;
width:100%;
height:60px; /* Height of the footer */
margin-top: 20px;
}
#footer p {
color:#555;
text-align:center;
font-size: 12px;
}
#footer a{
color:#555;
text-decoration: none;
border-bottom: dotted 1px #555;
}
nav {
background: #fff;
position: absolute;
z-index: 100;
height: 100vh;
right: 0;
width: 10vw;
font-weight: 300;
font-size: 1rem;
width: 300px;
overflow:scroll;
}
nav ul {
position: absolute;
list-style-type: none;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
text-decoration: none;
color: #fff;
}
nav a {
/*position: absolute;*/
-webkit-transition: color 2s, background 1s;
transition: color 2s, background 1s;
padding: 3px;
z-index: 0;
}
nav a.active {
background: rgba(0, 0, 0, 0.9);
}
nav a::before {
content: "";
position: absolute;
height: 0%;
width: 0%;
bottom: 0;
left: 0;
opacity: 1;
background: #555;
z-index: -1;
}
nav img {
width:120px;
float: left;}
#nav-thumbnails {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em 0.8em;
}
#nav-thumbnails h3{
font-size: 1.25em;
text-align:left;
color:#764a4a;
padding:8px;
}
/*nav a:hover {
-webkit-animation: fillColour 0.7s forwards ease-in-out;
animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
-webkit-animation: fill 0.7s forwards ease-in-out;
animation: fill 0.7s forwards ease-in-out;
opacity: 1;
}*/
#media only screen and (max-width: 460px) {
nav {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
position: absolute;
overflow: scroll;
}
nav a {
padding: 3px;
}
nav a.active {
background: none;
}
nav img {
width: 100%;
}
.slides {
display:none;
}
#footer {
position: inherit;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
width:120px;
}
}
.slides {
width: 600vw;
height: 100vh;
-webkit-transition: -webkit-transform 0.8s ease;
transition: -webkit-transform 0.8s ease;
transition: transform 0.8s ease;
transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
height: 100vh;
width: 100vw;
background: pink;
float: left;
text-align: center;
background-size: cover;
}
.slides .slide .content {
max-width: 600px;
padding: 20px;
background: rgba(24, 20, 20, 0.35);
/* margin: 35vh 0 0 15vw; */
border-radius: 5px;
position: absolute;
bottom: 0;
}
.slides .slide .content p {
padding: 10px 0;
border-bottom: 1px solid #f2e9e9;
width: 100%;
}
.slides .slide:nth-child(1) {
background-image: url(../img/1.jpg);
}
.slides .slide:nth-child(2) {
background-image: url(../img/2.jpg);
}
.slides .slide:nth-child(3) {
background-image: url(../img/3.jpg);
}
.slides .slide:nth-child(4) {
background-image: url(../img/4.jpg);
}
.slides .slide:nth-child(5) {
background-image: url(../img/5.jpg);
}
.slides .slide:nth-child(6) {
background-image: url(../img/6.jpg);
}
.slides .slide:nth-child(7) {
background-image: url(../img/7.jpg);
}
.slides .slide:nth-child(8) {
background-image: url(../img/8.jpg);
}
.slides .slide:nth-child(9) {
background-image: url(../img/9.jpg);
}
.slides .slide:nth-child(10) {
background-image: url(../img/10.jpg);
}
.slides .slide img {
width: 100%;
}
.slides .slide p {
color:#fff;
text-align:left;
}
#media only screen and (max-width: 900px) {
.slides .slide .content {
width: 300px;
}
.slides .slide .content p {
padding: 0;
border-bottom: 0;
}
}
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad#mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>
</div>
</div>
</header>
<!--section de navigation-->
<section id="nav-thumbnails">
<h3>La pépinière</h3>
<img src="img/1.jpg" alt="image1">
<img src="img/2.jpg" alt="image2">
<img src="img/3.jpg" alt="image3">
<img src="img/4.jpg" alt="image4">
<img src="img/5.jpg" alt="image5">
<img src="img/6.jpg" alt="image6">
</section>
<!--footer-->
<div id="footer"><p>Crédit : pixabay.com</p></div>
</nav>
</main>
<div class="slides">
<div id="1" class="slide">
<div class="content">
< h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="2" class="slide">
<div class="content">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="3" class="slide">
<div class="content">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="4" class="slide">
<div class="content">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="5" class="slide">
<div class="content">
<h2>Slide 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="6" class="slide">
<div class="content">
<h2>Slide 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

I have made the changes in jquery .You can take below code.
$(function() {
//make functions first
function showSlide(n) {
// unbind event listener to prevent retriggering
$("body").unbind("mousewheel");
currSlide += n;
// make sure currslide does not go out of min or max boundaries
currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
// displacement is window width times current slide number
var displacment = window.innerWidth*currSlide;
// translate slides div across to appropriate slide
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
// give small delay before rebinding event to prevent retriggering
setTimeout(function() {
$("body").bind('mousewheel', mouseEvent);
}, 800);
// change active class on link
$('nav #nav-thumbnails a.active').removeClass('active');
$($('a')[currSlide]).addClass('active');
}
function mouseEvent(e, delta) {
// On upwards scroll, show next slide (+1)
// otherwise on downwards scroll show prev slide (-1)
showSlide(delta >= 0 ? -1 : 1);
e.preventDefault();
}
$('nav #nav-thumbnails a').click(function(e) {
// When link clicked, find slide it points to
var newslide = parseInt($(this).attr('href')[1]);
// find how far it is from current slide
var diff = newslide - currSlide - 1;
showSlide(diff); // show that slide
e.preventDefault();
});
$(window).resize(function(){
// Keep current slide to left of window on resize
var displacment = window.innerWidth*currSlide;
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
});
//declare vars then make things happen
var currSlide = 0; //Keeps track of slide
var $slide = $('.slide'); //all slides
// give active class to first link
$($('nav #nav-thumbnails a')[0]).addClass('active');
//add event listener for mousescroll
$("body").bind('mousewheel', mouseEvent);
})

Develop Reference

JavaScript is the programming language of the Web.

How can I rewrite modal window jQuery into native Javascript? - javascript

Related

header menu to sidebar toggle not working

Effect on horizontal scroll

Give opacity 0.5 to the 30% of scrollable div

W3Schools Multiple modal box on same page does not work

html link and slider conflict

Categories

Resources