Disable Previous and Next Arrow Navigator #38

navhundal · 2014-09-19T08:09:38Z

I want to disable Previous Arrow Navigator on first slide and Next arrow on last slide . I have tried using jrror events but i didnot work. I need it urgent . Please help me to achieve this thing

jssor · 2014-09-19T08:43:10Z

Here is workaround,

            function DisplayHideArrow(index) {
                if (index == 0) {
                    //hit the first slide, display arrow right and hide arrow left
                }
                else if (index == jssor_slider1.$SlidesCount() - 1) {
                    //hit the last slide, display arrow left and hide arrow right
                }
            }

            jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayHideArrow);

navhundal · 2014-09-19T09:13:52Z

i use the above code this way , but it didnot work

    <span u="arrowleft" class="jssorb08l" id="aleft" style="width: 134px; height: 106px; top: 8px; left: 43.8%;">        </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssorb08r" id="aright" style="width: 134px; height: 106px; bottom: 8px; left: 43.8%">        </span>

jQuery(document).ready(function ($) {
var options = {
$AutoPlay: false, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$PlayOrientation: 2, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
$DragOrientation: 2, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 1,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

           function DisplayHideArrow(index) {
            if (index == 0) {
                //hit first slide, display arrow right and hide arrow left
                jQuery(".jssorb08r").show(); 
                jQuery(".jssorb08l").hide(); 
            }
            else if (index == jssor_slider1.$SlidesCount - 1) {
                //hit last slide, display arrow left and hide arrow right
                jQuery(".jssorb08r").hide(); 
                jQuery(".jssorb08l").show(); 
            }
        }

        jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayHideArrow(0));
    });

jssor · 2014-09-19T09:42:54Z

The following is full code,

            function DisplayHideArrow(index) {
                var hideLeftArrow;
                var hideRightArrow;

                if (index == 0) {
                    hideLeftArrow = true;
                }
                else if (index == jssor_slider1.$SlidesCount() - 1) {
                    hideRightArrow = true;
                }

                jQuery(".jssorb08l").css("visibility", hideLeftArrow ? "hidden" : "visible");
                jQuery(".jssorb08r").css("visibility", hideRightArrow ? "hidden" : "visible");
            }

            jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayHideArrow);

            //hide arrow left at the beginning.
            DisplayHideArrow(0);

navhundal · 2014-09-19T09:53:44Z

Here is my full code . Still not working and i also want to stop looping same slides again and again

<div id="slider1_container"  style="position: relative; top: 0px; left: 0px; width: 100%;
    height: 592px;">

    <!-- Slides Container -->
    <div u="slides" id="slide-board" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 592px;
        overflow: hidden;">
        <div> <div class="image"><img  src="images/collection-img1.jpg" />   <div class="hotspot-content"><span class="plus-sign">+</span> <div class="hotspot-mark hide mark1"> Golden Rice Grain Earring</div> <div class="hotspot-mark hide mark2"> Golden Rice Grain Earring</div>
        </div></div>
         <div class="image"><img  src="images/collection-img2.jpg" /> <div class="hotspot-content"><span class="plus-sign">+</span> <div class="hotspot-mark hide mark1"> Golden Rice Grain Earring</div> <div class="hotspot-mark hide mark2"> Golden Rice Grain Earring</div>
        </div></div> </div>
        <div><div class="image"><img  src="images/collection-img3.jpg" /></div> <div class="image"><img  src="images/collection-img4.jpg" /></div> </div>
        <div><div class="image"><img  src="images/collection-img5.jpg" /></div> <div class="image"><img  src="images/collection-img6.jpg" /></div> </div>
        <div><div class="image"><img  src="images/collection-img7.jpg" /></div> <div class="image"><img  src="images/collection-img8.jpg" /></div> </div>
        <div><div class="image"><img  src="images/collection-img9.jpg" /></div> <div class="image"><img  src="images/collection-img10.jpg" /></div> </div>
        <div><div class="image"><img  src="images/collection-img11.jpg" /></div> <div class="image"><img  src="images/collection-img12.jpg" /></div> </div>
        <div><div class="image"><img  src="images/collection-img13.jpg" /></div> <div class="image"><img  src="images/collection-img14.jpg" /></div> </div>

    </div>

    <!-- Arrow Navigator Skin Begin -->
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssorb08l" id="aleft" style="width: 134px; height: 106px; top: 8px; left: 43.8%;display:none;">        </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssorb08r" id="aright" style="width: 134px; height: 106px; bottom: 8px; left: 43.8%">        </span>
    <!-- Arrow Navigator Skin End -->
    <a style="display: none" href="http://www.jssor.com">jquery responsive slider</a>    </div>
