jCarousel图像标题不显示

时间:2014-09-02 08:50:39

标签: jquery jcarousel

我在我的网站上使用jCaraousel来显示带有简短描述的广告。图像工作正常但由于某种原因文本没有显示,它看起来像这样:

enter image description here

按钮允许您在图像之间来回滚动,但标签不会显示。

这是html:

<script type="text/javascript" src="/Custom/Supabets/Scripts/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="/Custom/Supabets/Scripts/jquery.jcarousel-autoscroll.min.js"></script>
<script type="text/javascript" src="/Custom/Supabets/Scripts/jquery.jcarousel-control.min.js"></script>
<script type="text/javascript" src="/Custom/Supabets/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Custom/Supabets/Scripts/Supabets.js"></script>

<div class="homecontent" id="content">
    <div class="wrapper">
        <div class="banner-carousel">
            <ul>
                <li id="banner-1"><a href="/Account/NewUser.aspx" target="_top">
                    <img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_3EasySteps.png" />
                </a></li>
                <li id="banner-2"><a href="/Pages/Promotion/Sport" target="_top">
                    <img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_MultipleBetSpecial.png" />
                </a></li>
                <li id="banner-3"><a href="/Pages/Promotion/Sport" target="_top">
                    <img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_MoneyBackBonus.png" />
                </a></li>
                <li id="banner-4"><a href="/Pages/Promotion/Sport" target="_top">
                    <img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_RegistrationBonus.png" />
                </a></li>
                <li id="banner-5"><a href="/Pages/Promotion/Sport" target="_top">
                    <img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_FreeDelivery.png" />
                </a></li>
                <li id="banner-6"><a href="/Pages/Promotion/Sport" target="_top">
                    <img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_SuggestionBonus.png" />
                </a></li>
                <li id="banner-7"><a href="/Pages/Promotion/Sport" target="_top">
                    <img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_BuyBackBonus.png" />
                </a></li>
                <li id="banner-8"><a href="/Pages/Promotion/Sport" target="_top">
                    <img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_MobileVouchers.png" />
                </a></li>                
<!--                <li id="banner-9"><a href="/Pages/Promotion/Sport" target="_top">
                    <img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_MobileVouchers.png" />
                </a></li>-->
            </ul>
            <div class="banner-carousel-controls">
                <div class="carousel-label display-inline-block">
                    <div class="banner-control banner-control-1">
                        <h2>
                            <a href="/Account/NewUser.aspx" target="_top">Easy Registration</a></h2>
                        <p>
                            Three easy Steps!</p>
                        <a href="/Account/NewUser.aspx" target="_top">Read more ...</a></div>
                    <div class="banner-control banner-control-2">
                        <h2>
                            <a href="/Pages/Promotion/Sport" target="_top">Multiple Special</a></h2>
                        <p>
                            Gives you more winnings!</p>
                        <a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
                    <div class="banner-control banner-control-3">
                        <h2>
                            <a href="/Pages/Promotion/Sport" target="_top">Money Back
                                Bonus</a></h2>
                        <p>
                            We give back!</p>
                        <a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
                    <div class="banner-control banner-control-4">
                        <h2>
                            <a href="/Pages/Promotion/Sport" target="_top">Registration
                                Bonus</a></h2>
                        <p>
                            50% extra!</p>
                        <a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
                    <div class="banner-control banner-control-5">
                        <h2>
                            <a href="/Pages/Promotion/Sport" target="_top">Free delivery</a></h2>
                        <p>
                            We deliver to your door!</p>
                        <a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
                    <div class="banner-control banner-control-6">
                        <h2>
                            <a href="/Pages/Promotion/Sport" target="_top">Bonus Suggestion</a></h2>
                        <p>
                            We want your help!</p>
                        <a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
                    <div class="banner-control banner-control-7">
                        <h2>
                            <a href="/Pages/Promotion/Sport" target="_top">Buy Back Bonuses</a></h2>
                        <p>
                            We will do a buy-back!</p>
                        <a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
                    <div class="banner-control banner-control-8">
                        <h2>
                            <a href="/Pages/Promotion/Sport" target="_top">Mobile Vouchers</a></h2>
                        <p>
                            Loaded on Your Mobile!</p>
                        <a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
                    <!--<div class="banner-control banner-control-9">
                        <h2>
                            <a href="http://ls.betradar.com/ls/livescore/?/supabets/en/page/worldcup_single" target="_top">World Cup</a></h2>
                        <p>
                            Win Big in Brazil!</p>
                        <a href="http://ls.betradar.com/ls/livescore/?/supabets/en/page/worldcup_single" target="_top">Read more ...</a></div>-->
                </div>
                <div class="carousel-controls display-inline-block">
                    <a class="jcarousel-next" href="#">
                        <img src="/Custom/Supabets/Images/btn-arrow-up.png" />
                    </a><a class="jcarousel-prev" href="#">
                        <img src="/Custom/Supabets/Images/btn-arrow-down.png" />
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

和jQuery:

$('.banner-carousel').jcarousel({
    'wrap' : 'circular',
    'animation' : 'slow'
})

$('#packagegallery').on('create.jcarousel', function(event, carousel) {
    SecretSojourns.packageGalleryAnchor = $(this).children('ul').children('li').first().children('a')
}).jcarousel({
    'wrap': 'circular',
    'animation': 'slow'
});

$('.banner-carousel').delegate('li', 'itemvisiblein.jcarousel', function(event, carousel) {
    var itemIndex = $(this).attr('id').substr(7);
    $('.banner-control').hide();
    $('.banner-control-' + itemIndex).show();
});

$('#packagegallery').delegate('li', 'itemvisiblein.jcarousel', function(event, carousel) {
    SecretSojourns.packageGalleryAnchor = $(this).find('a');
});

$('.popular-packages-carousel').jcarousel({
    'wrap' : 'circular',
    'animation' : 'slow'
})

$('.jcarousel-prev').jcarouselControl({
    target: '-=1'
});

$('.jcarousel-next').jcarouselControl({
    target: '+=1'
});

0 个答案:

没有答案