Responsive Image Slider in HTML, CSS and JavaScript

-

Responsive Image Slider in HTML, CSS and JavaScript

Get Free JV Source Code: Responsive Image Slider

Today’s websites should not only be attractive to look, but also easy to navigate. Another key improvement option that can be used for boosting user experience is the integration of such special features as image sliders.

A Responsive Image Slider in HTML, CSS, JavaScript is a perfect and easy-to-use solution to enhance images in a modern and visually appealing manner and scale images depending on the display.

In this article, I’m going to give you the free source code for this visually appealing responsive image slider and show you how you can add it to your site.

Regardless if you are an experienced developer or being new in the field, this tutorial aims to aid you in creating a professional image slider.

Features

The source code for the Responsive Image Slider comes with several powerful features that make it an ideal choice for any website developer.

  • Fully Responsive Design: It is fully compatible with the mobile, tablet, and desktop and also, the slider adjust itself to different resolutions.
  • Cross-Browser Compatibility: It is also fully compatible with all modern browsers such as Chrome, Firefox, Safari, and Edge.
  • Easy Integration: It is quite possible to integrate the slider into any modern Content Management Systems, such as WordPress, Joomla or even the custom HTML-based interfaces.
  • Customizable: The code is well written and commented which gives a lot of flexibility to the users to modify it according to their requirements.

Technologies Used

The following technologies are used to build the Responsive Image Slider:

  • HTML
  • CSS
  • JavaScript

Video Preview

Steps to Build Image Slider

Follow these simple steps to design a cool image slider:

  • Create a Folder “Image Slider”: Folder that will store all the files required in making the slider.
  • Create a Subfolder “Images”: Saves all the images which you intend to display in this folder.
  • Create an “index.html” File: This file will contain all the HTML code of the slider.
  • Create a “style.css” File: This file will contain all the CSS style that would be needed in the designing of this responsive slider.
  • Create a “script.js” File: This file will contain the JavaScript code which has to be implemented for the slider.

To implement code you may need VS Code Installation.

HTML

The HTML code for the Responsive Image Slider is brief and defines the format of the slider.

<!DOCTYPE html><!-- JV Source Codes - www.jvcodes.com --><html lang="en"><head>  <!-- Metadata and Character Encoding -->  <meta charset="UTF-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <title>Responsive Image Slider in HTML, CSS, and JavaScript - JV Source Codes</title>    <!-- Google Fonts for Icons -->  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />    <!-- Custom Stylesheet -->  <link rel="stylesheet" href="style.css" />    <!-- Custom Script (Deferred Loading) -->  <script src="script.js" defer></script></head><body>  <!-- Container for Slider -->  <div class="container">    <div class="slider-wrapper">      <!-- Previous Slide Button -->      <button id="prev-slide" class="slide-button material-symbols-rounded">        chevron_left      </button>            <!-- Image List for Slider -->      <ul class="image-list">        <li><img class="image-item" src="images/book1.webp" alt="Book 1" /></li>        <li><img class="image-item" src="images/book2.webp" alt="Book 2" /></li>        <li><img class="image-item" src="images/book3.webp" alt="Book 3" /></li>        <li><img class="image-item" src="images/book4.webp" alt="Book 4" /></li>        <li><img class="image-item" src="images/book5.webp" alt="Book 5" /></li>        <li><img class="image-item" src="images/book6.webp" alt="Book 6" /></li>        <li><img class="image-item" src="images/book7.webp" alt="Book 7" /></li>        <li><img class="image-item" src="images/book8.webp" alt="Book 8" /></li>        <li><img class="image-item" src="images/book9.webp" alt="Book 9" /></li>        <li><img class="image-item" src="images/book10.webp" alt="Book 10" /></li>        <li><img class="image-item" src="images/book11.webp" alt="Book 11" /></li>        <li><img class="image-item" src="images/book12.webp" alt="Book 12" /></li>      </ul>            <!-- Next Slide Button -->      <button id="next-slide" class="slide-button material-symbols-rounded">        chevron_right      </button>    </div>        <!-- Scrollbar for Slider -->    <div class="slider-scrollbar">      <div class="scrollbar-track">        <div class="scrollbar-thumb"></div>      </div>    </div>  </div></body></html>

CSS

The CSS code formats the slider in such a way that makes it responsive in the various devices. This seems to be the most important part when it comes to the design of this Responsive Image Slider and its responsiveness.

