title: How to make a slider image gallery without jquery
body: <p>I'm trying to make a slider image gallery without using jquery. at the moment the slider works very nicely but the way i worked it is by having the images as a background, taking the full width of a div, this kind of looks weird on different devices. I want them to pop out of the page like a lightbox but without the use of jquery so that the images show with their normal width and height instead of being "covered" as a background to fill the div. I honestly couldn't find anything online so i'm posting this question here to see if anyone can help. Any feedback would be very much appreciated. </p>
  
  <p><strong>I realize that the images don't actually show but that's because I don't know how to upload them on the snippet tool</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 =&gt; item.classList.add("show"));
      myPortrait.classList.add("show");
      menuItems.classList.add("show");
      navItem.forEach(item =&gt; 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 =&gt; item.classList.remove("show"));
      myPortrait.classList.remove("show");
      menuItems.classList.remove("show");
      navItem.forEach(item =&gt; item.classList.remove("show"));
      photography.classList.remove("show");
  
      //new menue state
      showMenu = false;
    }
  }
  //------------------------photography slide show---------------------------------
  let slider = document.querySelectorAll(".slide");
  leftArrow = document.querySelector(".leftArrow");
  rightArrow = document.querySelector(".rightArrow");
  current = 0;
  
  //clears images
  function reset() {
    for (let i = 0; i &lt; 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();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* main.css */
  * {
    margin: 0;
    padding: 0;
  }
  /*---------BODY &amp; 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 &amp; 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 &gt; .buttonLine:nth-child(1) {
    transform: rotate(405deg) translate(5px, 5px);
  }
  .close &gt; .buttonLine:nth-child(2) {
    opacity: 0;
  }
  .close &gt; .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 &gt; .menuWrapper {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  /*----------------------PORTRAIT MENU-----------------------*/
  /*handles image*/
  .myPortrait {
    transform: translate3d(-100%, 0, 0);
  }
  .show &gt; .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 &gt; .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 &gt; 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 &gt; .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 &gt; .navItem:nth-child(1) {
    transform: translate3d(0, 0, 0);
    transition: all 0.5s ease-out;
    transition-delay: 0.1s;
    color: brown;
  }
  .show &gt; .navItem:nth-child(2) {
    transform: translate3d(0, 0, 0);
    transition: all 0.5s ease-out;
    transition-delay: 0.2s;
    color: brown;
  }
  .show &gt; .navItem:nth-child(3) {
    transform: translate3d(0, 0, 0);
    transition: all 0.5s ease-out;
    transition-delay: 0.3s;
    color: brown;
  }
  .show &gt; .navItem:nth-child(4) {
    transform: translate3d(0, 0, 0);
    transition: all 0.5s ease-out;
    transition-delay: 0.4s;
    color: brown;
  }
  .show &gt; .navItem:nth-child(5) {
    transform: translate3d(0, 0, 0);
    transition: all 0.5s ease-out;
    transition-delay: 0.5s;
    color: brown;
  }
  .show &gt; .navItem:nth-child(6) {
    transform: translate3d(0, 0, 0);
    transition: all 0.5s ease-out;
    transition-delay: 0.6s;
    color: brown;
  }
  .show &gt; .navItem:nth-child(7) {
    transform: translate3d(0, 0, 0);
    transition: all 0.5s ease-out;
    transition-delay: 0.7s;
    color: brown;
  }
  .show &gt; .navItem:nth-child(8) {
    transform: translate3d(0, 0, 0);
    transition: all 0.5s ease-out;
    transition-delay: 0.8s;
    color: brown;
  }
  
  /*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: 100vh;
    border: 2px solid white;
    overflow: scroll;
  }
  .slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .slide1 {
    background-image: url("/Images/Photography/Animal/FullAnimal-1.jpg");
  }
  .slide2 {
    background-image: url("/Images/Photography/Animal/FullAnimal-2.jpg");
  }
  .slide3 {
    background-image: url("/Images/Photography/Animal/FullAnimal-3.jpg");
  }
  .show &gt; .photoContainer &gt; .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;
  }
  /*
  .showImage img {
    width: 100%;
  }
  .gridImage img {
    width: 100%;
    height: calc(200px / 3);
  }
  .gridImage {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 33%);
  }
  */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
      &lt;link
        href="https://fonts.googleapis.com/css?family=Merienda"
        rel="stylesheet"
      /&gt;
      &lt;link
        rel="stylesheet"
        href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
        crossorigin="anonymous"
      /&gt;
      &lt;link rel="stylesheet" href="/CSS/main.css" /&gt;
      &lt;link rel="stylesheet" href="/CSS/photography.css" /&gt;
      &lt;link rel="stylesheet" href="/CSS/media.css" /&gt;
      &lt;title&gt;Mohamed Negm&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;header&gt;
        &lt;div class="menuButton"&gt;
          &lt;div class="buttonLine"&gt;&lt;/div&gt;
          &lt;div class="buttonLine"&gt;&lt;/div&gt;
          &lt;div class="buttonLine"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;nav class="menu"&gt;
          &lt;div class="menuWrapper"&gt;
            &lt;div class="myPortrait"&gt;&lt;div class="portrait"&gt;&lt;/div&gt;&lt;/div&gt;
            &lt;ul class="menuItems"&gt;
              &lt;li class="navItem"&gt;&lt;a href="/" class="navLink"&gt;HOME &lt;/a&gt;&lt;/li&gt;
              &lt;li class="navItem"&gt;
                &lt;a href="about.html" class="navLink"&gt;ABOUT ME &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="navItem"&gt;
                &lt;a href="contact.html" class="navLink"&gt;CONTACT &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="navItem"&gt;
                &lt;a href="animationPortfolio.html" class="navLink"
                  &gt;ANIMATION PORTFOLIO
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="navItem"&gt;
                &lt;a href="developerPortfolio.html" class="navLink"
                  &gt;DEVELOPER PORTFOLIO
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="navItem"&gt;
                &lt;a href="educatorPortfolio.html" class="navLink"
                  &gt;EDUCATOR PORTFOLIO
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="navItem current"&gt;
                &lt;a href="photographyPortfolio.html" class="navLink"
                  &gt;PHOTOGRAPHY PORTFOLIO
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="navItem"&gt;
                &lt;a href="videographyPortfolio.html" class="navLink"
                  &gt;VIDEOGRAPHY PORTFOLIO
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;main id="photography"&gt;
        &lt;a href="/Pages/photographyPortfolio.html" class="photoHeading"
          &gt;&lt;h1&gt;PHOTOGRAPHY PORTFOLIO&lt;/h1&gt;&lt;/a
        &gt;
        &lt;div class="photoContainer"&gt;
          &lt;div class="leftArrow arrow"&gt;&lt;/div&gt;
          &lt;div class="slide1 slide"&gt;&lt;/div&gt;
          &lt;div class="slide2 slide"&gt;&lt;/div&gt;
          &lt;div class="slide3 slide"&gt;&lt;/div&gt;
          &lt;div class="rightArrow arrow"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="social photoSocial"&gt;
          &lt;a
            href="https://www.linkedin.com/in/mohamed-negm-332299127/"
            target="_blank"
          &gt;
            &lt;i class="fab fa-linkedin fa-2x"&gt;&lt;/i
          &gt;&lt;/a&gt;
          &lt;a href="https://github.com/moenegm" target="_blank"&gt;
            &lt;i class="fab fa-github fa-2x"&gt;&lt;/i
          &gt;&lt;/a&gt;
          &lt;a href="https://www.instagram.com/moe_negm/" target="_blank"&gt;
            &lt;i class="fab fa-instagram fa-2x"&gt;&lt;/i
          &gt;&lt;/a&gt;
          &lt;a
            href="https://www.youtube.com/channel/UCKZpp79IKpBMoG1C2Ufrmgw?view_as=subscriber"
            target="_blank"
          &gt;
            &lt;i class="fab fa-youtube fa-2x"&gt;&lt;/i
          &gt;&lt;/a&gt;
          &lt;a
            href="https://www.facebook.com/Moeanegm?ref=bookmarks"
            target="_blank"
          &gt;
            &lt;i class="fab fa-facebook fa-2x"&gt;&lt;/i
          &gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/main&gt;
      &lt;footer&gt;Copyright &amp;copy; 2019&lt;/footer&gt;
      &lt;script src="/main.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>