how can I make my image slider fade? (without Jquery)

Question

Here is my current slider it works fine but It'd like to add fade in every time the user clicks on the next or previous image. Is this possible without jquery?

Here is my code, I used sample images so that you can see an actual slider. Feel free to ask any clarifying questions, thank for your help in advance.

// getting items from the DOM
const menuButton = document.querySelector(".menuButton");
const menu = document.querySelector(".menu");
const myPortrait = document.querySelector(".myPortrait");
const menuItems = document.querySelector(".menuItems");
const navItem = document.querySelectorAll(".navItem");
const menuWrapper = document.querySelectorAll(".menuWrapper");
const photography = document.querySelector("#photography");

// Setting Initial State of Menue
let showMenu = false;

menuButton.addEventListener("click", openMenu);

function openMenu() {
  if (!showMenu) {
    menuButton.classList.add("close");
    menu.classList.add("show");
    menuWrapper.forEach(item => item.classList.add("show"));
    myPortrait.classList.add("show");
    menuItems.classList.add("show");
    navItem.forEach(item => item.classList.add("show"));
    photography.classList.add("show");
    //new menue state
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    menu.classList.remove("show");
    menuWrapper.forEach(item => item.classList.remove("show"));
    myPortrait.classList.remove("show");
    menuItems.classList.remove("show");
    navItem.forEach(item => item.classList.remove("show"));
    photography.classList.remove("show");

    //new menue state
    showMenu = false;
  }
}
//------------------------photography slide show---------------------------------
let slider = document.querySelectorAll(".imgWrapper");
leftArrow = document.querySelector(".leftArrow");
rightArrow = document.querySelector(".rightArrow");
current = 0;

//clears images
function reset() {
  for (let i = 0; i < slider.length; i++) {
    slider[i].style.display = "none";
  }
}
// starts slider
function startSlide() {
  reset();
  slider[0].style.display = "block";
}
// show slide left
function slideLeft() {
  reset();
  slider[current - 1].style.display = "block";
  current--;
}
// show slide right
function slideright() {
  reset();
  slider[current + 1].style.display = "block";
  current++;
}
//left arrow click
leftArrow.addEventListener("click", function() {
  if (current === 0) {
    current = slider.length;
  }
  slideLeft();
});
// right arrow click
rightArrow.addEventListener("click", function() {
  if (current === slider.length - 1) {
    current = -1;
  }
  slideright();
});
startSlide();

