Published on

6 Easy Ways To Build A Click Through Image Gallery With Tailwind CSS Without Even Thinking About It

Tags
PagesSelectsWidget
Click through Image Gallery

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

This component shows a preview of the images in the gallery below the description bar and can be selected via a click or by using the buttons.

  • It can make the building process of Click through Image Gallery ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Click through Image Gallery component file.

Free download of the Click through Image Gallery's source code

<head>
  <style>
  /*each image is referenced twice in the HTML, but each image only needs to be updated in the CSS*/
  .image1 {
    content: url("https://randomwordgenerator.com/img/picture-generator/52e4d7434f51a914f1dc8460962e33791c3ad6e04e5074417d2c7ed09f4acc_640.jpg")
  }

  .image2 {
    content: url("https://randomwordgenerator.com/img/picture-generator/55e8d146425bb10ff3d8992cc12c30771037dbf852547848702a7fd19545_640.jpg")
  }

  .image3 {
    content: url("https://randomwordgenerator.com/img/picture-generator/55e8d24b4257ac14f1dc8460962e33791c3ad6e04e507440752972d3924cc6_640.jpg")
  }

  .image4 {
    content: url("https://randomwordgenerator.com/img/picture-generator/55e0d44b4b56a414f1dc8460962e33791c3ad6e04e5074417c2d78d2954bcd_640.jpg")
  }

  .image5 {
    content: url("https://randomwordgenerator.com/img/picture-generator/5ee3dc414954b10ff3d8992cc12c30771037dbf85254794e732f7ad7934e_640.jpg")
  }
	</style>
</head> 

<body>
  <section class="mx-auto max-w-2xl">
    <h2 class="text-4xl text-center tracking-wide font-extrabold font-serif leading-loose mb-2">Slideshow Gallery</h2>
    <div class="shadow-2xl relative">
      <!-- large image on slides -->
      <div class="mySlides hidden">
        <div class="image1 w-full object-cover"></div>
      </div>
      <div class="mySlides hidden">
        <div class="image2 w-full object-cover"></div>
      </div>
      <div class="mySlides hidden">
        <div class="image3 w-full object-cover"></div>
      </div>
      <div class="mySlides hidden">
        <div class="image4 w-full object-cover"></div>
      </div>
      <div class="mySlides hidden">
        <div class="image5 w-full object-cover"></div>
      </div>

      <!-- butttons -->
      <a class="absolute left-0 inset-y-0 flex items-center -mt-32 px-4 text-white hover:text-gray-800 cursor-pointer text-3xl font-extrabold" onclick="plusSlides(-1)">❮</a>
      <a class="absolute right-0 inset-y-0 flex items-center -mt-32 px-4 text-white hover:text-gray-800 cursor-pointer text-3xl font-extrabold" onclick="plusSlides(1)">❯</a>

      <!-- image description -->
      <div class="text-center text-white font-light tracking-wider bg-gray-800 py-2">
        <p id="caption"></p>
      </div>

      <!-- smaller images under description -->
      <div class="flex">
        <div>
          <img class="image1 description h-24 opacity-50 hover:opacity-100 cursor-pointer" src="#" onclick="currentSlide(1)" alt="Dog's Nose">
        </div>
        <div>
          <img class="image2 description h-24 opacity-50 hover:opacity-100 cursor-pointer" src="#" onclick="currentSlide(2)" alt="Lawnmower">
        </div>
        <div>
          <img class="image3 description h-24 opacity-50 hover:opacity-100 cursor-pointer" src="#" onclick="currentSlide(3)" alt="Globe">
        </div>
        <div>
          <img class="image4 description h-24 opacity-50 hover:opacity-100 cursor-pointer" src="#" onclick="currentSlide(4)" alt="Optical Illusion">
        </div>
        <div>
          <img class="image5 description h-24 opacity-50 hover:opacity-100 cursor-pointer" src="#" onclick="currentSlide(5)" alt="Lips">
        </div>
      </div>
    </div>
  </section>


  <script>
    //JS to switch slides and replace text in bar//
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("description");
      var captionText = document.getElementById("caption");
      if (n > slides.length) {
        slideIndex = 1
      }
      if (n < 1) {
        slideIndex = slides.length
      }
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" opacity-100", "");
      }
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className += " opacity-100";
      captionText.innerHTML = dots[slideIndex - 1].alt;
    }
  </script>
</body>

Install tailwind css of verion 1.6.2

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.6.2

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">
  • mx-auto
  • max-w-2xl
  • text-4xl
  • text-center
  • mb-2
  • relative
  • hidden
  • w-full
  • absolute
  • left-0
  • flex
  • -mt-32
  • px-4
  • text-white
  • hover:text-gray-800
  • text-3xl
  • right-0
  • bg-gray-800
  • py-2
  • h-24

  1. Control the horizontal margin of an element to auto using the mx-auto utilities.

  2. Set the maximum width/height of an element using the max-w-2xl utilities.

  3. Control the text color of an element to 4xl using the text-4xl utilities.

  4. Control the text color of an element to center using the text-center utilities.

  5. Control the margin on bottom side of an element to 0.5rem using the mb-2 utilities.

  6. Use relative to position an element according to the normal flow of the document.

  7. Use hidden to set an element to display: none and remove it from the page layout.

  8. Use w-full to set an element to a 100% based width.

  9. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  10. Use the left-0 utilities to set the left position of a positioned element to 0rem.

  11. Use flex to create a block-level flex container.

  12. Control the margin on top side of an element to -8rem using the -mt-32 utilities.

  13. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  14. Control the text color of an element to white using the text-white utilities.

  15. Control the text color of an element to gray-800 on hover using the hover:text-gray-800 utilities.

  16. Control the text color of an element to 3xl using the text-3xl utilities.

  17. Use the right-0 utilities to set the right position of a positioned element to 0rem.

  18. Control the background color of an element to gray-800 using the bg-gray-800 utilities.

  19. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  20. Use h-24 to set an element to a fixed height(6rem).

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to build a Click through Image Gallery components, learn and follow along to implement your own components.