javascript - 创建多个轮播时轮播 slider 滑动不正确

标签 javascript jquery html css

我有一个我刚刚创建的轮播 slider ，在创建多个轮播时滑动不正确。它应该只滑动一个。例如，如果我有一个旋转木马，则旋转木马会滑动一个。如果我必须显示轮播，它会滑动两次

当我根据显示的轮播数量滑动时，我似乎找不到我的代码中的错误。以下是我目前正在处理的代码示例。我的目标是让它只滑动 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;
}

最佳答案

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

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

这意味着在函数结束时，每个旋转木马的宽度设置为属于每个旋转木马的元素数。

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

这在尝试 move the carousel by a percentage (of its width) 时成为一个问题在 prev 和 next 点击事件期间(因为它的宽度是根据页面上的 total 轮播元素的数量设置的，即使是那些属于另一个轮播)。

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>

关于javascript - 创建多个轮播时轮播 slider 滑动不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46020531/

上一篇：html - 如果我为常见的 css 样式设置创建类并将它们分配给 html 元素，这是一个好习惯吗？

下一篇：html - 在手机的情况下想要相同的桌面div划分

相关文章：

javascript - Power bi Web 报告全屏显示

javascript - 处理 Ajax 调用期间丢失的图像资源

javascript - 是否有调试 jQuery 事件处理程序的工具/技术？

javascript - 如何从javascript中的数组中获取文本并将其附加到文本区域？

javascript - JS下拉菜单不起作用

css - HTML5 设备模型问题

javascript - 在 JavaScript 中，在函数作用域之外访问未声明的变量赋值？

javascript - 提取模板中 Django 模型特征的最小值和最大值

javascript - 在三重嵌套的 UL 元素上添加切换

javascript - 如何使用request.getParameterValues？

©2024 IT工具网  联系我们