jQuery slider / Posts /

How to make the large image slider stop advancing when hovered for the demo 3

-2

How can I create the demo3 like Ninja Slider with a thumbail slider, and when I hover the large image the slide is stopped and it start slide again when i'm not hover the large image?

Nguyen Le  one year ago   viewed: 2224    

8 Answers

0

Hi Milo I downloaded the demo3 and did what you recommend but when i hover the large image it still slider. I want to stop it and make it slide when leave the large image. Holpe this help.

Nguyen Le
  one year ago
0

We have made some changes to the ninja-slider.js script and have submitted the changes. The update is to allow pauseOnHover can work on touch-enabled devices either.

Please download the package again and use the latest ninja-slider.js.

I have also added " && manual !=== false" to the nsOptions in my previous post. So update the nsOptions either.

Milo   one year ago
0

Thanks Millo .

I got it. pauseOnHover not hoverOnPause.

How I add text to the large image and make it slide with large image an what function when the image slide (like before sliderchange in old version)

Nguyen Le
  one year ago
0

Please refer to other demos that have captions.

Milo   one year ago
0

Hi Millo

I config following that you recommended. Everythings is ok. The image don't slide when i hover the large image but when i hover the smail imgae it not stop slide. How can I stop slide when hover the large and small images?

Thanks

Kean
  one year ago
0
You can download the latest version of the script, and then following the instructions listed in my previous posts. It used to have some typos. I have just updated them. So please try it out again.
Milo   one year ago
0

Hi Millo. This is my javascript. I try to stop slide when hover the small image in the right column and the large imgae but nothing happen. Please hel me.

Nịnaslider Scrip

Thumbnail slider script:

var nsOptions =

{

sliderId: "ninja-slider",

transitionType: "fade", //"fade", "slide", "zoom", "kenburns 1.2" or "none"

autoAdvance:true,

delay: "default",

transitionSpeed: 700,

aspectRatio: "2:1",

initSliderByCallingInitFunc: false,

shuffle: false,

startSlideIndex: 0, //0-based

navigateByTap: true,

pauseOnHover: true,

keyboardNav: true,

before: function (currentIdx, nextIdx, manual) { 

if(typeof mcThumbnailSlider!="undefined" && manual !== false)

mcThumbnailSlider.display(nextIdx); },

 license: "b2e981"

};

var thumbnailSliderOptions =

{

sliderId: "thumbnail-slider",

orientation: "vertical",

thumbWidth: "140px",

thumbHeight: "70px",

showMode: 2,

autoAdvance: false,

selectable: true,

slideInterval: 3000,

transitionSpeed: 900,

shuffle: false,

startSlideIndex: 0, //0-based

pauseOnHover: true,

initSliderByCallingInitFunc: false,

rightGap: 0,

 keyboardNav: false,

mousewheelNav: true,

before: function (currentIdx, nextIdx, manual) { if (manual && typeof nslider != "undefined") nslider.displaySlide(nextIdx); },

 license: "mylicense"

};

Kean
  one year ago
-1

For the current settings of demo 3 it is not possible as the large image slider is driven by the jQuery slider. We have to config it again to instead make the Ninja Slider to drive the thumbnails carousel.

Config the Ninja Slider's script:

var nsOptions = { ... pauseOnHover: true, autoAdvance: true, before: function (currentIdx, nextIdx, manual) { if(typeof mcThumbnailSlider!="undefined" && manual !== false) mcThumbnailSlider.display(nextIdx); }, ... };

Config the script of the jQuery Slider:

var thumbnailSliderOptions = { ... autoAdvance: false, ... before: function (currentIdx, nextIdx, manual) { if (manual && typeof nslider != "undefined") nslider.displaySlide(nextIdx); }, ... };


Milo   one year ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: