Develop Reference

why not work multiple Thumbs gallery with swipre on one page

I have a page with three slides (pageSwiper).
The scenario is that when each of these slides is clicked, a modal will open and there will be a "Thumbs gallery" inside each modal (mySwiper2 , mySwiper).
But due to the existence of several "Thumbs gallery", these (swiper-button-next, swiper-button-prev) items do not work.
If you have a suggestion for solving this problem, thank you for letting me know.
Thank you in advance for your cooperation.
var swiperpage = new Swiper(".pageSwiper", {
spaceBetween: 30,
effect: "fade",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
var swiper = new Swiper(".mySwiper", {
loop: true,
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
var swiper2 = new Swiper(".mySwiper2", {
loop: true,
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
.page--slider{
padding: 0 56px;
height: 600px;
margin-bottom: 50px;
padding: 2rem;
}
.pageSwiper .swiper {
width: 100%;
height: 100%;
}
.pageSwiper .swiper-slide {
background-position: center;
background-size: cover;
}
.pageSwiper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pageSwiper .swiper-button-next,
.pageSwiper .swiper-button-prev{
color: rgba(0,0,0,.8) !important;
}
.pageSwiper .swiper-button-next:after,
.pageSwiper .swiper-button-prev:after {
font-size: 40px !important;
font-weight: bolder !important;
}
.pageSwiper .swiper-pagination-bullet {
width: 13px !important;
height: 13px !important;
background: rgba(0,0,0,.5) !important;
}
.pageSwiper .swiper-pagination-bullet:hover{
background: rgba(0,0,0,.7) !important;
}
.pageSwiper .swiper-pagination-bullet-active{
background: rgba(0,0,0,.9) !important;
}
/* The Modal */
.modal {
display: none;
position: fixed;
z-index: 1100;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.8);
border: 2px solid red;
}
.modal-content {
-webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
width: 50%;
height: 450px;
max-height: 90%;
padding: 0 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
border: 2px solid green;
background-color: var(--cw);
border-radius:8px;
padding: 13px;
display: flex;
flex-direction: column;
}
.modal-content-slider{
width: 100%;
height: 85%;
border: 2px solid black;
}
.modal-content-buttons{
width: 100%;
height: 15%;
border: 2px solid red;
}
.modal-content-close{
width:40px;
height:40px;
background-color: black;
border-radius:50%;
margin-left: auto;
margin-top: 0.5rem;
position: relative;
}
.close {
color: var(--cw);
position: absolute;
text-shadow: 0px 1px 2px rgb(0 0 0 / 90%);
font-size: 40px;
font-weight: 100;
cursor: pointer;
left: 50%;
top: 50%;
margin: auto 0;
transform: translate(-50%, -50%);
}
.close:hover{
opacity: .5;
}
/* swiper Modal */
.modal .swiper {
width: 100%;
height: 100%;
}
.modal .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.modal .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.modal .swiper {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.modal .swiper-slide {
background-size: cover;
background-position: center;
}
.modal .mySwiper2 {
height: 80%;
width: 100%;
}
.modal .mySwiper {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.modal .mySwiper .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.modal .mySwiper .swiper-slide-thumb-active {
opacity: 1;
}
.modal .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<div class="page--slider">
<div class="swiper pageSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" class="myBtn_multi"/>
</div>
</div>
<div class="swiper-slide">
<div>
<img src="https://swiperjs.com/demos/images/nature-12.jpg" class="myBtn_multi"/>
</div>
</div>
<div class="swiper-slide">
<div>
<img src="https://swiperjs.com/demos/images/nature-10.jpg" class="myBtn_multi"/>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- The Modals -->
<div>
<div class="modal modal_multi">
<div class="modal-content">
<div class="modal-content-slider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
</div>
</div>
<div class="modal-content-buttons">
<div class="modal-content-close">
<span class="close close_multi">×</span>
</div>
</div>
</div>
</div>
<div class="modal modal_multi">
<div class="modal-content">
<div class="modal-content-slider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
</div>
</div>
<div class="modal-content-buttons">
<div class="modal-content-close">
<span class="close close_multi">×</span>
</div>
</div>
</div>
</div>
<div class="modal modal_multi">
<div class="modal-content">
<div class="modal-content-slider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
</div>
</div>
<div class="modal-content-buttons">
<div class="modal-content-close">
<span class="close close_multi">×</span>
</div>
</div>
</div>
</div>
</div>

Here is the answer to this question:
https://raddy.co.uk/blog/multiple-instances-of-swiperjs-on-the-same-page-with-the-same-settings/
Create a few sliders with the same class name of “swiper-container” ( you can add as many as you want). Your code should look similar to mine:
HTML:
<div class="swiper-container">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-container">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-container">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
Now we need to select the class name "swiper-container", loop through each available element (example: div, section) on the page and then add a new unique class name to each to initialize unique Swipers.
const myCustomSlider = document.querySelectorAll('.swiper-container');
for( i=0; i< myCustomSlider.length; i++ ) {
myCustomSlider[i].classList.add('swiper-container-' + i);
var slider = new Swiper('.swiper-container-' + i, {
/* Options */
});
}

How to get div height based on image height?

I have some flip boxes that need a specific height. Otherwise, it does not work.
I gave them height: 220px; for testing. But this value shouldn't be 220px, it always should be the actual proportional image height.
How is it possible to code that? Maybe with a jQuery function? Like: Get the height of the image, and add it as CSS for the container?
This is my code:
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
height: 220px;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

This can be possible without JavaScript. It's enough to not specify height for <div> and it will stretch to the height of the image.
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
position: relative;
background-color: #bbb;
color: black;
}
.flip_box_back {
position: absolute;
background-color: dodgerblue;
color: white;
transform: translate(0, -100%) rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

You can loop through the containers, search for the image and retrieve the height, then assign it back to the container.
jQuery( window ).on( "load", function($) {
$( ".flip_box" ).each(function( index ) {
let imgHeight = $(this).find('img').height();
$(this).css('height', imgHeight + 'px')
});
});
But note that if images have different heights, it might cause a problem because you are only using the height of a single image from the container

After a slight delay of waiting for the photos to load, you can iterate over the flip boxes, locate their images, and set their heights to match the image height.
const resizeFlipBoxes = () => {
document.querySelectorAll('.flip_box').forEach(flipBox => {
flipBox.style.height = `${flipBox.querySelector('img').offsetHeight}px`;
});
};
setTimeout(resizeFlipBoxes, 1);
window.addEventListener('resize', resizeFlipBoxes);
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

Buttons in slider not working using javascript

I am trying to make a slider for a list of products and I have placed a button on each side of the slider to slide the products. The problem I am facing is that it works fine when I press exactly at the buttons but when I press anywhere around it, it throws the error Uncaught TypeError: Cannot read property 'style' of null.
next = (target) => {
target.parentElement.parentElement.previousElementSibling.style.transform = 'translateX(-44vw)';
// next[0].style.display = 'none';
// previous[0].style.display = 'inline-block';
}
previous = (target) => {
target.parentElement.parentElement.previousElementSibling.style.transform = 'translateX(0vw)';
// previous[0].style.display = 'none';
// next[0].style.display = 'inline-block';
}
* {
font-family: "Segoe UI";
}
.shop {
background-color: rgb(255, 255, 255);
overflow: hidden;
position: relative;
margin: 10px;
margin-top: 0;
}
.product-display-area {
width: 81.5vw;
display: inline-block;
}
.shop_header {
margin: 10px;
margin-bottom: 0px;
position: relative;
padding: 10px;
border-bottom: 1px solid rgb(229, 229, 229);
background-color: rgb(255, 255, 255);
}
.shop_header h2 {
display: inline-block;
font-weight: 500;
margin-left: 30px;
}
.shop_header p {
margin-left: 30px;
}
.shop_header .clock {
display: inline-block;
margin-left: 30px;
}
.shop_header .clock img {
position: relative;
top: 6px;
width: 24px;
}
.shop_header .clock #time_remaining {
margin-left: 10px;
}
.shop_header button[type="button"] a {
text-decoration: none;
padding: 10px 15px;
display: inline-block;
font-size: 15px;
font-weight: 700;
background-color: rgb(40, 116, 240);
color: rgb(255, 255, 255);
}
.shop_header button[type="button"] {
border: none;
position: absolute;
right: 20px;
top: 0px;
}
.shop_items {
width: 130vw;
transition: 1s;
}
.shop_items .items {
display: inline-block;
padding: 25px;
}
.shop_items .items img {
display: block;
margin: auto;
}
.shop_items .items .item_info {
text-align: center;
margin: auto;
}
.shop_items .items .item_info p {
padding: 5px;
color: rgb(56, 142, 60);
font-size: 14px;
}
.shop_items .items .item_info p:first-of-type {
color: rgb(0, 0, 0);
font-weight: 500;
}
.shop_items .items .item_info p:last-of-type {
color: rgb(151, 151, 151);
}
.item_carousel_left_arrow {
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.item_carousel_right_arrow {
right: 0;
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="product-display-area">
<div class="shop" id="best_of_electronics">
<div class="shop_header">
<h2>Best of Electronics</h2>
<p>Devices and Accessories</p>
<button type="button">VIEW ALL</button>
</div>
<div class="shop_items">
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k4vmxzk0/cases-covers/back-cover/y/y/g/spigen-f23cs25961-original-imafnzhgzuty3gb6.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best Brands</p>
<p class="product_price">Shop Now</p>
<p class="product_company">For All Phone Models</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kdhphu80/sports-action-camera/j/f/k/4000-air-4k-full-hd-wifi-30m-waterproof-sports-action-camera-original-imafue3ghmhtk39f.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Sports & Action Camera</p>
<p class="product_price">From ₹4199</p>
<p class="product_company">GoPro, SJCAM, DJI & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kbqu4cw0/speaker/soundbar/9/s/0/mt160dsb-motorola-original-imaftf6csukur9he.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Dolby Enabled</p>
<p class="product_price">Up to 50% Off</p>
<p class="product_company">Home Theaters</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k6mibgw0/datacard/r/h/g/jiofi-jmr-541-original-imafpfhandhkptwc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Data Cards</p>
<p class="product_price">Upto 60% off</p>
<p class="product_company">JioFi, Huawei & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/ja73ki80/webcam/pc-webcam/7/q/e/logitech-c310-original-imaeztzqny7jh7gh.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Webcams</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Logitech, Quantum & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kb5eikw0/trimmer/z/d/n/0-5-10-mm-bt3101-15-stainless-steel-cordless-philips-original-imafsjquyq2hapug.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Trimmers & Hair Clippers</p>
<p class="product_price">From ₹700</p>
<p class="product_company">By Nova, Philips & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k51cpe80/hearing-aid/e/e/s/ha50-behind-ear-beurer-original-imafnth6bue82ngc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best of Hearing Aids</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Beurer & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kex5ci80/printer/k/n/z/hp-laserjet-pro-m1136-mfp-original-imafvhnbe2dg4vem.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Top 10 Printers</p>
<p class="product_price">₹2399</p>
<p class="product_company">Print, Scan & copy</p>
</div>
</div>
</a>
</div>
<div>
<span class="item_carousel_left_arrow" id="arruw" onclick="previous(event.target)">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow" id="arruw" onclick="next(event.target)">
<i class="fas fa-arrow-right"></i>
</span>
</div>
</div>
</div>

You need to delegate and test what you clicked since you have two elements you can click, the button and the <i>
Also you have duplicate IDs which is not allowed (had you used them)
Also DRY (don't repeat yourself)
const shopItems = document.querySelector("#best_of_electronics .shop_items")
document.getElementById("nav").addEventListener("click", function(e) {
let tgt = e.target;
let possibleParent = tgt.closest("span")
if (possibleParent) tgt = possibleParent; // we clicked the <i>
shopItems.style.transform = tgt.id==="prev" ? 'translateX(-44vw)' : 'translateX(0vw)';
})
* {
font-family: "Segoe UI";
}
.shop {
background-color: rgb(255, 255, 255);
overflow: hidden;
position: relative;
margin: 10px;
margin-top: 0;
}
.product-display-area {
width: 81.5vw;
display: inline-block;
}
.shop_header {
margin: 10px;
margin-bottom: 0px;
position: relative;
padding: 10px;
border-bottom: 1px solid rgb(229, 229, 229);
background-color: rgb(255, 255, 255);
}
.shop_header h2 {
display: inline-block;
font-weight: 500;
margin-left: 30px;
}
.shop_header p {
margin-left: 30px;
}
.shop_header .clock {
display: inline-block;
margin-left: 30px;
}
.shop_header .clock img {
position: relative;
top: 6px;
width: 24px;
}
.shop_header .clock #time_remaining {
margin-left: 10px;
}
.shop_header button[type="button"] a {
text-decoration: none;
padding: 10px 15px;
display: inline-block;
font-size: 15px;
font-weight: 700;
background-color: rgb(40, 116, 240);
color: rgb(255, 255, 255);
}
.shop_header button[type="button"] {
border: none;
position: absolute;
right: 20px;
top: 0px;
}
.shop_items {
width: 130vw;
transition: 1s;
}
.shop_items .items {
display: inline-block;
padding: 25px;
}
.shop_items .items img {
display: block;
margin: auto;
}
.shop_items .items .item_info {
text-align: center;
margin: auto;
}
.shop_items .items .item_info p {
padding: 5px;
color: rgb(56, 142, 60);
font-size: 14px;
}
.shop_items .items .item_info p:first-of-type {
color: rgb(0, 0, 0);
font-weight: 500;
}
.shop_items .items .item_info p:last-of-type {
color: rgb(151, 151, 151);
}
.item_carousel_left_arrow {
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.item_carousel_right_arrow {
right: 0;
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="product-display-area">
<div class="shop" id="best_of_electronics">
<div class="shop_header">
<h2>Best of Electronics</h2>
<p>Devices and Accessories</p>
<button type="button">VIEW ALL</button>
</div>
<div class="shop_items">
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k4vmxzk0/cases-covers/back-cover/y/y/g/spigen-f23cs25961-original-imafnzhgzuty3gb6.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best Brands</p>
<p class="product_price">Shop Now</p>
<p class="product_company">For All Phone Models</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kdhphu80/sports-action-camera/j/f/k/4000-air-4k-full-hd-wifi-30m-waterproof-sports-action-camera-original-imafue3ghmhtk39f.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Sports & Action Camera</p>
<p class="product_price">From ₹4199</p>
<p class="product_company">GoPro, SJCAM, DJI & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kbqu4cw0/speaker/soundbar/9/s/0/mt160dsb-motorola-original-imaftf6csukur9he.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Dolby Enabled</p>
<p class="product_price">Up to 50% Off</p>
<p class="product_company">Home Theaters</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k6mibgw0/datacard/r/h/g/jiofi-jmr-541-original-imafpfhandhkptwc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Data Cards</p>
<p class="product_price">Upto 60% off</p>
<p class="product_company">JioFi, Huawei & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/ja73ki80/webcam/pc-webcam/7/q/e/logitech-c310-original-imaeztzqny7jh7gh.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Webcams</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Logitech, Quantum & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kb5eikw0/trimmer/z/d/n/0-5-10-mm-bt3101-15-stainless-steel-cordless-philips-original-imafsjquyq2hapug.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Trimmers & Hair Clippers</p>
<p class="product_price">From ₹700</p>
<p class="product_company">By Nova, Philips & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k51cpe80/hearing-aid/e/e/s/ha50-behind-ear-beurer-original-imafnth6bue82ngc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best of Hearing Aids</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Beurer & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kex5ci80/printer/k/n/z/hp-laserjet-pro-m1136-mfp-original-imafvhnbe2dg4vem.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Top 10 Printers</p>
<p class="product_price">₹2399</p>
<p class="product_company">Print, Scan & copy</p>
</div>
</div>
</a>
</div>
<div id="nav">
<span class="item_carousel_left_arrow arrow" id="prev">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow arrow" id="next">
<i class="fas fa-arrow-right"></i>
</span>
</div>
</div>
</div>
If you must have inline handlers, you can pass (this) - it is the same as event.target and use the saved div
<span class="item_carousel_left_arrow" id="prev" onclick="nav(this)">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow" id="next" onclick="nav(this)">
<i class="fas fa-arrow-right"></i>
</span>
using
const shopItems = document.querySelector("#best_of_electronics .shop_items")
function nav(span) {
shopItems.style.transform = span.id==="prev" ? 'translateX(-44vw)' : 'translateX(0vw)';
}

Simply change next and previous function to these:
let next = () => {
document.querySelector(".shop_items").style.transform = 'translateX(-44vw)';
}
let previous = () => {
document.querySelector(".shop_items").style.transform = 'translateX(0vw)';
}
Or even you can change the onclick parameter and use only one function for both next and previous as this:
let nextPrev = (value) => {
document.querySelector(".shop_items").style.transform = 'translateX(' + value + ')';
}
<div>
<span class="item_carousel_left_arrow" id="arruw" onclick="nextPrev('0vw')">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow" id="arruw" onclick="nextPrev('-44vw')">
<i class="fas fa-arrow-right"></i>
</span>
</div>

Disable resizing of fixed flex

I'm using this html below to display a flex view on my website. But changing the text (length of the text) from a div will lead to the crazy-looking autoresizing.
How can I avoid this resizing in relation to this special div element below? How to keep the same layout when the click button is clicked?
Edit: I would like that neither the size nor the position of any element changes. (No matter how much text is inside!)
<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

.wrapper{
width:100%;
background: black;
display: flex;
justify-content: space-around;
text-align: center;
color: white;
}
.wrapper > div{
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="wrapper">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

Here's the solution:
document.addEventListener("click", function(e){
if(e.target.id == "button")
document.getElementById('text').innerHTML+='.';
});
#navigation {
position: fixed;
width: 100%;
height: 30%;
left: 0%;
top: 0%;
background: black;
display: flex;
justify-content: space-around;
text-align: center;
color: white;
flex-basis: 1 1 100%;
}
#navigation > div {
flex-direction: column;
overflow: hidden;
width: 100%;
}
#button {
position: relative;
}
<div id="navigation">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<button id="button">click</button>
Edit: To lock the tekst as well. I would do it with align it left and than adding a padding to it:
#navigation > div > div:nth-child(2) {
padding-left: 10%;
text-align: left;
}

Add flex: 1 0 33%; to the elements you don't want to resize. This is equivalent to:
flex-grow: 1;
flex-shrink: 0;
flex-basis: 33%;
<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

Here's an example of using max-width with your code. The first block will never be wider than 150px and text which which will overflow will be hidden.
.wrapper{
width:100%; background: black; display: flex; justify-content: space-around; text-align: center; color: white;
}
.wrapper > div{
flex: 1;
text-overflow:ellipsis;
overflow:hidden;
}
<div class="wrapper">
<div style="max-width: 150px">
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

Why won't my Jquery fade function work?

I'm new to Jquery and am trying to implement it into my website. I am trying to fadein (upwards) my first row of pictures when scrolling. But for some reason they will not scroll. Can't seem to find the solution, any help?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row js--wp-1">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3><span class="white">Conta</span><span class="black">ct Me</span></h3>
</div>
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop me a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</div>
</form>
</section>
<section class="copywrite">
<h6>Copywrite © 2016 built by Temple Cerulean Naylor</h6>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS:
body {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact-me {
background: linear-gradient(to right, black 50%, white 50%);
overflow-x: hidden;
}
h3 {
color: white;
text-align: center;
}
.white {
color: white;
font-family: 'Oswald', sans-serif;
font-size: 240%;
}
.black {
color: black;
font-family: 'Oswald', sans-serif;
font-size: 240%;
}
.contact-form {
width: 40%;
margin: 0 auto;
float: left;
padding-left: 8%;
padding-top: 4%;
padding-bottom: 4%;
}
input[type=text],
input[type=email],
select,textarea {
width: 100%;
padding: 7px;
border-radius: 3px;
border: 1px solid #e62222;
}
textarea {
height: 100px;
}
input[type=submit] {
background-color: #e62222;
border: 1px solid #e62222;
color: #fff;
margin-right: 15px;
border-radius: 5px;
}
input[type=submit]:hover,
input[type=submit]:active {
background-color: #e94141;
}
/* *:focus {outline: none;} */
/* ------Copywrite----- */
.copywrite {
margin-top: 25px;
margin-bottom: 25px;
}
.copywrite h6 {
text-align: center;
font-size: 150%;
}
/* -----ANIMATIONS-----*/
.js--wp-1 {
opacity: 0;
}
.js--wp-1.animated {
opacity: 1;
}
JavaScript:
$(document).ready(function() {
// SCROLL ------------------------
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
// GALLERY FADEIN ----------------
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
});

Try this:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
or
$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');
link:-Why doesn't jquery fadeIn() work with .html()?