Comments (13)
jssor
commented on August 18, 2024
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);from slider.
navhundal
commented on August 18, 2024
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));
});
from slider.
jssor
commented on August 18, 2024
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);from slider.
navhundal
commented on August 18, 2024
Here is my full code . Still not working and i also want to stop looping same slides again and again
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type="text/javascript" src="js/jssor.core.js"></script> <script type="text/javascript" src="js/jssor.utils.js"></script> <script type="text/javascript" src="js/jssor.slider.js"></script> <script> 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 -->
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 -->
from slider.
jssor
commented on August 18, 2024
Please see my second comment.
To stop slider from looping, please set $Loop option to false.
from slider.
navhundal
commented on August 18, 2024
When i set $Loop = false, or $Loop = 0, it only move from first image to second image and then stops moving
from slider.
jssor
commented on August 18, 2024
It won't move even you click arrow button?
from slider.
navhundal
commented on August 18, 2024
Yes, it only move one time
from slider.
jssor
commented on August 18, 2024
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.
from slider.
ArchaeoBasti
commented on August 18, 2024
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?
from slider.
jssor
commented on August 18, 2024
please just place the following code just under var jssor_slider1 = new
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);from slider.
ArchaeoBasti
commented on August 18, 2024
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);
from slider.
DhineshKumarJ
commented on August 18, 2024
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 .
from slider.
Related Issues (20)
- Why does jssor issue a page request for every slide? HOT 6
- vuejs version HOT 8
- What is the correct way to add a youtube video as a slide? HOT 1
- Transition code of the website is not possible to use in the jquery code HOT 2
- $ScaleSize Does not work correctly HOT 1
- jssor instance wordpress HOT 2
- HTML code work properly but when ng-repeat use then all images show in page in angularjs. And when i click next button then all images work properly one by one HOT 1
- carousel-slider.slider with Bootstrap modal
- For mobile full screen slider how can i assign slide number for each slide For ex( 1 to 10 ) HOT 1
- $CurrentIndex() issue on first load HOT 2
- You need to remove the event.keyCode because it's Deprecated HOT 7
- jssor fails tests because its still using non-passive Event Listeners HOT 2
- Optimize responsive HOT 1
- $JssorSlider$ error shows in React js for using jssor-slider
- Animations breakpoints no longer work since update from 27.5 to 28.0 HOT 2
- Font-size too big on mobile
- Lazy loading and SEO
- not compatible with iPad?
- Unable to insert caption below image
- Slid2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from slider.