/* Global Reset */* {  margin: 0;  padding: 0;  box-sizing: border-box;}body {  display: flex;  align-items: center;  justify-content: center;  min-height: 100vh;  background: #f1f4fd;}.container {  max-width: 1200px;  width: 95%;}.slider-wrapper {  position: relative;}.slider-wrapper .slide-button {  position: absolute;  top: 50%;  height: 50px;  width: 50px;  display: flex;  align-items: center;  justify-content: center;  font-size: 2.2rem;  color: #fff;  background: red; /* Button background color */  border: 2px solid royalblue; /* Royal blue border */  border-radius: 50%; /* Circular button */  cursor: pointer;  outline: none;  z-index: 5;  transform: translateY(-50%);}
.slider-wrapper .slide-button:hover {
  background: darkred; /* Darker red on hover */
}
/* Positioning Slide Buttons */
.slider-wrapper .slide-button#prev-slide {
  left: -25px; /* Left side positioning */
  display: flex;
}
.slider-wrapper .slide-button#next-slide {
  right: -25px; /* Right side positioning */
}
/* Image List Styles */
.slider-wrapper .image-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  margin-bottom: 30px;
  overflow-x: auto;
  font-size: 0;
  list-style: none;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
}
.slider-wrapper .image-list::-webkit-scrollbar {
  display: none; /* Hide scrollbar in WebKit browsers */
}
/* Image Item Styles */
.slider-wrapper .image-list .image-item {
  width: 300px;
  height: 450px;
  object-fit: cover;
}
/* Scrollbar Track and Thumb Styles */
.container .slider-scrollbar {
  display: flex;
  align-items: center;
  height: 24px;
  width: 100%;
}
.slider-scrollbar .scrollbar-track {
  background: #ccc;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  position: relative;
}
.slider-scrollbar:hover .scrollbar-track {
  height: 4px; /* Increase track height on hover */
}
.slider-scrollbar .scrollbar-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: red; /* Thumb color matches button */
  cursor: grab;
  border-radius: inherit;
}
.slider-scrollbar .scrollbar-thumb:active {
  cursor: grabbing;
  height: 8px; /* Increase thumb height on active */
  top: -2px;
}
.slider-scrollbar .scrollbar-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}
/* Responsive Styles for Mobile and Tablets */
@media only screen and (max-width: 1023px) {
  .slider-wrapper .slide-button {
    display: none !important; /* Hide slide buttons */
  }
  .slider-wrapper .image-list {
    gap: 10px;
    margin-bottom: 15px;
    scroll-snap-type: x mandatory; /* Snap scrolling */
  }
  .slider-wrapper .image-list .image-item {
    width: 280px;
    height: 380px;
  }
  .slider-scrollbar .scrollbar-thumb {
    width: 20%; /* Adjust thumb size on smaller screens */
  }
}
/* Image Hover Effect */
.slider-wrapper .image-list .image-item {
  width: 300px;
  height: 450px;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease; /* Smooth transition */
}
.slider-wrapper .image-list .image-item:hover {
  transform: scale(1.02); /* Slight enlargement */
  filter: grayscale(100%); /* Convert to grayscale */
}

JavaScript

JavaScript code enhances functionality of the Responsive Image Slider by creating the sliding feature and the functionality of interacting with the scrollbar.

