Carousel Slider slides incorrectly when creating multiple carousel

Question

I have a carousel slider that I just created that slides incorrectly when creating multiple carousels. It suppose to only slide by one. For example if I have one carousel, the carousel slides by one. If I have to carousel shown it slides by two

I can't seem to find the fault in my code when it slides based on the number of carousels shown. Below is the sample of my code I'm currently working on. My objective is to make it slide only by 1.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.faculty-items li {
    height : 100px;
}

.faculty-items li:nth-child(odd) {
    background-color : grey;
}

.faculty-items li:nth-child(even) {
    background-color : aqua
}


.faculty-items {
    overflow   : hidden;
    position   : relative;
    right      : 0;
    display : flex;

    -webkit-transition: transform 0.3s linear;
}

.faculty-carousel .controls {
    display : block;
}

Moishe Lipsker · Accepted Answer

The issue seems to lie in the fCarousel function where profileCount is counting every item belonging to every carousel.

facultyPanel = $('.faculty-carousel .faculty-items li'),
profileCount = facultyPanel.length,

This means that at the end of the function, the width of each carousel is set to the number of items belonging to every carousel.

carousel.outerWidth( profilePanelSize * profileCount );
facultyPanel.outerWidth(profilePanelSize);

This becomes an issue when trying to move the carousel by a percentage (of its width) during the prev and next click events (being that its width is being set based on the number of total carousel items on the page, even those belonging to another carousel).

carousel.css('transform', 'translateX(' + transformPercentage + '% )');

Instead, you could iterate through each carousel (carouselWrapper) and set its width based on the number of items that it specifically has.

var viewPortSize        = $(window).width(),
    carouselWrapper = $('.faculty-carousel')
;

...

carouselWrapper.each(function(){
    var wrapper = $(this);
    // wrapper.attr('data-slide', '0');

    var facultyPanel = wrapper.find('.faculty-items li'),
    profileCount = facultyPanel.length,
    // activeSlide         = 0,
    carousel            = wrapper.find('.faculty-items');

    carousel.outerWidth( profilePanelSize * profileCount );
    facultyPanel.outerWidth(profilePanelSize);
    carousel.css('transform', 'translateX(' + 0 + '% )');
});

var activeSlide = 0;
$('.faculty-carousel').attr('data-slide', '0');



$('.prev').on('click', function(e) {
    event.stopPropagation();

    var carouselWrapper     = $(this).closest('.faculty-carousel'),
        facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
        facultyProfileCount = facultyProfilePanel.length,
        viewPortSize        = $(window).width(),
        carousel            = carouselWrapper.find('.faculty-items'),
        position            = 0,
        currentSlide        = parseInt(carouselWrapper.attr('data-slide'));

    // Check if data-slide attribute is greater than 0
    if (currentSlide > 0) {
        // Decremement current slide
        currentSlide--;
        // Assign CSS position to clicked slider
        var transformPercentage = -1 * currentSlide / facultyProfileCount * 100;
        carousel.css('transform', 'translateX(' + transformPercentage + '% )');

        // Update data-slide attribute
        carouselWrapper.attr('data-slide', currentSlide);
        activeSlide = currentSlide;
    }

});

$('.next').on('click', function(e) {
    event.stopPropagation();
    // store variable relevent to clicked slider

    var carouselWrapper     = $(this).closest('.faculty-carousel'),
        facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
        facultyProfileCount = facultyProfilePanel.length,
        viewPortSize   = $(window).width(),
        carousel = carouselWrapper.find('.faculty-items'),
        position = 0,
        currentSlide = parseInt(carouselWrapper.attr('data-slide'));

    // Check if dataslide is less than the total slides
    if (currentSlide < facultyProfileCount - 1) {
        // Increment current slide
        currentSlide++;
        // Assign CSS position to clicked slider
        var transformPercentage = -1 * currentSlide / facultyProfileCount * 100;
        carousel.css('transform', 'translateX(' + transformPercentage + '% )');

        // Update data-slide attribute
        carouselWrapper.attr('data-slide', currentSlide);
        activeSlide = currentSlide;
    }


})


function fCarousel() {

    // var activeSlide = 0;
    // $('.faculty-carousel').attr('data-slide', '0');


    var viewPortSize        = $(window).width(),
        carouselWrapper = $('.faculty-carousel')
    ;
    
    //Set Panel Size based on viewport

    if (viewPortSize <= 1920 ) {
        var profilePanelSize = viewPortSize / 5
    }


    if (viewPortSize < 1024 ) {
        var profilePanelSize = viewPortSize / 4
    }

    if (viewPortSize < 768 ) {
        var profilePanelSize = viewPortSize / 3
    } 

    if (viewPortSize < 480 ) {
        var profilePanelSize = viewPortSize
    }
    
    carouselWrapper.each(function(){
        var wrapper = $(this);
        // wrapper.attr('data-slide', '0');

        var facultyPanel = wrapper.find('.faculty-items li'),
        profileCount = facultyPanel.length,
        // activeSlide         = 0,
        carousel            = wrapper.find('.faculty-items');

        carousel.outerWidth( profilePanelSize * profileCount );
        facultyPanel.outerWidth(profilePanelSize);
        carousel.css('transform', 'translateX(' + 0 + '% )');
    });



}

$(document).ready(function() {
    fCarousel();
})

$(window).on('resize', function(){
    fCarousel();
})

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.faculty-items li {
    height : 100px;
}

.faculty-items li:nth-child(odd) {
    background-color : grey;
}

.faculty-items li:nth-child(even) {
    background-color : aqua
}


.faculty-items {
    overflow   : hidden;
    position   : relative;
    right      : 0;
    display : flex;

    -webkit-transition: transform 0.3s linear;
}

.faculty-carousel .controls {
    display : block;
}

Carousel Slider slides incorrectly when creating multiple carousel

Answers (1)

Related Questions