prev/next buttons are hidden inside lSSlideWrapper

[code100]

I am trying to put prev/next button to be outside of the box, but they are not showing after I apply for following css.

.lSAction > .lSPrev{
    left:-30px;
}
.lSAction > .lSNext{
    right:-30px;
}

This is due to position:relative in following css, I am not sure if position: relative is necessary or it could be removed.

.lSSlideWrapper {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

[victornava]

Having the same problem here.

[candell]

It would be great to break the controls out of the parent div for placement outside of the scroller

[zanardigit]

This can be achieved with a little extra code.

1. Disable default controls generation:

   var slider = $('.lightslider-gallery').lightSlider({
   ...
   controls: false,
   ...
   });

2. Manually add controls wherever you want. I put them at the same level of the gallery target, i.e.:

   <div class="my-carousel">
   <div class="lSAction">
       <a class="lSPrev"></a>
       <a class="lSNext"></a>
   </div>
   <ul class="lightslider-gallery">
       <li>
           ....

   Note: by keeping the same class names, they will appear exactly as the default controls.

3. Manually add click handling:

   $('.lSAction > .lSPrev').click(function () {
   slider.goToPrevSlide();
   });
   $('.lSAction > .lSNext').click(function () {
   slider.goToNextSlide();
   });

4. Add styles as you like, e.g.:

   .lSAction > .lSPrev {
   left: -100px;
   }
   .lSAction > .lSNext {
   right: -100px;
   }

[suroviec]

Sorry, noob here... Where and how to add manualy click handling (3th point)?

$('.lSAction > .lSPrev').click(function () { slider.goToPrevSlide(); }); $('.lSAction > .lSNext').click(function () { slider.goToNextSlide(); });

[zanardigit]

@suroviec in the same JS file where you initialize the slider. Let's say you have your JS inline, something like this should be in your HTML:

<!-- jQuery included via CDN, but you can download and serve from your server -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- LightSlider included via CDN, but you can download and serve from your server -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>

<script type="text/javascript">
$(function() {

    // Init lightslider
    var slider = $('.lightslider-gallery').lightSlider({
        ...
        controls: false,
        ...
    });

    // Manually add click handlers
    $('.lSAction > .lSPrev').click(function () {
        slider.goToPrevSlide();
    });
    $('.lSAction > .lSNext').click(function () {
        slider.goToNextSlide();
    });
}
</script>

Hope this helps!

[suroviec]

Thank you very much! That works! I`m starting to learn JavaScript tommorow :)

[thdi]

Сorrect solution, in my opinion, is editing lightslider.js file:

replace it:

controls: function () {
    if (settings.controls) {
        $el.after('<div class="lSAction"><a class="lSPrev">' + settings.prevHtml + '</a><a class="lSNext">' + settings.nextHtml + '</a></div>');
        if (!settings.autoWidth) {
            if (length <= settings.item) {
                $slide.find('.lSAction').hide();
            }
        } else {
            if (refresh.calWidth(false) < elSize) {
                $slide.find('.lSAction').hide();
            }
        }
        $slide.find('.lSAction a').on('click', function (e) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
            if ($(this).attr('class') === 'lSPrev') {
                $el.goToPrevSlide();
            } else {
                $el.goToNextSlide();
            }
            return false;
        });
    }
},

on its:

controls: function () {
    if (settings.controls) {
        $el.parents('.lSSlideOuter').append('<div class="lSAction"><a class="lSPrev">' + settings.prevHtml + '</a><a class="lSNext">' + settings.nextHtml + '</a></div>');

        if (!settings.autoWidth) {
            if (length <= settings.item) {
                $slide.parents('.lSSlideOuter').find('.lSAction').hide();
            }
        } else {
            if (refresh.calWidth(false) < elSize) {
                $slide.parents('.lSSlideOuter').find('.lSAction').hide();
            }
        }

        $slide.parents('.lSSlideOuter').find('.lSAction a').on('click', function (e) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }

            if ($(this).attr('class') === 'lSPrev') {
                $el.goToPrevSlide();
            } else {
                $el.goToNextSlide();
            }
            return false;
        });
    }   
},

and add css:

.lSSlideOuter{
    overflow: visible;
}
.lSSlideWrapper{
    overflow: hidden;
}
.lSAction{
    position: relative;
}

[arisss1]

vladim you are the best!

[coax]

By far the easiest solution is to move .lSAction container after slider load, like this:

$('.light-slider').lightSlider({
    item: 3,
    pager: false,
    onSliderLoad: function (el) {
        var parent = el.parent();
        var action = parent.find('.lSAction');
        action.insertBefore(parent);
    }
});

After that, simply set .lSSlideOuter container to visible and position your left/right buttons in CSS:

.lSSlideOuter {
    overflow: visible;
}
...
.lSAction > .lSPrev {
    left: -32px;
    top: 50px;
}
.lSAction > .lSNext {
    right: -32px;
    top: 50px;
}

No source code changing or anything complicated.

[TJ-Nityo]

Simply we can override the Lightslider plugin CSS to :

.lSSlideOuter {
    position: relative;
    overflow: visible;
}

and override the position relative to static of .lSSlideWrapper.

.lSSlideWrapper {
    position: static;
}

[felipefont]

Hello friends, I'm noob, I'm trying to find the javascript file but I can't find it in my hosting files, I'm trying to index my website but google tells me to add href attribute in the links:

div.lSSlideOuter > div.lSSlideWrapper > div.lSAction > a.lSPrev

div.lSSlideOuter > div.lSSlideWrapper > div.lSAction > a.lSNext

I will appreciate someone who can help me please, good day. =)