How to use custom arrows in jQuery slick slider using CSS in ASP.Net

Hi jordan,

The code you have shared doesnt contains the design which displays the arrow as showed in your image.

<script src="js/jssor.slider-22.2.8.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jssor_1_slider_init = function () {

            var jssor_1_options = {
                $AutoPlay: true,
                $SlideDuration: 800,
                $SlideEasing: $Jease$.$OutQuint,
                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$
                },
                $BulletNavigatorOptions: {
                    $Class: $JssorBulletNavigator$
                }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            /*responsive code begin*/
            /*you can remove responsive code if you don't want the slider scales while window resizing*/
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 1920);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            /*responsive code end*/
        };
    </script>

 <style>
        /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05
        {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av
        {
            position: absolute; /* size of bullet elment */
            width: 16px;
            height: 16px;
            background: url('images/b05.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb05 div
        {
            background-position: -7px -7px;
        }
        .jssorb05 div:hover, .jssorb05 .av:hover
        {
            background-position: -37px -7px;
        }
        .jssorb05 .av
        {
            background-position: -67px -7px;
        }
        .jssorb05 .dn, .jssorb05 .dn:hover
        {
            background-position: -97px -7px;
        }
        
        /* jssor slider arrow navigator skin 22 css */
        /*
        .jssora22l                  (normal)
        .jssora22r                  (normal)
        .jssora22l:hover            (normal mouseover)
        .jssora22r:hover            (normal mouseover)
        .jssora22l.jssora22ldn      (mousedown)
        .jssora22r.jssora22rdn      (mousedown)
        .jssora22l.jssora22lds      (disabled)
        .jssora22r.jssora22rds      (disabled)
        */
        .jssora22l, .jssora22r
        {
            display: block;
            position: absolute; /* size of arrow element */
            width: 40px;
            height: 58px;
            cursor: pointer;
            background: url('images/a22.png') center center no-repeat;
            overflow: hidden;
        }
        .jssora22l
        {
            background-position: -10px -31px;
        }
        .jssora22r
        {
            background-position: -70px -31px;
        }
        .jssora22l:hover
        {
            background-position: -130px -31px;
        }
        .jssora22r:hover
        {
            background-position: -190px -31px;
        }
        .jssora22l.jssora22ldn
        {
            background-position: -250px -31px;
        }
        .jssora22r.jssora22rdn
        {
            background-position: -310px -31px;
        }
        .jssora22l.jssora22lds
        {
            background-position: -10px -31px;
            opacity: .3;
            pointer-events: none;
        }
        .jssora22r.jssora22rds
        {
            background-position: -70px -31px;
            opacity: .3;
            pointer-events: none;
        }

 <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px;
        width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position: absolute; top: 0px; left: 0px; background-color: rgba(0,0,0,0.7);">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
                top: 0px; left: 0px; width: 100%; height: 100%;">
            </div>
            <div style="position: absolute; display: block; background: url('images/loading.gif') no-repeat center center;
                top: 0px; left: 0px; width: 100%; height: 100%;">
            </div>
        </div>
        <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px;
            width: 1300px; height: 500px; overflow: hidden;">
            <div>
                <img data-u="image" src="images/mrshoes/3209.jpg" style="width: 1300px; height: 568.75px;
                    top: -34.375px; left: 0px; display: inline;" />
            </div>
            <div>
                <img data-u="image" src="images/mrshoes/3211.JPG" style="width: 1300px; height: 568.75px;
                    top: -34.375px; left: 0px; display: inline;" />
            </div>
            <div>
                <img data-u="image" src="images/mrshoes/3212.JPG" style="width: 1300px; height: 568.75px;
                    top: -34.375px; left: 0px; display: inline;" />
            </div>
            <div>
                <img data-u="image" src="images/mrshoes/3213.JPG" style="width: 1300px; height: 568.75px;
                    top: -34.375px; left: 0px; display: inline;" />
            </div>
            <div>
                <img data-u="image" src="images/mrshoes/3214.JPG" style="width: 1300px; height: 568.75px;
                    top: -34.375px; left: 0px; display: inline;" />
            </div>
        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb05" style="bottom: 16px; right: 16px;" data-autocenter="1">
            <!-- bullet navigator item prototype -->
            <div data-u="prototype" style="width: 16px; height: 16px;">
            </div>
        </div>
        <!-- Arrow Navigator -->
        <span data-u="arrowleft" class="jssora22l" style="top: 0px; left: 8px; width: 40px;
            height: 58px;" data-autocenter="2"></span><span data-u="arrowright" class="jssora22r"
                style="top: 0px; right: 8px; width: 40px; height: 58px;" data-autocenter="2">
        </span>
    </div>
    <script type="text/javascript">        jssor_1_slider_init();</script>
    <!-- #endregion Jssor Slider End -->

Hi jordan,

Refer below link

http://stackoverflow.com/questions/24403196/jssor-slider-navigator-arrows-not-working-outside-of-the-slider-in-safari

using y code it disply like this and and everyhing is woeking on it but i want to change thing is i dont want circle  i just want arrow this is my design 

instead of this i want like this  only i want to change is that white color round

 .specialslier .slick-prev
        {
            right: 62px;
            left: inherit;
        }
        .specialslier .slick-prev, .specialslier .slick-next
        {
            top: -30px;
            right: 10px;
            position: absolute;
            border-top: solid 2px #777;
        }
        .slick-prev, .slick-next
        {
            font-size: 0;
            line-height: 0;
            position: absolute;
            top: 50%;
            display: block;
            height: 40px;
            width: 40px;
            padding: 0;
            margin-top: -10px\9;
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            cursor: pointer;
            border: none;
            outline: none;
            z-index: 9999999999;
            background: rgb(255, 255, 255);
            border-radius: 100%;
        }
        .slick-prev, .slick-next
        {
            font-size: 0;
            line-height: 0;
            position: absolute;
            top: 50%;
            display: block;
            height: 40px;
            width: 40px;
            padding: 0;
            margin-top: -10px\9;
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            cursor: pointer;
            border: none;
            outline: none;
            z-index: 9999999999;
            background: rgb(255, 255, 255);
            border-radius: 100%;
        }
        button, select
        {
            text-transform: none;
        }
        .slick-prev, .slick-next
        {
            font-size: 0;
            line-height: 0; /* position: absolute; */
            top: -18%;
            display: block;
            height: 24px;
            width: 23px;
            padding: 0;
            margin-top: -10px\9;
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            cursor: pointer;
            border: none;
            outline: none;
            z-index: 9999999999;
            background: black;
            border-radius: 11%;
            margin-left: 855px;
            margin-right: 27px;
        }
        .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus
        {
            color: transparent;
            outline: none;
            background: #31708f;
        }
        .slick-prev:before, .slick-next:before
        {
            font-family: 'slick';
            font-size: 21px;
            line-height: 1;
            opacity: .75;
            color:White;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        

div align="center">
            <div style="width: 900px; border-radius: 10px; padding-left: 20px;">
                <h3 style="text-align: center; font-size: larger; text-decoration: underline; margin-top: 27px;
                    margin: 33px;">
                    SPORT SHOES
                </h3>
                <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous"
                    role="button" style="display: block;">

                   
                    Previous
                </button>
                <button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next"
                    role="button" style="display: block;">
                    
                    Next</button>
                <hr style="color: Black;" />
                <div id="Div2" class="multiples" runat="server">
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px; height: 207px;">
                        <img style="height: 150px;" src="images/mrshoes/Max-Air-Springblade-Running-Shoes-Black-orange.jpg"
                            alt="" />
                        <asp:Label ID="Label2" Text="NIKE RUN DARK GREEN .." runat="server" Style="font-size: small;" />
                        <br />
                        <asp:Label ID="Label21" Text="RS 2000" runat="server" Style="color: Red; font-size: small;" />
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px; height: 207px;">
                        <img style="height: 150px;" src="images/mrshoes/Nike-Free-Run-OG-14-BR-running-shoes-.jpg" />
                        <asp:Label ID="Label3" Text="TIGER MEXICO 66" runat="server" Style="padding: 10px;
                            font-size: small;" />
                        <br />
                        <asp:Label ID="Label22" Text="RS 2500" runat="server" Style="color: Red; font-size: small;" />
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px; height: 207px;">
                        <img style="height: 150px;" src="images/mrshoes/Nike-LunarEpic-Flyknit-Red-Black-TTL-CRMSN.jpg" />
                        <asp:Label ID="Label4" Text="Nike Free RN Flyknit" runat="server" Style="font-size: small;" />
                        <br />
                        <asp:Label ID="Label23" Text="RS 2550" runat="server" Style="color: Red; font-size: small;" />
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px; height: 207px;">
                        <img style="height: 150px;" src="images/mrshoes/Nike-LunarEpic-Low-Flyknit-843764-301.jpg" />
                        <asp:Label ID="Label5" Text="Nike Free RN" runat="server" Style="font-size: small;" />
                        <br />
                        <asp:Label ID="Label24" Text="RS 2350" runat="server" Style="color: Red; font-size: small;" />
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px; height: 207px;">
                        <img style="height: 150px; width: 150px;" src="images/mrshoes/NIKE-TENNIS-CLASSIC-AC-WHITE-SNEAKERS-SHOES.jpg" />
                        <asp:Label ID="Label6" Text="Running shoes" runat="server" Style="font-size: small;" />
                        <br />
                        <asp:Label ID="Label25" Text="RS 2550" runat="server" Style="color: Red; font-size: small;" />
                    </div>
                </div>
</div>
</div>

 <script type="text/javascript">
            jQuery(document).ready(function () {
                jQuery('.multiples').slick({
                    infinite: true,
                    slidesToShow: 4,
                    slidesToScroll: 1, 
                    arrows:true,
//                    autoplay: true,
//                    autoplaySpeed: 2000,
                            
                            
//                   
                });
            });
    </script>