Custom prev-next controls

[benoz23]

I'd like to change the prev-next controls icons. If i use nextHtml or prevHtml options for, le's say, add a Font Awesome element like <i class="fa fa-chevron-right"></i>, the result is my code wrapped inside the default div:

<div class="lg-prev lg-icon">
    <i class="fa fa-chevron-left"></i>
</div>

That means that the browser will display both icons, since the default one is called from lg-prev and lg-icon classes.

Is there a way to actually remove those default elements and show only custom ones?

[akolnati]

You can comment line 160 in file lightslider.css(background-image: url('../images/controls.png');)...This would remove the background image, just showing the custom icons. This change would be inside class .lSAction > a {

[rijosh]

Finally i found the solution. try this snippet

for more details find the link https://codepen.io/Rijosh/pen/xVoErM

[yacms]

` document.addEventListener('DOMContentLoaded', function(){ $(document).ready(function() { var EWOBIW = $('#EWOBIW').lightSlider({ gallery: false, item: 2, loop: true, slideMargin: 80, controls: false, enableDrag: false, thumbItem: 9, speed: 600, pager: true }); }, false);

        $('.lSAction .lSPrev').click(function() {
            EWOBIW.goToPrevSlide();
        });

        $('.lSAction .lSNext').click(function() {
            EWOBIW.goToNextSlide();
        });

    });
`

But if i click the next or prev button i always get an js error: Uncaught TypeError: EWOBIW.goToPrevSlide is not a function

Any idea rijosh?