Text Overlay Image Slider

Text Overlay Image Slider in HTML, CSS and JavaScript

Byjvcodes

Text overlay image slider in HTML, CSS, and JavaScript is an effective technique to create appealing images with textual descriptions. This type of slider increases the engaging factor of your site and looks professional at the same time.

In this article, I will include free source codes for the text overlay image slider interested readers can use. In this tutorial, we will explain how to create a simple slider with a good design that can be easily implemented and customized.

GitHub Source: Text Overlay Image Slider

Features

The Text Overlay Image Slider comes with several features that make it a versatile choice for modern websites:

  • Text Overlays: Every slide features on-screen text providing extra facts of the services provided on website.
  • Responsive Design: It is responsive in a sense that it can adjust its design depending on the available space not only in desktop computers but in other hand held devices as well.
  • Smooth Transitions: Get a professional look with smooth slide transitions and animations.
  • Easy Integration: Works with all the new-generation CMS platforms such as WordPress and can be implemented into custom HTML-based layouts.

Looking for free source codes for stunning image galleries? Explore these amazing options now!

Technologies Used

The Text Overlay Image Slider utilizes the following technologies:

  • HTML
  • CSS
  • JavaScript

Video Preview

Here is a short demo of what is the Text Overlay Image Slider:

Video thumbnail Watch on YouTube

Steps to Build Image Slider

Follow these simple steps to create your own Text Overlay Image Slider:

Create Project Folder: First of all, you need to create a folder on your computer under the name Image Slider.
Create Images Folder: To do so, create a new folder within the Image Slider folder and name it images, because that’s where the slider images will be stored.
Create index.html: You should create a file with the name index.html inside the Image Slider folder.
Create style.css: Now create style.css file inside project folder.
Create script.js: Finally, make the script.js to give function the slider.

To implement code you may need VS Code Installation.

HTML

Here is the HTML code for your index.html file.

<!DOCTYPE html>
<!-- JV Source Codes | www.jvcodes.com -->
<html lang="en">

<head>
  <!-- Meta Tags -->
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <!-- Page Title -->
  <title>Website Image Slider</title>
  
  <!-- Swiper's CSS for slider styling -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
  />
  
  <!-- Custom CSS for additional styling -->
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <!-- Main Section for the Image Slider -->
  <section class="main swiper mySwiper">
    <!-- Slider Wrapper to contain all slides -->
    <div class="wrapper swiper-wrapper">
      <!-- Slide 1 -->
      <div class="slide swiper-slide">
        <img src="images/pet5.jpg" alt="Horse" class="image" />
        <div class="image-data">
          <span class="text">Experience the beauty of horses.</span>
          <h2>Majestic Horses <br />In Their Natural Habitat</h2>
          <a href="#" class="button">Learn More</a>
        </div>
      </div>
      
      <!-- Slide 2 -->
      <div class="slide swiper-slide">
        <img src="images/pet8.jpg" alt="Dog and Cat" class="image" />
        <div class="image-data">
          <span class="text">Meet our beloved pets.</span>
          <h2>Dogs and Cats <br />Playing Together</h2>
          <a href="#" class="button">Meet Them</a>
        </div>
      </div>
      
      <!-- Slide 3 -->
      <div class="slide swiper-slide">
        <img src="images/pet3.jpg" alt="Parrot" class="image" />
        <div class="image-data">
          <span class="text">Colorful and vibrant personalities.</span>
          <h2>Exotic Parrots <br />In Full Splendor</h2>
          <a href="#" class="button">Discover More</a>
        </div>
      </div>
      
      <!-- Slide 4 -->
      <div class="slide swiper-slide">
        <img src="images/pet4.jpg" alt="Eagle" class="image" />
        <div class="image-data">
          <span class="text">The power of nature in flight.</span>
          <h2>Majestic Eagles <br />Soaring High</h2>
          <a href="#" class="button">Explore Eagles</a>
        </div>
      </div>
    </div>

    <!-- Navigation Buttons for Swiper -->
    <div class="swiper-button-next nav-btn"></div>
    <div class="swiper-button-prev nav-btn"></div>
    
    <!-- Pagination for Swiper -->
    <div class="swiper-pagination"></div>
  </section>

  <!-- Swiper JS Library -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  
  <!-- Custom JavaScript for initializing Swiper -->
  <script src="script.js" defer></script>
</body>

</html>

CSS

Here is the complete code for style.css file to style the slider.

/* Import Google Fonts - Lora */
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap");

/* Universal Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lora", serif; /* Changed font to Lora */
}

/* Main Section Styling */
.main {
  height: 100vh;
  width: 100%;
}

