I have left/right arrows that when clicked uses jQuery to move an element to the left/right.

How would I hide that left arrow element when the left position is <1?

I have tried this but it didn't work:

$('.arrow-left').toggle($('.sliding-element').curPos() < '1');

I have also tried this but it also didn't work.

if ($('.sliding-element').css("left") == 0) {
    $('.arrow-left').hide(); 
} else {
    $('.arrow-left').show();
}

I have added a runnable code snippet below. I just need the left/right buttons to hide depending on the position of the sliding-element.

Thank you

    jQuery(document).ready(function( $ ){

        $(".js-carousel").each(function(){
            var $carousel = $(this),
                $carouselContainer = $carousel.find(".books-container"),
                $carouselList = $carousel.find(".sliding-element"),
                $carouselItem = $carousel.find(".book"),
                $carouselButton = $carousel.find(".js-carousel-button"),
                setItemWidth = function(){
                    $carouselList.removeAttr("style");
                    var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
                    $carouselList.css("width", curWidth);
                },
                slide = function(){
                    var $button = $(this),
                        dir = $button.data("dir"),
                        curPos = parseInt($carouselList.css("left")) || 0,
                        moveto = 0,
                        containerWidth = $carouselContainer.outerWidth(),
                        listWidth = $carouselList.outerWidth(),
                        before = (curPos   containerWidth),
                        after = listWidth   (curPos - containerWidth);
                    if(dir=="next"){
                        moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
                    } else {
                        moveto = (before >= 0) ? 0 : curPos   containerWidth;
                    }
                    
                    
                    $carouselList.animate({
                        left: moveto
                    });
                };
            $(window).resize(function(){
                setItemWidth();
            });
            setItemWidth();
            
            $carouselButton.on("click", slide);
        
        
        /*THIS BIT HERE*/
            if ($('.sliding-element').css("left") == 0) {
               $('.arrow-left').hide(); 
            } else {
               $('.arrow-left').show();
            }
        
        
        
        
        });


    });

.books-container {
            overflow: hidden;
        }
        .sliding-element {
            position: relative;
            display: flex;
        }
        .book {
            padding: 1em;
        }   
        

        .arrows {
            position:relative;
            width: 100%;
        }
        
        .arrow-right {
            right: -5px;
        }
        .arrow-left {
            left: -5px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div >
    <div >

        <div >
        
        
            <div >
                <a href="#apage">
                    <p>Element 1</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 2</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 3</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 4</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 5</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 6</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 7</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 8</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 9</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 10</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 11</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 12</p>
                </a>
            </div>
            <div >
                <a href="#apage">
                    <p>Element 13</p>
                </a>
            </div>
            
            
        </div>
      
      <div >
                        <div  data-dir="prev">Left</div>
                        <div  data-dir="next">Right</div>
                    </div>

    </div>
    </div>

CodePudding user response：

$('.books-list').css("left") will be 0 when the animation finished. If you check earlier, the condition never will be true. Try with:

$carouselList.on('webkitAnimationEnd oanimationend msAnimationEnd animationend', 
    function(e) {
       // Check here your condition
    });

UPDATE

It's true, the event never fire. Try this (I checked, it's working). The function fire when the animation is completed.

      $carouselList.animate({
        left: moveto
      }, 400, function() {
        if (moveto == 0) {
          $('.arrow-left').hide(); 
        } else {
          $('.arrow-left').show();
        }
      });

You can use

$('.sliding-element').css("left") == '0px'

But including the units and maybe rem, em... instead of px. Having "moveto" variable available I prefer use it.