How To make Product slider using HTML5 CSS3 and JS?

#html #css #javascript #webdev

Now a days as a frontend Developer I need to designed most of slider for WooComerce Websites .Some of Developer use the Extensive libraries of js and css to Develop the Slider which affect the Performance and page speeds.so I designed a custom slider with less and actual code of HTML5 CSS3 and JS.


<style>
.med-related-prod-wrap{
    margin: 40px 16px 0px 16px;
}
.med-related-prod-wrap .related-prod-heading{
    margin: 0px;
    font-size: 18px;
}
.med-related-prod-wrap .med-rel-prod-slider{
    display: flex;
    column-gap: 8px;
    margin-top: 20px;
    overflow: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    scroll-behavior: smooth;
}
.med-related-prod-wrap .med-rel-prod-slider::-webkit-scrollbar {
    display: none;
}
.med-slider-arrow-section{
    display: none;
    align-items: center;
    justify-content: end;
    margin-top: 40px;
    column-gap:10px;
}
.med-slider-arrow{
    --size: 30px;
    z-index: 9;
    background: #ffffff;
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
    -webkit-transition: opacity .5s,visibility .5s;
    transition: opacity .5s,visibility .5s;
    border: 1px solid #dfe1e5;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 4px 8px 0 rgb(0 0 0 / 20%);
    padding: 0;
    transform: translate(0,-50%);
    cursor: pointer;
    outline: 0!important;
    transition: 0.2s ease-in-out;
}
.med-slider-arrow:after {
    background-image:  url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 16px;
    content: '';
    width: var(--size);
    height: var(--size);
    display: block;
    background-repeat: no-repeat;
    background-position: 49% 50%;
    transform:rotate(180deg);
}
.med-slider-arrow.btn-left{
    display: none;
}
.med-slider-arrow.med-slider-next:after{
    transform:rotate(360deg);
}
.med-rel-prod-slider .med-product-card{
    display: inline-grid;
    grid-auto-rows: min-content auto;
    padding: 32px 12px;
    background: #FFFFFF;
    border: 1px solid #E5E5F0;
    border-radius: 15px;
    width: 224px;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
}
.med-rel-prod-slider .med-product-card:hover .related-prod-img{
    transform: scale(1.1);
}
.med-product-card .related-prod-wrapper{
    height: 140px;
    width: 100%;
    overflow: hidden;
}
.related-prod-wrapper .related-prod-img{
    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: 0.5s all ease-in-out;
}
.med-product-card .rel-med-name{
    font-size: 24px;
    padding-top: 32px;
    color: #232426;
}
.med-product-card .rel-no-of-tab{
    color: #878787;
    font-size: 18px;
}
.med-product-card .rel-company-name{
    color: #232426;
    font-size: 14px;
    text-decoration: underline;
    font-weight: 600;
}
.med-product-card .rel-prod-price{
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 0px;
}
.med-product-card .related-prod-detail{
    margin-top:auto;
}
@media (min-width: 992px){
.med-related-prod-wrap{
    margin: 0px 0px 50px 0px;
}
.med-related-prod-wrap .related-prod-heading{
    margin: 0px;
    font-size: 26px;
}
.med-related-prod-wrap .med-rel-prod-slider{
    margin-top: 40px;
}
.med-slider-arrow-section{
    display: flex;
}
}
</style>

<div class="med-related-prod-wrap" id="med-related-prod-wrapper">
    <h2 class="related-prod-heading">Related products</h2>
    <div class="med-rel-prod-slider-wrapper">
        <div class="med-rel-prod-slider carousel-content">

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

        </div>
        <div class="med-slider-arrow-section">
            <button class="med-slider-prev med-slider-arrow btn-left" aria-label="left-arrow" onclick="" id="med-btn-left" type="button"></button>
            <button class="med-slider-next med-slider-arrow btn-right" aria-label="right-arrow" onclick="" id="med-btn-right" type="button"></button>
        </div>
    </div>
</div>

<script>
    const bindCarouselEvents = (containerId) => {
        const wrapper = document.getElementById(containerId);
        const btn_left = wrapper.getElementsByClassName('btn-left')[0]
        const btn_right = wrapper.getElementsByClassName('btn-right')[0]
        const content = wrapper.getElementsByClassName('carousel-content')[0]
        const content_scroll_width = content.scrollWidth;
        let content_scoll_left = content.scrollLeft;
        if (btn_right) {
            btn_right.addEventListener('click', () => {
                content_scoll_left += 224;
                if (content_scoll_left >= content_scroll_width) { 
                    content_scoll_left = content_scroll_width;
                }
                content.scrollLeft = content_scoll_left;
            });
        }
        if (btn_left) {
            btn_left.addEventListener('click', () => {
                content_scoll_left -= 224;
                content.scrollLeft = content_scoll_left;
            });
        }

        // scroll binding
        content.addEventListener('scroll', () => {
            let scrollLeft = Math.ceil(content.scrollLeft)
            let contentScrollWidth = content.scrollWidth
            let contentWidth = content.clientWidth
            let rightEdge = (contentScrollWidth - contentWidth)
            if (scrollLeft >= rightEdge) {
                btn_right.style.display = "none"
            } else if (scrollLeft < rightEdge) {
                btn_right.style.display = "block"
            }

            if (scrollLeft == 0) {
                btn_left.style.display = "none"
            } else if (scrollLeft > 0) {
                btn_left.style.display = "block"
            }

            content_scoll_left = scrollLeft
        });
    }

    // javascript for scroll on click
    window.addEventListener('DOMContentLoaded', function(){
        bindCarouselEvents('med-related-prod-wrapper')
    });
    </script>

DEV Community

How To make Product slider using HTML5 CSS3 and JS?

Top comments (0)

Read next

RAG Chatbot

🌐 SSH Tunneling: Securely Connect to Remote Networks Like a Pro

Testing LLM Applications: Misadventures in Mocking SDKs vs Direct HTTP Requests

Inside JavaScript Engines: How Browsers Bring Your Code to Life