Unslider jquery plugin arrow doesn't display

[jeffersonalomia]

Hello guys,

I have a problem on using the image slider plugin called "Unslider" which is a jquery plugin.
I follow all the procedures / instructions on how to set up the codes but sadly it seems that the next and preview button styling doesnt work even if i follow all the procedures on their documentation.

Can you please try this plugin on your test web page and see if the preview and next button on their slider become circle and has a value like this "<" " >".

Note : on my test web page the output is "next" and "prev". see the attach image

Here's the link to the plugin Click Here

Please help. thanks

[gentlemedia]

By default the arrows option is set to true, which means its shows the 'next' and 'prev' text links and not left & right arrows. Do you want left & right arrows instead of the text links, then you will have to put them in yourself either through CSS or as an object override via the arrows option. For the arrows you can use an icon font, an image or even just HTML symbols https://www.piliapp.com/symbol/).

[Bachu]

Try this
Click Here

[jeffersonalomia]

Thanks for our reply.

But, have you tried that solution? Is it working? Godbless

[gentlemedia]

Obviously I was not clear enough, but let me try again :)

Unslider has by default no left and right arrows, but 'next and 'prev' text links. Just like you have it in your image.
If you want to replace those text links with arrows then you have two options, but I will show you the easiest which is overwriting the object like this:

$(function() {
    $('.my-slider').unslider({
        arrows: {
            prev: '<a class="unslider-arrow prev">&#10094;</a>',
            next: '<a class="unslider-arrow next">&#10095;</a>'
        }
    });
});

For the sake of being lazy, I've used HTML symbols for the arrows. ❮ is a left arrow (bracket) and ❯ is a right arrow (bracket), but like I said you can also use an icon font or an SVG sprites image. Styling and positioning of the arrows you do with CSS.

.unslider-arrow {
    position:absolute;
    top: 45%;
    z-index:2;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    color: #f9f9f9;
    text-align: center;
    border-radius: 50%;
    background-color: #333;
    cursor:pointer;
}

.unslider-arrow.prev { left:20px }
.unslider-arrow.next { right:20px }

I was not really that lazy, because I even created a demo for you :)
http://projects.gentle.media/unslider/

[jeffersonalomia]

why does the click function on the arrow doesn't work on mine?

[gentlemedia]

why does the click function on the arrow doesn't work on mine?

Which arrow? Where's yours? Sorry, but my christal ball is at the dry cleaner.

[jeffersonalomia]

Thanks for helping, i have solve my problem and i use another plugin to make a slideshow and it is easy to debug and to alter. Thanks!!