Smooth Image Slider JV Source Codes

Smooth Image Slider in HTML, CSS and JavaScript

Byjvcodes

Website design plays a crucial role in ensuring that people pay attention to the site and remain on the page. One of the features that can help beautify any website is a smooth image slider. Well In this article, I’m going to share with you free source codes to build the Smooth Image Slider in HTML, CSS, and JS. This slider will enable you to present images in a smooth and trendy style.

In this article, I am going to provide some insights on how developers, designers, and owners of websites can integrate a seamless image slider in a small blog or in any website projects.

Here is full tool project: Google Drive Direct Download Link Generator Tool

Features

The Smooth Image Slider has some wonderful features that are easy to implement for any type of website. Here are four standout features:

  • Seamless Image Transition: The slider minimizes transition between images making the transition very pleasing to the eyes.
  • Fully Responsive: Slider is also responsive meaning that the slider changes its size when the site is accessed with a tablet or a smartphone.
  • Compatible with All Modern CMS: This slider is fully compatible with WordPress, Joomla or custom HTML based web interface.
  • Customizable Design: Slider can be easily redesigned through CSS and JavaScript files.

Technologies Used

To build the Smooth Image Slider, following programming languages and technologies are used:

  • HTML (for the formation of the slider)
  • CSS (for styling the slider and making it responsive)
  • JavaScript (for smooth transitions and interactions)

Such technologies make it possible to have the slider fully functional and responsive to the current browsers and devices.

Want free codes for further image sliders? Dive in now!

Video Guide

Here is video tutorial to design slider:

Video thumbnail Watch on YouTube

Steps to Build Card

It is quite easy to build the Smooth Image Slider in HTML, CSS, and JS. Follow these steps to create the slider:

  • Create a Project Folder: The first step is to build a folder for the project. This folder will contain all the files that will make up the slider part of the site.
  • Create an Images Folder: In the project folder, create a new folder named “images” and this will be the place where you will find images for the slider.
  • Create an index.html File: This file will consist of HTML template of your slider.
  • Create a style.css File: In the CSS file, the styling and positioning of the slider will be done so that it would look good on any device.
  • Create a script.js File: This javascript file will consist of the code that will enable slider to work properly, including easy movements and any form of operation.

HTML

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

<!DOCTYPE html> 
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title of the web page -->
    <title>Smooth Image Slider - JV Source Code</title>

    <!-- Link to external CSS file -->
    <link rel="stylesheet" href="style.css">

    <!-- Include Font Awesome CDN for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!-- 
        Credits: JV Codes (jvcodes.com)
        Visit jvcodes.com to get more free jv source codes for your projects
    -->

</head>

<body>

    <!-- Main container for the image slider -->
    <div class="container">

        <!-- Slide container to hold individual items -->
        <div class="slide">

            <!-- Item 1: Mangoes -->
            <div class="item" style="background-image: url(images/image-1.jpg);">
                <div class="content">
                    <div class="name">Mangoes</div>
                    <div class="description">The sweet and tropical king of fruits.</div>
                    <button>See More</button>
                </div>
            </div>

            <!-- Item 2: Pineapples -->
            <div class="item" style="background-image: url(images/image-2.jpg);">
                <div class="content">
                    <div class="name">Pineapples</div>
                    <div class="description">A juicy tropical fruit with a tangy flavor.</div>
                    <button>See More</button>
                </div>
            </div>

            <!-- Item 3: Strawberries -->
            <div class="item" style="background-image: url(images/image-3.jpg);">
                <div class="content">
                    <div class="name">Strawberries</div>
                    <div class="description">Small, red berries with a sweet and tart taste.</div>
                    <button>See More</button>
                </div>
            </div>

            <!-- Item 4: Apples -->
            <div class="item" style="background-image: url(images/image-4.jpg);">
                <div class="content">
                    <div class="name">Apples</div>
                    <div class="description">Crisp and refreshing, a popular everyday fruit.</div>
                    <button>See More</button>
                </div>
            </div>

            <!-- Item 5: Watermelons -->
            <div class="item" style="background-image: url(images/image-5.jpg);">
                <div class="content">
                    <div class="name">Watermelons</div>
                    <div class="description">Large, juicy fruit perfect for a refreshing snack.</div>
                    <button>See More</button>
                </div>
            </div>

            <!-- Item 6: Grapes -->
            <div class="item" style="background-image: url(images/image-6.jpg);">
                <div class="content">
                    <div class="name">Grapes</div>
                    <div class="description">Small, sweet or tart fruits often eaten fresh or used in wine.</div>
                    <button>See More</button>
                </div>
            </div>

        </div> <!-- End of slide container -->

        <!-- Navigation buttons for the slider -->
        <div class="button">
            <button class="prev"><i class="fa-solid fa-arrow-left"></i></button>
            <button class="next"><i class="fa-solid fa-arrow-right"></i></button>
        </div>

    </div> <!-- End of container -->

    <!-- Link to external JavaScript file -->
    <script src="script.js"></script>

    <!-- 
        Credits: JV Codes (jvcodes.com)
        Visit jvcodes.com to get more free source codes for your projects
    -->

