Question

早上好!!

我需要阻止左侧的箭头或隐藏日期，如果有元素则只使用右侧。有一次你使用右箭头＆＃34;因为有更多的隐藏元素＆＃34;并没有更多的元素desahibilitarla不会滑动继续做右箭头。左箭头返回顶部停留。可以使用bootstrap或javascript？请帮忙！！！：（

enter image description here

       <%
    // final List<String> articlesMarkup = ContentListWebContexts.getArticlesMarkup(renderRequest);
    final List<String> articlesMarkupPrestatges = ContentListWebContexts.getArticlesMarkup(renderRequest);

    final ContentListPreferences prefs = ContentListWebContexts.getContentListPrefs(renderRequest);

    final String viewAllFullFriendlyUrl = prefs.getViewAllPageFullUrl(themeDisplay);

    // pageContext.setAttribute( "articlesMarkup", articlesMarkup );
    pageContext.setAttribute( "articlesMarkupPrestatges", articlesMarkupPrestatges );
    pageContext.setAttribute( "viewAllFullFriendlyUrl", viewAllFullFriendlyUrl);
    %>

    <%-- Vista, propiamente dicha --%>

    <c:choose>
        <c:when test="${empty articlesMarkupPrestatges}">
            <p><liferay-ui:message key="contentlist.view.noarticles" /></p>
        </c:when>
        <c:otherwise>
            <%
    //          String friendlyURL = themeDisplay.getLayout().getFriendlyURL();
    //          String currentUrl = URLDecoder.decode(themeDisplay.getURLCurrent(),"UTF-8");
    //          String homeUrl = themeDisplay.getURLHome();
    //          int startIndex = 1;
            %>

            <div class="seccionTitular margenSup">
                <h1 class="two">
    <!--            <div class="masInfoTitular"></div> -->
                <span><liferay-ui:message key="contentlist.view.title.prestatges" /></span>
                <div class="rayaTitularPrestatges pull-left"></div>
                <div class="rayaTitularPrestatges pull-right"></div>
                </h1>
            </div>
<div class="wrapper-prestatges rowPrestatges">

            <div class="jcarousel-wrapper-prestatges">
                <div class="jcarousel-prestatges">
                    <ul id="ulPrestatges">
                    <c:forEach var="articleMarkupPrestatges" items="${articlesMarkupPrestatges}" varStatus="loop">
                        <li>${articleMarkupPrestatges}</li>
                    </c:forEach>
                    </ul>
                </div>

                <a href="#" class="jcarousel-control-prev-prestatges left carousel-control pruebaAddClass"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> <span class="sr-only">Previous</span></a>
                <a href="#" class="jcarousel-control-next-prestatges right carousel-control"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> <span class="sr-only">Next</span></a>

<!--                <p class="jcarousel-pagination-prestatges"></p> -->
            </div>
        </div>
        <script type="text/javascript">
        (function($) {

            $(function() {
                var jcarousel = $('.jcarousel-prestatges');
                var perPageValue = $(this);

                jcarousel
                    .on('jcarousel:reload jcarousel:create', function () {

                        var carouselPrestatges = $(this);
                        var widthWindow = window.innerWidth;

                        carouselPrestatges.css('width', '100%');
                        var widthCarouselPrestatges = carouselPrestatges.innerWidth();
                        carouselPrestatges.css('width', widthCarouselPrestatges + 'px');

                        if (widthWindow >= 1200) {
                            widthCarouselPrestatges = widthCarouselPrestatges / 7;
                            perPageValue = 7;
                        } else if (widthWindow >= 992) {
                            widthCarouselPrestatges = widthCarouselPrestatges / 5;
                            perPageValue = 5;
                        } else if (widthWindow >= 768) {
                            widthCarouselPrestatges = widthCarouselPrestatges / 3;
                            perPageValue = 3;
                        } else {
                            perPageValue = 1;
                        }

                        carouselPrestatges.jcarousel('items').css('width', Math.ceil(widthCarouselPrestatges) + 'px');
                        $('#ulPrestatges').css('width', '20000em');                     

                    $('.jcarousel-control-prev-prestatges')
                        .jcarouselControl({
                            target: '-=' + perPageValue
                        });

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

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

                    })
                    .jcarousel({
                        wrap: null,
                    });

            });
        })(jqCarrusel);
        var left = $('.jcarousel-prestatges ul').css('left');
        var posicion = "inicio"; // podria ser necesaria?
        $('.jcarousel-control-prev-prestatges')
        .click(function () {
            left = $('.jcarousel-prestatges ul').css('left');
            if (left == "0px" || left == "auto") {
                $('.jcarousel-control-prev-prestatges').addClass('pruebaAddClass');
            } else {
                $('.jcarousel-control-prev-prestatges').removeClass('pruebaAddClass');
                $('.jcarousel-control-prev-prestatges').addClass('aaa');
            };
        });
        $('.jcarousel-control-next-prestatges')
        .click(function () {
            left = $('.jcarousel-prestatges ul').css('left');
            if (left == "0px" || left == "auto") {
                $('.jcarousel-control-prev-prestatges').addClass('avanzaAddClass');
                $('.jcarousel-control-prev-prestatges').removeClass('pruebaAddClass');
            };
        });
        </script>
   </c:otherwise>
</c:choose>

Answer 1

我认为这可能被认为是一个重复的问题（特别是因为此问题的OP也有多个轮播）：bootstrap carousel hide controls on first and last

然而，通过在SO和互联网上进行一些搜索，我能够找到一个出色的blog post（也由Fred K引用），它可以很好地解释这一点。

当没有更多带有引导程序的元素时，隐藏滑块轮播按钮

1 个答案: