CODEWITHSUNDEEP
jquery
tony noriega
tony noriega

Reputation: 7673

jQuery - modify effect to slide left

I have been dabbling around this morning trying to modify the jQuery cycle script I have. Currently the effect is set to 'fade' and I am trying to modify it to slide left.

Would and could use some help... not only with the code, but explaining how this is obtained for my future knowledge.

Thank you.

<script>
$(function() {
    $('.slideshow').before('<div id="mininav" class="mininav"></div>')
        .cycle({
            fx:'fade',
            speed:  'slow',
            timeout: 3000,
            pause: 1,
            pager:  '#mininav',
            slideEXpr: 'div.slide',
            before: function() {if (window.console){ console.log(this.src); }}
        })

        .hover(function() {
            $('#mininav-pause').show();},
            function(){$('#mininav-pause').hide();
        });
   });

Upvotes: 1

Views: 208

Answers (1)

ShankarSangoli
ShankarSangoli

Reputation: 69915

To get slideLeft effect you have to use scollHorx to set the fx property. Go through the cycle plugin documenation to understand various effects provided by it.

$(function() {
    $('.slideshow').before('<div id="mininav" class="mininav"></div>')
        .cycle({
            fx:'scrollHorz',
            speed:  'slow',
            timeout: 3000,
            pause: 1,
            pager:  '#mininav',
            slideEXpr: 'div.slide',
            before: function() {if (window.console){ console.log(this.src); }}
        })

        .hover(function() {
            $('#mininav-pause').show();},
            function(){$('#mininav-pause').hide();
        });
   });

Upvotes: 2

Related Questions