Hide the slider carousel button when there are no items with bootstrap

Question

Good morning!

I need to lock the arrow on the left or hide the date and use only the right if there are elements. Once you use the right arrow because there were more hidden elements and it no longer has desahibilitarla elements that do not slip to continue the right arrow. The left arrow will return to the upper end. How is this possible when loading or javascript? Please help !!!: (

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

, SO , ( Fred K), .