Content Slider Object Pause on Mouseover 
Author: John H.
Visited 1389,
Followers 1,
Shared 0
Sorry to be a pain, but is there a way to do a Pause on Mouseover on the Content Slider Object.
KolAsim did a great little job on allowing the navigation buttons to permanently be displayed, I hope we can do the same with a pause like on the Logo Slider.
There is a bit to read on some of these items and visitors should not have to move forward and backward all the time.
KolAsim please do your magic here for us. Thanks in advance.
Cheers.
Posted on the
... hello, if you post the LINK of the page online, I can try to evaluate the selector to check...
.
ciao
.
Author
Thanks KolAsim for any help you can give.
The object is on two different sites, both on the Home Page:
https://garfieldvictoria.com.au
https://garfield.org.au
Cheers
... x >> https://garfieldvictoria.com.au/
<script>
/** pausa Content-Slider x WSx5 by KolAsim **/
$( document ).ready(function() {/**K>**/
secondiPausaK = 30;
pauseK=true;
avvioK();
}); /**K<<**/
function avvioK() {/**K1>**/
calcoloK = setInterval(function(){/**K2>**/
slideK=$('#imObjectContentSlider_805').height();
if(slideK > 100 ) {/**K3>**/
clearInterval(calcoloK); calcoloK = 0;
playK = '<a href="javascript:void(0)" id="play_K" style="position:absolute; top:20px; left:20px; z-index:100000;opacity:0.5"
onclick="play_K()" alt="Slide Play/Stop" title="Play/Stop"> <img id="imgK"
src="https://static.thenounproject.com/png/1578265-200.png" style="background:yellow; border-radius: 50%; border: 2px solid
black; cursor: pointer" width="100" ></a>';
$('#imObjectContentSlider_805').append(playK);
} /**K3<<**/
}, 500); /**K2<<**/
} /**K1<<**/
function play_K() { /**K4>**/
if (pauseK== true) { /**K5>**/
$("#imgK").attr("src","https://static.thenounproject.com/png/1019057-200.png")
x5engine.contentSlider['imObjectContentSlider_805'].autoplay(secondiPausaK * 1000);
pauseK= false
} else {
$("#imgK").attr("src","https://static.thenounproject.com/png/1578265-200.png")
x5engine.contentSlider['imObjectContentSlider_805'].autoplay(3000);
pauseK= true;
} /**K5<<**/
} /**K4<<**/
</script>
..................................
.
... x >> https://garfield.org.au/
<script>
/** pausa Content-Slider x WSx5 by KolAsim **/
$( document ).ready(function() {/**K>**/
secondiPausaK = 30;
pauseK=true;
avvioK();
}); /**K<<**/
function avvioK() {/**K1>**/
calcoloK = setInterval(function(){/**K2>**/
slideK=$('#imObjectContentSlider_808').height();
if(slideK > 100 ) {/**K3>**/
clearInterval(calcoloK); calcoloK = 0;
playK = '<a href="javascript:void(0)" id="play_K" style="position:absolute; top:20px; left:20px; z-index:100000;opacity:0.5"onclick="play_K()" alt="Slide Play/Stop" title="Play/Stop"> <img id="imgK" src="https://static.thenounproject.com/png/1578265-200.png" style="background:yellow; border-radius: 50%; border: 2px solid black; cursor: pointer" width="100" ></a>';
$('#imObjectContentSlider_808').append(playK);
} /**K3<<**/
}, 500); /**K2<<**/
} /**K1<<**/
function play_K() { /**K4>**/
if (pauseK== true) { /**K5>**/
$("#imgK").attr("src","https://static.thenounproject.com/png/1019057-200.png")
x5engine.contentSlider['imObjectContentSlider_808'].autoplay(secondiPausaK * 1000);
pauseK= false
} else {
$("#imgK").attr("src","https://static.thenounproject.com/png/1578265-200.png")
x5engine.contentSlider['imObjectContentSlider_808'].autoplay(3000);
pauseK= true;
} /**K5<<**/
} /**K4<<**/
</script>
.....................................................
.
ciao
.
Author
Thanks KolAsim, I have added the script to the Home Page Properties, Expert, before closing the HEAD tag. In the same spot I added the style to allow for navigation buttons to stay on:
<style>
.arrow-btn .a, .arrow-btn .b, .current-slide-radio-visible {visibility:visible !important }
</style>
below this I pasted your script and uploaded site.
https://garfield.org.au
There doesn't seem to be anything working except for the navigation Buttons staying on.
Am I doing something wrong?
Sorry, back to you.
Cheers.
.
...!... the string of the playK variable has split into four lines, and instead must be in a single string in a single line without carriage returns:
playK = '<a href="javascript:void(0)" id="play_K" style="position:absolute; top:20px; left:20px; z-index:100000;opacity:0.5" onclick="play_K()" alt="Slide Play/Stop" title="Play/Stop"> <img id="imgK" src="https://static.thenounproject.com/png/1578265-200.png" style="background:yellow; border-radius: 50%; border: 2px solid black; cursor: pointer" width="100" ></a>';
.
... use the code directly from the "notepad" that I have attached here in TXT ...
..... ↓ .....
.
Author
KolAsim, you are an absolute legend. It works like a charm now on both sites and I have just changed the color of the background to white. Looks fantastic now and visitors get the chance to pause and read the stories.
Do I need to do anything special if I change the position of the slider on the Home Page? It will always be on the Home Page but I may change the position from time to time.
Once again, my most heartfelt thanks for all the hard work you do for us.
Cheers - John
... I checked, now it's OK ...
...
... if you use the content slider on different pages, you just have to check the selector ID-name, which in the case of the current HOME is "imObjectContentSlider_808"...
... could change the final part, as happened for the other site:
imObjectContentSlider_808 >> (805)
.
Hello, ciao
.
.................................................
... note: ...you can download the two icons and put them on your site, so you don't depend on slowdowns of external servers...
... in this way you have to correct in the code only with the path relative to the two play-pause icons...
.