lightSlider - onSliderLoad: function - remove when resize window

Question

I have lightslider and load arrows in onSliderLoad: function. Code working but when resize window - arrows remove from html. What doing wrong?

Here is my code:

       var slider10 = $("#aplikacje").lightSlider({
            item: 1,
            autoWidth: false,
            slideMove: 1, // slidemove will be 1 if loop is true
            slideMargin: 0,
            addClass: '',
            mode: "slide",
            useCSS: true,
            cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
            easing: 'linear', //'for jquery animation',////

            speed: 1000, //ms'
            auto: false,
            loop: false,

            slideEndAnimation: true,
            pause: 4000,

            keyPress: false,
            controls: false,
            prevHtml: '',
            nextHtml: '',           
        
            pager: true,      
    
            onBeforeStart: function(el) {},
            onSliderLoad: function(el) {
                $('.slider-aplikacje .lSSlideOuter .lSPager').prepend('<button type="button" class="goToPrevSlide" id="goToPrevSlide10"><span class="icon-arrow-up"></span></button>');
                $('.slider-aplikacje .lSSlideOuter .lSPager').append('<button type="button" class="goToNextSlide" id="goToNextSlide10"><span class="icon-arrow-down"></span></button>');

            },
            onBeforeSlide: function(el) {},
            onAfterSlide: function(el) {},
            onBeforeNextSlide: function(el) {},
            onAfterSlide: function(el) {},
            onBeforePrevSlide: function(el) {}
        });
        $('.slider-aplikacje .lSSlideOuter .lSPager').on('click', '#goToNextSlide10', function() {
            slider10.goToNextSlide();
        });
        $('.slider-aplikacje .lSSlideOuter .lSPager').on('click', '#goToPrevSlide10', function() {
            slider10.goToPrevSlide();
        });

My question: how to make the arrows visible all the time?

Answer 1

The issue is that you were appending/prepending the buttons to a dynamic ul, that changes on resize, so it would recreate this each time on resize. Also button can not be a child element of this unordered list.

I simply added a new pager div and added everything in there. Use flex on this new pager element to align the children correctly.

       var slider10 = $("#aplikacje").lightSlider({
            item: 1,
            autoWidth: false,
            slideMove: 1, // slidemove will be 1 if loop is true
            slideMargin: 0,
            addClass: '',
            mode: "slide",
            useCSS: true,
            cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
            easing: 'linear', //'for jquery animation',////

            speed: 1000, //ms'
            auto: false,
            loop: false,

            slideEndAnimation: true,
            pause: 4000,

            keyPress: false,
            controls: false,
            prevHtml: '',
            nextHtml: '',           
        
            pager: true,      
    
            onBeforeStart: function(el) {},
            onSliderLoad: function(el) {
            $('#myPager').append($('.lSPager'));
            $('.lSSlideOuter').append($('#myPager'));
                $('#myPager').prepend('<button type="button" class="goToPrevSlide" id="goToPrevSlide10">prev</button>');
                $('#myPager').append('<button type="button" class="goToNextSlide" id="goToNextSlide10">next</button>');

            },
            onBeforeSlide: function(el) {},
            onAfterSlide: function(el) {},
            onBeforeNextSlide: function(el) {},
            onAfterSlide: function(el) {},
            onBeforePrevSlide: function(el) {}
        });
        $('#myPager').on('click', '#goToNextSlide10', function() {
            slider10.goToNextSlide();
        });
        $('#myPager').on('click', '#goToPrevSlide10', function() {
            slider10.goToPrevSlide();
        });

#aplikacje > div {
  line-height: 100px;
  background: #f1f1f1;
  text-align: center;
}
#myPager {
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" integrity="sha512-yJHCxhu8pTR7P2UgXFrHvLMniOAL5ET1f5Cj+/dzl+JIlGTh5Cz+IeklcXzMavKvXP8vXqKMQyZjscjf3ZDfGA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js" integrity="sha512-Gfrxsz93rxFuB7KSYlln3wFqBaXUc1jtt3dGCp+2jTb563qYvnUBM/GP2ZUtRC27STN/zUamFtVFAIsRFoT6/w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="aplikacje">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<div id="myPager"></div>