DEV Community

Cover image for How To make Product slider using HTML5 CSS3 and JS?
Zain Muhammad
Zain Muhammad

Posted on

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>
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

dariel_vila_2d5ebae1c430f profile image

KaibanJS v0.10.1 is Here! Explore the New Tools 🚀

Dariel Vila -

leemeganj profile image

Enhancing two-way data binding in Angular

Megan Lee -

olga_tash profile image

SVAR Gantt: New Open Source, Interactive Gantt Chart for React

Olga T. -

gladiatorsbattle profile image

Transforming the Wall of Text: Modern Design with Glassmorphism, CSS Animations, and Typography

Gladiators Battle -