Configuring a carousel view that shows multiple elements at once [Vani - Enhance your coding expertise with Thenu Kaluarachchi on @onlycoders.net

1 year ago

#381991

Thenu Kaluarachchi

Configuring a carousel view that shows multiple elements at once [VanillaJS]

By multiple elements at once, I mean a carousel view like this one:

When there is only one element being shown at any time, I used the following equation to calculate the translation limit (the point at which the carousel should reset to its original position):

limit = (number of elements * width of one element) - (width of one element * number of elements visible at any one time)

This equation still works with multiple elements, but I don't know how to dynamically calculate the number of elements visible at any time, when there is a change in screen size.

Here is my current code:

    var num_featured = 6
    complete_width = 200+ 25*2
    const next_button_featured = document.querySelector('.actions.carousel.next')
    const carousel_featured = document.querySelector('.featured.carousel.inner')
    const carousel_featured_container = document.querySelector('.featured.carousel.outer')
    next_button_featured.addEventListener('click', () => {carousel_next_featured()})
    var translate_value  = 0
    function carousel_next_featured(){
        translate_value += complete_width
        if(translate_value >= complete_width*num_featured - complete_width*4 ){
            translate_value =0
        }
        carousel_featured.style.transform = 'translateX(-'+translate_value+'px)'
    }

    .featured.outer.container{ margin: 50px 0; width: 100%;}
    .featured.inner.container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .featured.title{
        width: 100%;
        margin-bottom: 20px;
    }
    .featured.title h2{ font-size: 30px}
    
        .featured.carousel.outer{
        min-height: 200px;
        width: 90%;
        overflow-x: hidden;
    }
    .featured.carousel.inner{
        display: flex;
        margin: 0 25px;
        transform: translateX(0);
        transition: transform 0.5s;
        width: min-content;
    }
    .featured.carousel.element.wrap{
        margin: 0 25px;
        height: 300px;
        width: 200px;
        background-color: black;
        flex-shrink: 0;
        flex-grow: 1;
    }

<div class="featured outer container">
    <div class="featured inner container">
        <div class="title outer featured center">
            <h2 class="title">Featured</h2>
        </div>
        <button class="featured carousel actions next">></button>
        <div class="featured carousel outer">
            <div class="featured carousel inner">
                <div class="featured carousel element wrap" style="background-color: red">
                </div>
                <div class="featured carousel element wrap">
                </div>
                <div class="featured carousel element wrap">
                </div>
                <div class="featured carousel element wrap">
                </div>
                <div class="featured carousel element wrap">
                </div>
                <div class="featured carousel element wrap" style="background-color: green">
                </div>
            </div>
        </div>
    </div>
</div>

As you can see, the carousel does not move to the right completely (the final element is green color). This code seems to work only at a screen size where there are 4 elements visible at any time (screen width ~ 1550px).

Possible solution

Would it be possible to scrap the equation model and try to do something like this?
if distance between the right corner of the inner carousel and outer container = (0) => return to the zero position

If so, how would I go about calculating the distance between the two corners?
Thanks.

javascript

html

css

carousel

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs