Frontend Bootcamp

Let's make a photo gallery. We have a bunch of cute dog photos (of my beloved pupper, Luna) that we want to show one at a time. So, using CSS and JavaScript together, how could we do that?

Here are some images of a dog if you need images, otherwise feel free to use whatever images you want!

Make a file called index.html, and put this in it:

<!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" />
    <title>Gallery</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="image-gallery">
      <img src="./images/1.jpg" alt="Luna" class="gallery-img active" />
      <img src="./images/2.jpg" alt="Luna" class="gallery-img" />
      <img src="./images/3.jpg" alt="Luna" class="gallery-img" />
      <img src="./images/4.jpg" alt="Luna" class="gallery-img" />
      <img src="./images/5.jpg" alt="Luna" class="gallery-img" />
      <img src="./images/6.jpg" alt="Luna" class="gallery-img" />
      <img src="./images/7.jpg" alt="Luna" class="gallery-img" />
      <img src="./images/8.jpg" alt="Luna" class="gallery-img" />
      <img src="./images/9.jpg" alt="Luna" class="gallery-img" />
      <img src="./images/10.jpg" alt="Luna" class="gallery-img" />
      <img src="./images/11.jpg" alt="Luna" class="gallery-img" />
    </div>
    <div class="btns">
      <button disabled="" class="btn prev">Prev</button>
      <button class="btn next">Next</button>
    </div>
    <script src="./gallery.js"></script>
  </body>
</html>

Make a styles.css file and put this in there:

* {
  box-sizing: border-box;
}
 
.gallery-img {
  display: none;
  max-height: 600px;
}
 
.active {
  display: block;
}
 
.image-gallery {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.btns {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.btn {
  background-color: #0074d9;
  color: white;
  font-size: 20px;
  padding: 5px 20px;
  border-color: transparent;
  border-radius: 5px;
  cursor: pointer;
}
 
.prev {
  margin-right: 15px;
}
 
.btn:disabled {
  background-color: #666;
  cursor: not-allowed;
}

Swiper

Swiper is a great library used on many websites, so let's try refactoring our app to use theirs instead of ours.

<!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" />
    <title>Gallery</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css"
    />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./images/1.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/2.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/3.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/4.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/5.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/6.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/7.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/8.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/9.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/10.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/11.jpg" alt="Luna" /></div>
        <div class="swiper-slide"><img src="./images/12.jpg" alt="Luna" /></div>
      </div>
    </div>
 
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script>
    <script src="./gallery.js"></script>
  </body>
</html>

Add this to your CSS

.swiper-slide {
  text-align: center;
}
 
img {
  height: 600px;
}

And change your JavaScript to this:

new Swiper(".swiper-container", {
  speed: 400,
  spaceBetween: 100,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});
  • We're loading new CSS and JS from a CDN, which stands for content delivery network. Basically, somewhere out on the Internet someone is kindly hosting these JavaScript files for us so we don't have to.
  • We're using the new keyword which we haven't previously. This more into object oriented programming and not common as much anymore in JavaScript. Suffice to say, for now you don't need to pay too much attention to it.
  • We did have to modify the HTML to accomodate how the JS works. That's fine.
  • Now we're using their JS and it looks amazing! Trying clicking and dragging, like you would on an smart phone. Works really well.

Let's go add some new options to it. Here is the documentation so you can see everything it does. It does a lot! Try experimenting!