const initSlider = () => {    // Select elements from the DOM    const imageList = document.querySelector(".slider-wrapper .image-list");    const slideButtons = document.querySelectorAll(".slider-wrapper .slide-button");    const sliderScrollbar = document.querySelector(".container .slider-scrollbar");    const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");    const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth;    scrollbarThumb.addEventListener("mousedown", (e) => {        const startX = e.clientX;        const thumbPosition = scrollbarThumb.offsetLeft;        const maxThumbPosition = sliderScrollbar.getBoundingClientRect().width - scrollbarThumb.offsetWidth;        const handleMouseMove = (e) => {            const deltaX = e.clientX - startX;            const newThumbPosition = thumbPosition + deltaX;            const boundedPosition = Math.max(0, Math.min(maxThumbPosition, newThumbPosition));            const scrollPosition = (boundedPosition / maxThumbPosition) * maxScrollLeft;            scrollbarThumb.style.left = `${boundedPosition}px`;            imageList.scrollLeft = scrollPosition;        }        const handleMouseUp = () => {            document.removeEventListener("mousemove", handleMouseMove);            document.removeEventListener("mouseup", handleMouseUp);        }        document.addEventListener("mousemove", handleMouseMove);        document.addEventListener("mouseup", handleMouseUp);    });    slideButtons.forEach(button => {        button.addEventListener("click", () => {            const direction = button.id === "prev-slide" ? -1 : 1;            const imageWidth = imageList.querySelector('.image-item').offsetWidth + 10; // Adjust for the gap            const scrollAmount = imageWidth * 2 * direction;             imageList.scrollBy({ left: scrollAmount, behavior: "smooth" });        });    });    const handleSlideButtons = () => {        slideButtons[0].style.display = imageList.scrollLeft <= 0 ? "none" : "flex";        slideButtons[1].style.display = imageList.scrollLeft >= maxScrollLeft ? "none" : "flex";    }    const updateScrollThumbPosition = () => {        const scrollPosition = imageList.scrollLeft;        const thumbPosition = (scrollPosition / maxScrollLeft) * (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth);        scrollbarThumb.style.left = `${thumbPosition}px`;    }    imageList.addEventListener("scroll", () => {        updateScrollThumbPosition();        handleSlideButtons();    });}window.addEventListener("resize", initSlider);window.addEventListener("load", initSlider);

Download Source Code

You can download the complete source code for the Responsive Image Slider from the button below. The use of this code is allowed and may be modified in any way without asking for permission or paying royalties for use of the code. All the files and images are provided to you to make the process as convenient as possible.

https://jvcodes.com/responsive-image-slider-in-html-css-and-javascript/

Conclusion

Responsive Image Slider in HTML, CSS, and JavaScript is an incredibly powerful and easy to use tool, which will be very useful for the design of your site. With this code, you can develop excellent image sliders that are compatible with all devices effortlessly.

You are welcome to use this code in your projects and it is encouraged that you acknowledge and link back to JV Source Codes to the original article. This helps support the creation of additional free resources.

Feel free to leave a comment below if you have any questions, I will respond to you. Please remember to LIKE this video and also SUBSCRIBE to our channel for more tutorials and valuable Assets.

Comments

Post a Comment

Popular posts from this blog

Top 10 Image Galleries in HTML, CSS, JavaScript for Your Web Projects

-
Image
  Top 10 Image Galleries in HTML, CSS, JavaScript for Your Web Projects Having an image gallery is a must when it comes to web design because the human brain is quite wired to understand pictures. HTML, CSS, and JavaScript are good technologies that help make great image galleries, appealing and adaptable. It doesn’t matter whether you’re designing a portfolio or a product catalog – these 10 image galleries are great for your web projects. List of Top 10 Image Galleries Here is the list of Top 10 Image Galleries for your project: 3D Rotating Image Gallery (HTML + CSS + JavaScript) Hexagon Image Gallery (HTML + CSS) Responsive Masonry Image Gallery (HTML + CSS) Responsive Filterable Image Gallery (HTML + CSS + JavaScript) Dynamic Image Gallery (HTML + CSS) Modern Image Gallery (HTML + CSS) Responsive Image Gallery (HTML + CSS) Popup Image Gallery (HTML + CSS + JavaScript) Smooth Quad Image Gallery (HTML + CSS + JavaScript) Sliding 3D Image Gallery (HTML + CSS + JavaScript)
Read more

HTML Tags and Attributes for beginners | Lesson 2

-
Image
HTML Tags and Attributes for beginners | Lesson 2 HTML which means HyperText Markup Language is the basic ingredient of the web and has been used for constructing the documents of the web through text structures like headings, paragraphs, lists, links, quotes, and many other things. Check detailed article: https://jvcodes.com/html-tags-and-attributes-for-beginners/ HTML is the easiest programming language to learn and thus is the first language that any developer to be ought to learn. Well, in this lesson, only the basic tags and attributes which are crucial for every web designer are described. At the end of this article, you should be in a position to apply these tags and their attributes to construct rudimentary web pages. What are HTML Tags and Attributes? Tags in HTML are used to build objects in an HTML document . These tags are enclosed in angle brackets < >. For example, the <p> tag can be used to define a paragraph of text Most of the HTML tags are pairs with an o
Read more

HTML Layout Techniques for beginners | Lesson 3

-
Image
  HTML Layout Techniques for beginners | Lesson 3 The mastery of HTML Layout Techniques is significant in any web development process to make attractive and organized web page. For the beginner out there, these technique are going to offer a good starting point on how to create well structured web page. Complete Article: HTML Layout Techniques for beginners This blog post will introduce you to the idea of HTML layout techniques, elements and tags: semantic and non-semantic tags, placing the content within the main container and working with anchor, image, div and span tags. What are HTML Layout Techniques? HTML Layout Techniques or site layout is the organization of page elements supported by the Document Type Definition (DTD) and the arrangement of frames within a website with tags and elements. HTML layout refers to the design and arrangement of content of a website with the use of HTML features. These techniques assist in development of an easy structure which leads to better user
Read more