/* Wrapper and Slide Styling */
.wrapper,
.slide {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Hide Overflow in Slide */
.slide {
  overflow: hidden;
}

/* Overlay for Slide */
.slide::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
}

/* Image Styling */
.slide .image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Image Data Positioning and Styling */
.slide .image-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 100;
}

.image-data span.text {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

.image-data h2 {
  font-size: 56px;
  font-weight: 700; /* Increased font weight for emphasis */
  color: #fff;
}

/* Button Styling */
a.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 25px;
  color: #fff; /* Button text color */
  background: #d32f2f; /* Deep red background */
  text-decoration: none;
  margin-top: 25px;
  font-weight: 700; /* Bold button text */
  transition: all 0.3s ease;
}

a.button:hover {
  color: #fff;
  background-color: #b71c1c; /* Darker red on hover */
}

/* Swiper Navigation Button Styling */
.nav-btn {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Position Navigation Buttons */
.swiper-button-next {
  right: 50px;
}

.swiper-button-prev {
  left: 50px;
}

/* Swiper Navigation Icon Styling */
.nav-btn::before,
.nav-btn::after {
  font-size: 25px;
  color: #fff;
}

/* Pagination Bullets Styling */
.swiper-pagination-bullet {
  opacity: 1;
  height: 12px;
  width: 12px;
  background-color: #fff;
  visibility: hidden;
}

.swiper-pagination-bullet-active {
  border: 2px solid #fff;
  background-color: #d32f2f; /* Deep red for active bullet */
}

/* Responsive Design for Smaller Screens */
@media screen and (max-width: 768px) {
  .nav-btn {
    visibility: hidden;
  }

  .swiper-pagination-bullet {
    visibility: visible;
  }
}

JavaScript

The below JavaScript renders and manages transitions between two slides when the “Next” and “Prev” are pressed.

// Initialize Swiper with options
var swiper = new Swiper(".mySwiper", {
  // Number of slides to show at once
  slidesPerView: 1,

  // Enable infinite loop for continuous scrolling
  loop: true,

  // Configuration for pagination
  pagination: {
    el: ".swiper-pagination", // Selector for the pagination element
    clickable: true, // Allow pagination bullets to be clickable
  },

  // Configuration for navigation buttons
  navigation: {
    nextEl: ".swiper-button-next", // Selector for the "next" button element
    prevEl: ".swiper-button-prev", // Selector for the "previous" button element
  },
});

Download Source Code

The Source Codes for the Text Overlay Image Slider is also available for download free of charge. All the files, images in the package are arranged with no issue of copyright infringement. You are welcome to use the code in this article as is, or modify it as per your needs.

Download Source Code

Conclusion

The Text Overlay Image Slider in HTML, CSS, and JavaScript is a wonderful feature for any site. With the help of these steps and inserting the provided code, anyone will be ready to use it on your site.

Please remember to attribute JV Source Codes by providing links back to our website. In case of any problem or any ideas that you would like me to talk about, feel free to comment on this post. For more such tips and tutorial, you can always check out more of our videos.

Similar Posts

How to Create a Simple Sidebar Menu in HTML CSS JavaScript
| | |

Simple Sidebar Menu in HTML, CSS and JavaScript

Building a simple sidebar menu is an excellent idea that will allow adding valuable features and stunning looks to your website. A sidebar menu is useful for clients to find their way to different items without feeling that they are being given too many choices, thus, creating simplicity and order. Today, I’m going to share…

10 Free Responsive Navigation Bar Menus in HTML CSS & JavaScript
| | | |

10 Free Responsive Navigation Bar Menus in HTML CSS & JavaScript

A responsive navigation bar menu is a necessity to any website that intends to support navigation functionality across any web project. As the users visit websites on their mobile devices, tablets, laptops and desktops the navigation bar must therefore be capable of being compatible with the different screen sizes. In this article, we listed ten…

Navigation Bar with Indicator
| | |

Navigation Bar with Indicator in HTML, CSS and JavaScript

Navigation bar with indicator is one of the user friendly ways of presenting menu options on the website that improves general appearance of the navigation. It includes a bar that changes its position when a user navigates to various parts of the website by clicking on the corresponding menu item. In this tutorial, I am…

In this article, I have prepared the free source code for the neumorphic sidebar menu that may be easily adjusted and implemented on your website projects.
| | |

Neumorphism Side Bar Menu Using HTML and CSS

In web design the sidebar navigation is important as it offers users easy navigation and a more charismatic experience to users. Before you know it, we’re constantly learning something new like today’s feature a Neumorphism Side Bar Menu Using HTML and CSS. It gives the menu a soft, 3D look that is more engaging. In…

Leave a Reply

Your email address will not be published. Required fields are marked *