/*main.css*/
* {
  margin: 0;
  padding: 0;
}
/*---------BODY & BACKGROUND-----------*/
body {
  font-family: "Merienda";
  color: rgb(200, 150, 15);
  font-size: 0.8em;
  width: 100%;
  height: 100vh;
}
footer {
  height: 5vh;
  background-color: rgb(33, 33, 33);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
/*---------HEADING & MAIN SCREEN STUFF-----------*/
#home {
  background: linear-gradient(rgba(33, 33, 33, 0.9), rgba(33, 33, 33, 0.9)),
    url("/Images/Iphonexbackground.jpg");
  background-size: cover;
  width: 100%;
  height: calc(100vh - 20vh);
  padding-top: 15vh;
  display: flex;
  flex-flow: column;
  text-align: center;
}
.largeHeading {
  padding-bottom: 2vh;
}
.smallHeading {
  padding-bottom: 50vh;
}
.moe {
  color: white;
}
.social a {
  color: rgb(200, 150, 15);
}
.social a:hover {
  color: white;
  transition: all 0.5s ease-out;
}
/*------------------ROTATING MENU BUTTON----------------------*/
.menuButton {
  position: absolute;
  z-index: 3;
  right: 35px;
  top: 35px;
  cursor: pointer;
  transition: all 0.5s ease-out;
}
.buttonLine {
  width: 25px;
  height: 2px;
  background-color: white;
  margin: 0 0 5px 0;
  transition: all 0.5s ease-out;
}
.close > .buttonLine:nth-child(1) {
  transform: rotate(405deg) translate(5px, 5px);
}
.close > .buttonLine:nth-child(2) {
  opacity: 0;
}
.close > .buttonLine:nth-child(3) {
  transform: rotate(-405deg) translate(5px, -5px);
}
/*------------------------------FULL MENU----------------------------*/
.menu {
  width: 100vh;
}
/*Menu is closed by default*/
.menuWrapper {
  position: fixed;
  top: 0;
}
.show > .menuWrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}
/*----------------------PORTRAIT MENU-----------------------*/
/*handles image*/
.myPortrait {
  transform: translate3d(-100%, 0, 0);
}
.show > .portrait {
  width: 150px;
  height: 150px;
  background-image: url("/Images/Portrait.jpg");
  background-size: cover;
  border: 3px solid rgb(200, 150, 15);
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
}
.show > .myPortrait {
  visibility: visible;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  float: none;
  width: 100%;
  height: 35vh;
  overflow: hidden;
  background-color: rgb(33, 33, 33);
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
}
/*----------------------LINK MENU-----------------------*/
.navLink {
  color: rgb(200, 150, 15);
  text-decoration: none;
}
.current > a {
  color: white;
  font-size: 1.5em;
}
.navItem a:hover {
  color: white;
  font-size: 1.5em;
}
.menuItems {
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
}
.navItem {
  transform: translate3d(600px, 0, 0);
}
/*handles menue items*/
.show > .menuItems {
  visibility: visible;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  float: none;
  width: 100%;
  height: 65vh;
  overflow: hidden;
  background-color: rgb(33, 33, 33);
  list-style: none;
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
}
/*Delays each individual link movments
coming from the right side*/
.show > .navItem:nth-child(1) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.1s;
  color: brown;
}
.show > .navItem:nth-child(2) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.2s;
  color: brown;
}
.show > .navItem:nth-child(3) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.3s;
  color: brown;
}
.show > .navItem:nth-child(4) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.4s;
  color: brown;
}
.show > .navItem:nth-child(5) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.5s;
  color: brown;
}
.show > .navItem:nth-child(6) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.6s;
  color: brown;
}
.show > .navItem:nth-child(7) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.7s;
  color: brown;
}
.show > .navItem:nth-child(8) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.8s;
  color: brown;
}
.none {
  display: none;
}
/*photography.css*/
#photography {
  background-color: rgb(66, 66, 66);
  background-size: cover;
  max-width: 100%;
  height: calc(100vh - 15vh);
  max-height: 100vh;
  padding-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7em;
}
.photoHeading {
  text-decoration: none;
  color: rgb(200, 150, 15);
  padding-bottom: 10px;
}
.photoWork {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  overflow: scroll;
}
.photoWork a {
  text-decoration: none;
}
.gallary {
  background-color: rgb(33, 33, 33);
  color: silver;
  text-align: center;
  cursor: pointer;
}
.gallary img {
  max-width: 100%;
}
.gallaryDiscription {
  padding: 2px;
}
.gallary:hover {
  opacity: 0.5;
  transform: scale(1.015);
}
.photoSocial {
  padding: 10px;
}
.photoContainer {
  width: 90%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide {
  max-width: 98%;
  border: 2px solid white;
}
.photoContainer h3 {
  color: white;
  padding-top: 5px;
}
.show > .photoContainer > .arrow {
  display: none;
}
.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: 0px;
  width: 0;
  height: 0;
  border-style: solid;
}
.leftArrow {
  border-width: 30px 40px 30px 0;
  border-color: transparent rgba(255, 255, 255, 0.3) transparent transparent;
  left: 0;
  margin-left: 25px;
}
.rightArrow {
  border-width: 30px 0 40px 30px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
  right: 0;
  margin-right: 30px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Merienda"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="/CSS/main.css" />
    <link rel="stylesheet" href="/CSS/photography.css" />
    <link rel="stylesheet" href="/CSS/media.css" />
    <title>Mohamed Negm</title>
  </head>
  <body>
    <header>
      <div class="menuButton">
        <div class="buttonLine"></div>
        <div class="buttonLine"></div>
        <div class="buttonLine"></div>
      </div>
      <nav class="menu">
        <div class="menuWrapper">
          <div class="myPortrait"><div class="portrait"></div></div>
          <ul class="menuItems">
            <li class="navItem"><a href="/" class="navLink">HOME </a></li>
            <li class="navItem">
              <a href="about.html" class="navLink">ABOUT ME </a>
            </li>
            <li class="navItem">
              <a href="contact.html" class="navLink">CONTACT </a>
            </li>
            <li class="navItem">
              <a href="animationPortfolio.html" class="navLink"
                >ANIMATION PORTFOLIO
              </a>
            </li>
            <li class="navItem">
              <a href="developerPortfolio.html" class="navLink"
                >DEVELOPER PORTFOLIO
              </a>
            </li>
            <li class="navItem">
              <a href="educatorPortfolio.html" class="navLink"
                >EDUCATOR PORTFOLIO
              </a>
            </li>
            <li class="navItem current">
              <a href="photographyPortfolio.html" class="navLink"
                >PHOTOGRAPHY PORTFOLIO
              </a>
            </li>
            <li class="navItem">
              <a href="videographyPortfolio.html" class="navLink"
                >VIDEOGRAPHY PORTFOLIO
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <main id="photography">
      <a href="/Pages/photographyPortfolio.html" class="photoHeading"
        ><h1>PHOTOGRAPHY PORTFOLIO</h1></a
      >
      <div class="photoContainer">
        <div class="leftArrow arrow"></div>
        <div class="imgWrapper">
          <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="" class="slide" />
          <h3>Bugs Gallery: Image 1 / 3</h3>
        </div>
        <div class="imgWrapper">
          <img src="https://www.gstatic.com/webp/gallery/3.jpg" alt="" class="slide" />
          <h3>Bugs Gallery: Image 2 / 3</h3>
        </div>
        <div class="imgWrapper">
          <img src="https://www.gstatic.com/webp/gallery/5.jpg" alt="" class="slide" />
          <h3>Bugs Gallery: Image 3 / 3</h3>
        </div>
        <div class="rightArrow arrow"></div>
      </div>
      <div class="social photoSocial">
        <a
          href="https://www.linkedin.com/in/mohamed-negm-332299127/"
          target="_blank"
        >
          <i class="fab fa-linkedin fa-2x"></i
        ></a>
        <a href="https://github.com/moenegm" target="_blank">
          <i class="fab fa-github fa-2x"></i
        ></a>
        <a href="https://www.instagram.com/moe_negm/" target="_blank">
          <i class="fab fa-instagram fa-2x"></i
        ></a>
        <a
          href="https://www.youtube.com/channel/UCKZpp79IKpBMoG1C2Ufrmgw?view_as=subscriber"
          target="_blank"
        >
          <i class="fab fa-youtube fa-2x"></i
        ></a>
        <a
          href="https://www.facebook.com/Moeanegm?ref=bookmarks"
          target="_blank"
        >
          <i class="fab fa-facebook fa-2x"></i
        ></a>
      </div>
    </main>
    <footer>Copyright &copy; 2019</footer>
    <script src="/main.js"></script>
  </body>
</html>

Answer 1

You could use CSS Animations to fade in your images by adding the following:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.imgWrapper {
  animation: fadeIn 1s;
}

// getting items from the DOM
const menuButton = document.querySelector(".menuButton");
const menu = document.querySelector(".menu");
const myPortrait = document.querySelector(".myPortrait");
const menuItems = document.querySelector(".menuItems");
const navItem = document.querySelectorAll(".navItem");
const menuWrapper = document.querySelectorAll(".menuWrapper");
const photography = document.querySelector("#photography");

// Setting Initial State of Menue
let showMenu = false;

menuButton.addEventListener("click", openMenu);

function openMenu() {
  if (!showMenu) {
    menuButton.classList.add("close");
    menu.classList.add("show");
    menuWrapper.forEach(item => item.classList.add("show"));
    myPortrait.classList.add("show");
    menuItems.classList.add("show");
    navItem.forEach(item => item.classList.add("show"));
    photography.classList.add("show");
    //new menue state
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    menu.classList.remove("show");
    menuWrapper.forEach(item => item.classList.remove("show"));
    myPortrait.classList.remove("show");
    menuItems.classList.remove("show");
    navItem.forEach(item => item.classList.remove("show"));
    photography.classList.remove("show");

    //new menue state
    showMenu = false;
  }
}
//------------------------photography slide show---------------------------------
let slider = document.querySelectorAll(".imgWrapper");
leftArrow = document.querySelector(".leftArrow");
rightArrow = document.querySelector(".rightArrow");
current = 0;

//clears images
function reset() {
  for (let i = 0; i < slider.length; i++) {
    slider[i].style.display = "none";
  }
}
// starts slider
function startSlide() {
  reset();
  slider[0].style.display = "block";
}
// show slide left
function slideLeft() {
  reset();
  slider[current - 1].style.display = "block";
  current--;
}
// show slide right
function slideright() {
  reset();
  slider[current + 1].style.display = "block";
  current++;
}
//left arrow click
leftArrow.addEventListener("click", function() {
  if (current === 0) {
    current = slider.length;
  }
  slideLeft();
});
// right arrow click
rightArrow.addEventListener("click", function() {
  if (current === slider.length - 1) {
    current = -1;
  }
  slideright();
});
startSlide();

/*main.css*/
* {
  margin: 0;
  padding: 0;
}
/*---------BODY & BACKGROUND-----------*/
body {
  font-family: "Merienda";
  color: rgb(200, 150, 15);
  font-size: 0.8em;
  width: 100%;
  height: 100vh;
}
footer {
  height: 5vh;
  background-color: rgb(33, 33, 33);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
/*---------HEADING & MAIN SCREEN STUFF-----------*/
#home {
  background: linear-gradient(rgba(33, 33, 33, 0.9), rgba(33, 33, 33, 0.9)),
    url("/Images/Iphonexbackground.jpg");
  background-size: cover;
  width: 100%;
  height: calc(100vh - 20vh);
  padding-top: 15vh;
  display: flex;
  flex-flow: column;
  text-align: center;
}
.largeHeading {
  padding-bottom: 2vh;
}
.smallHeading {
  padding-bottom: 50vh;
}
.moe {
  color: white;
}
.social a {
  color: rgb(200, 150, 15);
}
.social a:hover {
  color: white;
  transition: all 0.5s ease-out;
}
/*------------------ROTATING MENU BUTTON----------------------*/
.menuButton {
  position: absolute;
  z-index: 3;
  right: 35px;
  top: 35px;
  cursor: pointer;
  transition: all 0.5s ease-out;
}
.buttonLine {
  width: 25px;
  height: 2px;
  background-color: white;
  margin: 0 0 5px 0;
  transition: all 0.5s ease-out;
}
.close > .buttonLine:nth-child(1) {
  transform: rotate(405deg) translate(5px, 5px);
}
.close > .buttonLine:nth-child(2) {
  opacity: 0;
}
.close > .buttonLine:nth-child(3) {
  transform: rotate(-405deg) translate(5px, -5px);
}
/*------------------------------FULL MENU----------------------------*/
.menu {
  width: 100vh;
}
/*Menu is closed by default*/
.menuWrapper {
  position: fixed;
  top: 0;
}
.show > .menuWrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}
/*----------------------PORTRAIT MENU-----------------------*/
/*handles image*/
.myPortrait {
  transform: translate3d(-100%, 0, 0);
}
.show > .portrait {
  width: 150px;
  height: 150px;
  background-image: url("/Images/Portrait.jpg");
  background-size: cover;
  border: 3px solid rgb(200, 150, 15);
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
}
.show > .myPortrait {
  visibility: visible;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  float: none;
  width: 100%;
  height: 35vh;
  overflow: hidden;
  background-color: rgb(33, 33, 33);
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
}
/*----------------------LINK MENU-----------------------*/
.navLink {
  color: rgb(200, 150, 15);
  text-decoration: none;
}
.current > a {
  color: white;
  font-size: 1.5em;
}
.navItem a:hover {
  color: white;
  font-size: 1.5em;
}
.menuItems {
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
}
.navItem {
  transform: translate3d(600px, 0, 0);
}
/*handles menue items*/
.show > .menuItems {
  visibility: visible;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  float: none;
  width: 100%;
  height: 65vh;
  overflow: hidden;
  background-color: rgb(33, 33, 33);
  list-style: none;
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
}
/*Delays each individual link movments
coming from the right side*/
.show > .navItem:nth-child(1) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.1s;
  color: brown;
}
.show > .navItem:nth-child(2) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.2s;
  color: brown;
}
.show > .navItem:nth-child(3) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.3s;
  color: brown;
}
.show > .navItem:nth-child(4) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.4s;
  color: brown;
}
.show > .navItem:nth-child(5) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.5s;
  color: brown;
}
.show > .navItem:nth-child(6) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.6s;
  color: brown;
}
.show > .navItem:nth-child(7) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.7s;
  color: brown;
}
.show > .navItem:nth-child(8) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.8s;
  color: brown;
}
.none {
  display: none;
}
/*photography.css*/
#photography {
  background-color: rgb(66, 66, 66);
  background-size: cover;
  max-width: 100%;
  height: calc(100vh - 15vh);
  max-height: 100vh;
  padding-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7em;
}
.photoHeading {
  text-decoration: none;
  color: rgb(200, 150, 15);
  padding-bottom: 10px;
}
.photoWork {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  overflow: scroll;
}
.photoWork a {
  text-decoration: none;
}
.gallary {
  background-color: rgb(33, 33, 33);
  color: silver;
  text-align: center;
  cursor: pointer;
}
.gallary img {
  max-width: 100%;
}
.gallaryDiscription {
  padding: 2px;
}
.gallary:hover {
  opacity: 0.5;
  transform: scale(1.015);
}
.photoSocial {
  padding: 10px;
}
.photoContainer {
  width: 90%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide {
  max-width: 98%;
  border: 2px solid white;
}
.photoContainer h3 {
  color: white;
  padding-top: 5px;
}
.show > .photoContainer > .arrow {
  display: none;
}
.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: 0px;
  width: 0;
  height: 0;
  border-style: solid;
}
.leftArrow {
  border-width: 30px 40px 30px 0;
  border-color: transparent rgba(255, 255, 255, 0.3) transparent transparent;
  left: 0;
  margin-left: 25px;
}
.rightArrow {
  border-width: 30px 0 40px 30px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
  right: 0;
  margin-right: 30px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.imgWrapper {
  animation: fadeIn 1s;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Merienda"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="/CSS/main.css" />
    <link rel="stylesheet" href="/CSS/photography.css" />
    <link rel="stylesheet" href="/CSS/media.css" />
    <title>Mohamed Negm</title>
  </head>
  <body>
    <header>
      <div class="menuButton">
        <div class="buttonLine"></div>
        <div class="buttonLine"></div>
        <div class="buttonLine"></div>
      </div>
      <nav class="menu">
        <div class="menuWrapper">
          <div class="myPortrait"><div class="portrait"></div></div>
          <ul class="menuItems">
            <li class="navItem"><a href="/" class="navLink">HOME </a></li>
            <li class="navItem">
              <a href="about.html" class="navLink">ABOUT ME </a>
            </li>
            <li class="navItem">
              <a href="contact.html" class="navLink">CONTACT </a>
            </li>
            <li class="navItem">
              <a href="animationPortfolio.html" class="navLink"
                >ANIMATION PORTFOLIO
              </a>
            </li>
            <li class="navItem">
              <a href="developerPortfolio.html" class="navLink"
                >DEVELOPER PORTFOLIO
              </a>
            </li>
            <li class="navItem">
              <a href="educatorPortfolio.html" class="navLink"
                >EDUCATOR PORTFOLIO
              </a>
            </li>
            <li class="navItem current">
              <a href="photographyPortfolio.html" class="navLink"
                >PHOTOGRAPHY PORTFOLIO
              </a>
            </li>
            <li class="navItem">
              <a href="videographyPortfolio.html" class="navLink"
                >VIDEOGRAPHY PORTFOLIO
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <main id="photography">
      <a href="/Pages/photographyPortfolio.html" class="photoHeading"
        ><h1>PHOTOGRAPHY PORTFOLIO</h1></a
      >
      <div class="photoContainer">
        <div class="leftArrow arrow"></div>
        <div class="imgWrapper">
          <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="" class="slide" />
          <h3>Bugs Gallery: Image 1 / 3</h3>
        </div>
        <div class="imgWrapper">
          <img src="https://www.gstatic.com/webp/gallery/3.jpg" alt="" class="slide" />
          <h3>Bugs Gallery: Image 2 / 3</h3>
        </div>
        <div class="imgWrapper">
          <img src="https://www.gstatic.com/webp/gallery/5.jpg" alt="" class="slide" />
          <h3>Bugs Gallery: Image 3 / 3</h3>
        </div>
        <div class="rightArrow arrow"></div>
      </div>
      <div class="social photoSocial">
        <a
          href="https://www.linkedin.com/in/mohamed-negm-332299127/"
          target="_blank"
        >
          <i class="fab fa-linkedin fa-2x"></i
        ></a>
        <a href="https://github.com/moenegm" target="_blank">
          <i class="fab fa-github fa-2x"></i
        ></a>
        <a href="https://www.instagram.com/moe_negm/" target="_blank">
          <i class="fab fa-instagram fa-2x"></i
        ></a>
        <a
          href="https://www.youtube.com/channel/UCKZpp79IKpBMoG1C2Ufrmgw?view_as=subscriber"
          target="_blank"
        >
          <i class="fab fa-youtube fa-2x"></i
        ></a>
        <a
          href="https://www.facebook.com/Moeanegm?ref=bookmarks"
          target="_blank"
        >
          <i class="fab fa-facebook fa-2x"></i
        ></a>
      </div>
    </main>
    <footer>Copyright &copy; 2019</footer>
    <script src="/main.js"></script>
  </body>
</html>