<!-- Jssor Slider End -->
    jQuery(document).ready(function ($) {
        var options = {
            $AutoPlay: false,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $PlayOrientation: 2,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
            $DragOrientation: 2,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 1,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

           function DisplayHideArrow(index) {
            var hideLeftArrow;
            var hideRightArrow;

            if (index == 0) {
                hideLeftArrow = true;
            }
            else if (index == jssor_slider1.$SlidesCount() - 1) {
                hideRightArrow = true;
            }

            jQuery(".jssorb08l").css("visibility", hideLeftArrow ? "hidden" : "visible");
            jQuery(".jssorb08r").css("visibility", hideRightArrow ? "hidden" : "visible");
        }

        jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayHideArrow);

        //hide arrow left at the beginning.
        DisplayHideArrow(0);
    });
</script>

<div id="slider1_container"  style="position: relative; top: 0px; left: 0px; width: 100%;
    height: 592px;">

    <!-- Slides Container -->
    <div u="slides" id="slide-board" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 592px;
        overflow: hidden;">
        <div> <div class="image"><img  src="images/collection-img1.jpg" />   <div class="hotspot-content"><span class="plus-sign">+</span> <div class="hotspot-mark hide mark1"> Golden Rice Grain Earring</div> <div class="hotspot-mark hide mark2"> Golden Rice Grain Earring</div>
        </div></div>
         <div class="image"><img  src="images/collection-img2.jpg" /> <div class="hotspot-content"><span class="plus-sign">+</span> <div class="hotspot-mark hide mark1"> Golden Rice Grain Earring</div> <div class="hotspot-mark hide mark2"> Golden Rice Grain Earring</div>
        </div></div> </div>
        <div><div class="image"><img  src="images/collection-img3.jpg" /></div> <div class="image"><img  src="images/collection-img4.jpg" /></div> </div>
        <div><div class="image"><img  src="images/collection-img5.jpg" /></div> <div class="image"><img  src="images/collection-img6.jpg" /></div> </div>
        <div><div class="image"><img  src="images/collection-img7.jpg" /></div> <div class="image"><img  src="images/collection-img8.jpg" /></div> </div>
        <div><div class="image"><img  src="images/collection-img9.jpg" /></div> <div class="image"><img  src="images/collection-img10.jpg" /></div> </div>
        <div><div class="image"><img  src="images/collection-img11.jpg" /></div> <div class="image"><img  src="images/collection-img12.jpg" /></div> </div>
        <div><div class="image"><img  src="images/collection-img13.jpg" /></div> <div class="image"><img  src="images/collection-img14.jpg" /></div> </div>

    </div>

    <!-- Arrow Navigator Skin Begin -->
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssorb08l" id="aleft" style="width: 134px; height: 106px; top: 8px; left: 43.8%;display:none;">        </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssorb08r" id="aright" style="width: 134px; height: 106px; bottom: 8px; left: 43.8%">        </span>
    <!-- Arrow Navigator Skin End -->
    <a style="display: none" href="http://www.jssor.com">jquery responsive slider</a>    </div>
<!-- Jssor Slider End -->

jssor · 2014-09-19T10:04:11Z

Please see my second comment.

To stop slider from looping, please set $Loop option to false.

navhundal · 2014-09-19T10:07:23Z

When i set $Loop = false, or $Loop = 0, it only move from first image to second image and then stops moving