</body>

</html>

CSS

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

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styles */
body {
    background: #eaeaea;
    overflow: hidden;
}

/* Container Styles */
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 600px;
    background: #f5f5f5;
    box-shadow: 0 30px 50px #dbdbdb;
}

/* Slide Item Styles */
.container .slide .item {
    width: 200px;
    height: 300px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 20px;
    box-shadow: 0 30px 50px #505050;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
}

/* Positioning for Slide Items */
.slide .item:nth-child(1),
.slide .item:nth-child(2) {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
}

.slide .item:nth-child(3) {
    left: 50%;
}

.slide .item:nth-child(4) {
    left: calc(50% + 220px);
}

.slide .item:nth-child(5) {
    left: calc(50% + 440px);
}

/* Hide Items Beyond Certain Index */
.slide .item:nth-child(n + 6) {
    left: calc(50% + 660px);
    opacity: 0;
}

/* Content Inside Items */
.item .content {
    position: absolute;
    top: 50%;
    left: 100px;
    width: 300px;
    text-align: left;
    color: #eee;
    transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
}

/* Show Content for Specific Item */
.slide .item:nth-child(2) .content {
    display: block;
}

/* Content Text Styles */
.content .name {
    font-size: 40px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0;
    color: #000;
    animation: animate 1s ease-in-out 1 forwards;
}

.content .description {
    margin-top: 10px;
    margin-bottom: 20px;
    font-weight: bold;
    opacity: 0;
    color: #000;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
}

.content button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    opacity: 0;
    animation: animate 1s ease-in-out 0.6s 1 forwards;
}

/* Animation for Content */
@keyframes animate {
    from {
        opacity: 0;
        transform: translate(0, 100px);
        filter: blur(33px);
    }
    to {
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
}

/* Button Container Styles */
.button {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
}

/* Individual Buttons */
.button button {
    width: 40px;
    height: 35px;
    border-radius: 8px;
    border: 1px solid #000;
    cursor: pointer;
    margin: 0 5px;
    transition: 0.3s;
}

/* Button Hover Effect */
.button button:hover {
    background: #ababab;
    color: #fff;
}

JavaScript

Here is the complete code for script.js file to function the slider.

// Select the 'next' and 'prev' buttons
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');

// Event listener for the 'next' button
next.addEventListener('click', function() {
    // Select all items in the slide
    let items = document.querySelectorAll('.item');
    // Move the first item to the end of the slide
    document.querySelector('.slide').appendChild(items[0]);
});

// Event listener for the 'prev' button
prev.addEventListener('click', function() {
    // Select all items in the slide
    let items = document.querySelectorAll('.item');
    // Move the last item to the beginning of the slide
    document.querySelector('.slide').prepend(items[items.length - 1]);
});

Download Source Code

Below is the HTML/CSS/JS source code of Smooth Image Slider, which has been provided for free download. It means that the source code is 100% free from any copyright and you are able to download all the files required for the slider – including images. You are welcome to include it in your projects.

Download Source Code

Conclusion

To sum up, I want to say that Smooth Image Slider is one of the best and easy-to-implement code in your web page design. Save the provided source code, and it will only take you a few minutes to add a cool image slider to any website, even if you are using WordPress or even HTML based interface.

If you use this code, I would like to request to give credit to JV Source Codes by providing a link back to this website. If you have any problems with it, or ideas for changes, just let me know it in the comments section. Sounds good, I will be happy to help and don’t forget to subscribe my YouTube channel JV Codes.

Want free codes for stunning responsive cards? Dive in now!

Similar Posts

Quad Image Gallery
| |

Smooth Quad Image Gallery in HTML, CSS and JavaScript

When developing a webpage, it is always important to have image gallery which creates a good impression on the visitors. Today, I’m glad to present the Smooth Quad Image Gallery created in HTML, CSS, JavaScript. This elegant & optimized gallery is suitable for business and personal websites, and I’m giving you the complete source code…

Text Overlay Image Slider
| |

Text Overlay Image Slider in HTML, CSS and JavaScript

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…

Leave a Reply

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