CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user186730
user186730

Reputation: 79

jquery layerslider: stop layerslider when mouseover on navigation bar (nav)

I am using jquery layerslider ,want to stop layerslider when I mouseover my navigation bar (nav). 

// Java script code
    $('document').ready(function()
               {
                // Calling LayerSlider on your selected element after the document loaded
                $('#layerslider').layerSlider({
                    responsive: true,
                    animateFirstLayer:false,
                   autostart:false,
                    skin      : 'default',
                    skinsPath : '/layerslider/skins/'
                  // showCircleTimer:false

                });
                  $('.onHoverService').mouseover (function(){
                          autoStart : false
                  });
                  $('.onHoverService').mouseout (function(){
                          autoStart : true
                  });
               });
//HTML code
        <nav class="nav-inner">
                  <div class="background_logo"><a href="http://www.blacknova.com.au/">
                 <img class="horizontal_logo" src="<?php echo $this->webroot; ?>img/bnlogohorisontal.png" height="35" >
                 <!--<img class="home_logo" src="<?php  echo $this->webroot; ?>img/home-button-white.png" height="25" >-->
                   </a>    </div>
                      <?php  echo $this->element('Menus/menuHeader');?> 
                   <div class="servicedropdownMenu">

                      <?php echo $this->element('Menus/headerServices');?>  

                  </div>
                  <div class="portfoliodropdownMenu">

                      <?php     echo $this->element('Menus/headerPortfolio');?>  

                  </div>


             </nav>

I had tried above code , but its not working properly. I am new to it . Thanks for help in advance.

Upvotes: 1

Views: 2698

Answers (3)

Anne Stahl
Anne Stahl

Reputation: 121

Avi is right, you can easily set it to pause when you hover over the slider by adding it to your onpage script. (as of version 1.6)

See http://www.docs.purethemes.net/sukces/layerslider/documentation/documentation.html#global_settings which states:

"pauseOnHover : true or false If ture, SlideShow will pause when you move the mouse pointer over the LayerSlider container."

Upvotes: 1

Avtar Nanrey
Avtar Nanrey

Reputation: 135

Add pauseOnHover: true,

Example:

    $('#layerslider').layerSlider({
        responsive: true,
        pauseOnHover: true,
        animateFirstLayer:false,
        autostart:false,
        skin      : 'default',
        skinsPath : '/layerslider/skins/'
        // showCircleTimer:false
   });

Upvotes: 1

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

In case of the function layerSlider() you're passing object literals {} which hold properties or options. Careful now because that's not the same when you call mouseover(). In this case the argument you're passing is a function which will instantiate itself anonymously (it doesn't have a name) like:

function(){
    // do something here
}

In your case I believe you want to call jQuery's stop() function on the slider. Something along the lines of:

function(){
    $('#layerslider').stop(true, true);
}

Upvotes: 0

Related Questions