jssor · 2014-09-19T10:43:35Z

It won't move even you click arrow button?

navhundal · 2014-09-19T11:14:06Z

Yes, it only move one time

jssor · 2014-09-19T13:24:05Z

There are some errors in your code.
There are double slider1_container and double initialization scripts. And there is no begin '<script>' for the second script block.

Also, please always specify size in pixel.
So, please replace 'width: 100%' with 'width: 1300px' or something else.

ArchaeoBasti · 2014-11-05T13:28:01Z

Hi,
I have the same problem and tried to use the solution given under the fourth comment. Unfortunately, it does not work. Where do I put the function exactly? I tried to place it in the head, before the arrows are called and after, nothing worked.
Can someone help?

jssor · 2014-11-10T00:45:07Z

please just place the following code just under var jssor_slider1 = new $JssorSlider$(...; statement.

       function DisplayHideArrow(index) {
            var hideLeftArrow;
            var hideRightArrow;

            if (index == 0) {
                hideLeftArrow = true;
            }
            else if (index == jssor_slider1.$SlidesCount() - 1) {
                hideRightArrow = true;
            }

            jQuery(".jssorb08l").css("visibility", hideLeftArrow ? "hidden" : "visible");
            jQuery(".jssorb08r").css("visibility", hideRightArrow ? "hidden" : "visible");
        }

        jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayHideArrow);

        //hide arrow left at the beginning.
        DisplayHideArrow(0);

ArchaeoBasti · 2014-11-11T13:17:38Z

Thanks! It works now. I even enhanced the code, in case there is only one picture and I don't want to see any arrows:

function DisplayHideArrow(index) {
        var hideLeftArrow;
        var hideRightArrow;

        if (index == 0) {
            hideLeftArrow = true;
            if (index == jssor_slider1.$SlidesCount() - 1) {
              hideRightArrow = true;
            }
        }
        else if (index == jssor_slider1.$SlidesCount() - 1) {
            hideRightArrow = true;
        }

        jQuery(".jssorb08l").css("visibility", hideLeftArrow ? "hidden" : "visible");
        jQuery(".jssorb08r").css("visibility", hideRightArrow ? "hidden" : "visible");
    }

    jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayHideArrow);

    //hide arrow left at the beginning.
    DisplayHideArrow(0);

DhineshKumarJ · 2015-11-03T14:11:05Z

Hi all,
I am new to jssor slider . the above code working correctly, but if I hit continuously without gap its not stopping at last slide. Only if I click the arrow slowly its working, any idea how to stop even if I click faster .

jssor closed this as completed Sep 19, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Disable Previous and Next Arrow Navigator #38

Disable Previous and Next Arrow Navigator #38

navhundal commented Sep 19, 2014

jssor commented Sep 19, 2014

navhundal commented Sep 19, 2014

jssor commented Sep 19, 2014

navhundal commented Sep 19, 2014

jssor commented Sep 19, 2014

navhundal commented Sep 19, 2014

jssor commented Sep 19, 2014

navhundal commented Sep 19, 2014

jssor commented Sep 19, 2014

ArchaeoBasti commented Nov 5, 2014

jssor commented Nov 10, 2014

ArchaeoBasti commented Nov 11, 2014

DhineshKumarJ commented Nov 3, 2015

Disable Previous and Next Arrow Navigator #38

Disable Previous and Next Arrow Navigator #38

Comments

navhundal commented Sep 19, 2014

jssor commented Sep 19, 2014

navhundal commented Sep 19, 2014

jssor commented Sep 19, 2014

navhundal commented Sep 19, 2014

jssor commented Sep 19, 2014

navhundal commented Sep 19, 2014

jssor commented Sep 19, 2014

navhundal commented Sep 19, 2014

jssor commented Sep 19, 2014

ArchaeoBasti commented Nov 5, 2014

jssor commented Nov 10, 2014

ArchaeoBasti commented Nov 11, 2014

DhineshKumarJ commented Nov 3, 2015