创建多个轮播时，Carousel Slider滑动不正确

Question

我有一个我刚创建的旋转木马滑块，在创建多个旋转木马时滑动不正确。它假设只滑动一个。例如，如果我有一个旋转木马，旋转木马会滑动一个。如果我必须将旋转木马显示为滑动两个

根据所显示的轮播数量滑动时，我似乎无法在代码中找到错误。下面是我正在处理的代码示例。我的目标是让它只滑动1。

<div class="faculty-carousel">
    <ul class="faculty-items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

    <div class="controls">
        <div class="prev">
        prev
        </div>

        <div class="next">
        next
        </div>
    </div>
</div>


<div class="faculty-carousel">
    <ul class="faculty-items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

    <div class="controls">
        <div class="prev">
        prev
        </div>

        <div class="next">
        next
        </div>
    </div>
</div>

<div class="faculty-carousel">
    <ul class="faculty-items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

    <div class="controls">
        <div class="prev">
        prev
        </div>

        <div class="next">
        next
        </div>
    </div>
</div>

<script type="text/javascript">


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;
    }

    console.log('prev');

});

$('.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;
    }

    console.log('next');


})


function fCarousel() {

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


    var viewPortSize        = $(window).width(),
        facultyPanel = $('.faculty-carousel .faculty-items li'),
        profileCount = facultyPanel.length,
        // activeSlide         = 0,
        carousel            = $('.faculty-carousel .faculty-items');

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

    //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
    }

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

}

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

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

</script>

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;
}

Answer 1

问题似乎在于fCarousel函数，其中profileCount正在计算属于每个轮播的每个项目。

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

这意味着在函数结束时，每个轮播的宽度设置为属于每个轮播的项目数。

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

在prev和next点击事件期间尝试move the carousel by a percentage (of its width)时，这会成为问题（因为其宽度是根据总数页面上的轮播项目，甚至是属于另一个轮播的项目。）

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

相反，您可以遍历每个轮播（carouselWrapper）并根据 特定的项目数设置其宽度。

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faculty-carousel">
    <ul class="faculty-items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

    <div class="controls">
        <div class="prev">
        prev
        </div>

        <div class="next">
        next
        </div>
    </div>
</div>


<div class="faculty-carousel">
    <ul class="faculty-items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

    <div class="controls">
        <div class="prev">
        prev
        </div>

        <div class="next">
        next
        </div>
    </div>
</div>

<div class="faculty-carousel">
    <ul class="faculty-items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

    <div class="controls">
        <div class="prev">
        prev
        </div>

        <div class="next">
        next
        </div>
    </div>
</div>