i have used slick slider but my arrrows looks so wired i want my arrows to be look like this but i have try a lot still its not working ltdiv align34center34gt ltdiv style34width 900px borderradius 10px paddingleft 20px34gt lth3 style34textalign center fontsize larger textdecoration underline margintop 27px margin 33px34gt LOAFERS SHOESlth3gt lthr style

ltscript type34textjavascript34gt jQuerydocumentreadyfunction jQuery39multiples39slick infinite true slidesToShow 4 slidesToScroll 1 arrowstrue prevArrow 39lti class34fa faangleleft prev134gtltigt39 nextArrow 39lti class34fa faangleright next134gtltigt39 autoplay true autoplaySpeed 2000 ltscriptgt prev1 color Black top 50 margintop 56px position absolute zindex 9 fontsize 26px height 25px width 25px borderradius 10px boxshadow 1px 2px 10px 1px rgba0003

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

jordan

SOLVED CLOSED ACTIVE ANSWERED
User: jordan
Posted: on Feb 20, 2017 05:07 AM
Forum: HTML and CSS
Answer: 1
Views: 14655

i have used slick slider but my arrrows looks so wired ..i want my arrows to be look like this .

but i have try a lot still it's not working

 <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;">
                    LOAFERS SHOES</h3>
                <hr style="color: Black;" />
                <div id="Div5" class="multiples" runat="server">
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="images/mrshoes/l1.jpg" alt="" />
                        <asp:Label ID="Label16" Text="F-LEGACY BROWN FORMAL SHOES" runat="server" Style="font-size: small;" />
                        <br />
                        <asp:Label ID="Label36" runat="server" Text="Rs2000" Style="color: Red; font-size: small;"></asp:Label>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="images/mrshoes/l2.jpg" />
                        <asp:Label ID="Label17" Text="F-LEGACY BROWN FORMAL SHOES" runat="server" Style="font-size: small;" />
                        <br />
                        <asp:Label ID="Label37" runat="server" Text="Rs2000" Style="color: Red; font-size: small;"></asp:Label>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="images/mrshoes/l3.jpg" />
                        <asp:Label ID="Label18" Text="F-LEGACY BROWN FORMAL SHOES" runat="server" Style="font-size: small;" />
                        <br />
                        <asp:Label ID="Label38" runat="server" Text="Rs2000" Style="color: Red; font-size: small;"></asp:Label>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="images/mrshoes/l4.jpg" />
                        <asp:Label ID="Label19" Text="F-LEGACY BROWN FORMAL SHOES" runat="server" Style="font-size: small;" />
                        <br />
                        <asp:Label ID="Label39" runat="server" Text="Rs2000" Style="color: Red; font-size: small;"></asp:Label>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="images/mrshoes/l5.jpg" />
                        <asp:Label ID="Label20" Text="F-LEGACY BROWN FORMAL SHOES" runat="server" Style="font-size: small;" />
                        <br />
                        <asp:Label ID="Label40" runat="server" Text="Rs2000" Style="color: Red; font-size: small;"></asp:Label>
                    </div>
                </div>
            </div>
        </div>
    </div>

Download FREE API for Word, Excel and PDF in ASP.Net

jordan

0 7

Reply
ANSWER
User: jordan
Replied: on Feb 22, 2017 10:17 PM
Report

 <script type="text/javascript">
            jQuery(document).ready(function () {
                jQuery('.multiples').slick({
                    infinite: true,
                    slidesToShow: 4,
                    slidesToScroll: 1, 
                    arrows:true,
                     prevArrow: '<i class="fa fa-angle-left prev1"></i>',
                nextArrow: '<i class="fa fa-angle-right next1"></i>',
//                    autoplay: true,
//                    autoplaySpeed: 2000,
                            
                            
//                   
                });
            });
    </script>

 .prev1
        {
            color: Black; /* top: 50%; */ /* margin-top: -56px; */
            position: absolute;
            z-index: 9;
            font-size: 26px;
            height: 25px;
            width: 25px;
            border-radius: 10px; /* box-shadow: 1px 2px 10px -1px rgba(0,0,0,.3); */
            background-color: Black;
            color: White; /* padding: 1px; */ /* padding-top: 11px; */ /* margin-right: -9px; */
            margin: -39px; /* margin-right: 44px; */
            margin-left: 832px;
            margin-top: -46px;
        }
       
        .next1
        {
            /* margin: 10px; */
            margin-top: -256px;
            margin-left: 861px; /* margin-right: 34px; */ /* margin: 0px; */ /* margin-bottom: 12px; */
            color: white;
            height: 25px;
            background-color: black;
            width: 25px;
            font-size: 26px;
            z-index: 9px;
            border-radius: 10px;


this one is too simple only i have use some techq and able to do it...

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

Company

Explore

Follow us

Contact Us