Question

我负责清理我们公司网站的繁琐任务，在此期间我遇到了一个非常过时的jquery库和一个非常古老的jcarousel库。在更新两个库并重新编码jcarousel以使用更新的语法等时，我注意到我的轮播不再像之前那样显示分页列表的第一个元素，这意味着它从适当的图片开始并按预期工作但是下面的列表图片从2开始（所以不是说1 2 3 4 5它显示2 3 4 5并且一旦图片2变为活动但将永远显示1，将突出显示2）。这是我的代码的一部分

的index.html

<div class="jcarousel-wrapper">
    <div class="jcarousel">
        <ul>
            <li><a href="${base_url}/company.html"><img src="${base_url}/images/carousel/1CompSciHomeCarousel-company.png"  alt="company" /></a></li>
            <li><a href="${base_url}/auditpro.html"><img src="${base_url}/images/carousel/2CompSciHomeCarousel-audit.png" alt="audit|pro" /></a></li>
            <li><a href="${base_url}/ic.html"><img src="${base_url}/images/carousel/3CompSciHomeCarousel-iC.png" alt="iC" /></a></li>
            <li><a href="${base_url}/services.html"><img src="${base_url}/images/carousel/4CompSciHomeCarousel-services.png" alt="services" /></a></li>
            <li><a href="${base_url}/i16.html"><img src="${base_url}/images/carousel/5CompSciHomeCarousel-i16.png" alt="i16" /></a></li>
        </ul>
        <p class="jcarousel-pagination">

        </p>
    </div>
</div>

function.js

(function($) {
    $(function() {
        $('.jcarousel')
            .jcarousel({
                wrap: 'circular'
            })
            .jcarouselAutoscroll({
                interval: 4000,
                target: '+=1',
                autostart: true,
            });

        $('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });

        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .on('click', function(e) {
                e.preventDefault();
            })
            .jcarouselPagination({
                'item': function(page) {
                    return '<a href="#">' + page + '</a>';
                }
            });
    });
})(jQuery);

一如既往，非常感谢帮助。提前谢谢。

Answer 1

原来我的代码是正确的。这个问题在CSS中撒谎，其中填充元素正在推动图片后面的第一个数字，我无法看到它。

jcarousel-pagination没有显示我的轮播列表中的第一个数字

1 个答案: