Jump to next slide onClick

Question

I have created a slider, with arrows, which works fine, but I need to add a link on the inner slide, which onclick, takes to the next slide.

My code is as below.

<script type="text/javascript">
  $(function () {

    var Page = (function () {

      var $navArrows = $('#nav-arrows'),
      $nav = $('#nav-dots > span'),
      slitslider = $('#slider').slitslider({
        onBeforeChange: function (slide, pos) {
          $nav.removeClass('nav-dot-current');
          $nav.eq(pos).addClass('nav-dot-current');
        }
      }),

      init = function () {
        initEvents();
      },

      initEvents = function () {

        // add navigation events
        $navArrows.children(':last').on('click', function () {
          slitslider.next();

          return false;
        });

        $navArrows.children(':first').on('click', function () {
          slitslider.previous();

          return false;
        });

        $nav.each(function (i) {
          $(this).on('click', function (event) {
            var $dot = $(this);
            if (!slitslider.isActive()) {
              $nav.removeClass('nav-dot-current');
              $dot.addClass('nav-dot-current');
            }
            slitslider.jump(i + 1);

            return false;
          });
        });
      };

      return { init: init };
    })();

    Page.init();
  });
</script> 

The HTML that I have used on the slide to move next is as below.

<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
  <div class="sl-slide-inner">

    <div class="">
      <a href="#" class="anhrClr custAnchr"><span class="splAncStl"><nav id="nav-arrows1">
        <span>Click to next slide</span>
      </nav></span></a>
    </div>
  </div>
</div>

Answer 1

case arrow.right :

                    self._stopSlideshow();
                    self._navigate( 'next' );
                    break;

This is code from keyboard navigation. So you can try

$('.anhrClr').click(function(){
    slitslider._navigate( 'next' );
    return false;
});

Look example doc please - http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

UPDATE In example we can find _navigate function:

_navigate : function( dir, pos ) {

    if( this.isAnimating || this.slidesCount < 2 ) {

        return false;

    }

    this.isAnimating = true;

    var self = this,
        $currentSlide = this.$slides.eq( this.current );

    // if position is passed
    if( pos !== undefined ) {

        this.current = pos;

    }
    // if not check the boundaries
    else if( dir === 'next' ) {

        this.current = this.current < this.slidesCount - 1 ? ++this.current : 0;

    }
    else if( dir === 'prev' ) {

        this.current = this.current > 0 ? --this.current : this.slidesCount - 1;

    }

    this.options.onBeforeChange( $currentSlide, this.current );

    // next slide to be shown
    var $nextSlide = this.$slides.eq( this.current ),
        // the slide we want to cut and animate
        $movingSlide = ( dir === 'next' ) ? $currentSlide : $nextSlide,

        // the following are the data attrs set for each slide
        configData = $movingSlide.data(),
        config = {};

    config.orientation = configData.orientation || 'horizontal',
    config.slice1angle = configData.slice1Rotation || 0,
    config.slice1scale = configData.slice1Scale || 1,
    config.slice2angle = configData.slice2Rotation || 0,
    config.slice2scale = configData.slice2Scale || 1;

    this._validateValues( config );

    var cssStyle = config.orientation === 'horizontal' ? {
            marginTop : -this.size.height / 2
        } : {
            marginLeft : -this.size.width / 2
        },
        // default slide's slices style
        resetStyle = {
            'transform' : 'translate(0%,0%) rotate(0deg) scale(1)',
            opacity : 1 
        },
        // slice1 style
        slice1Style = config.orientation === 'horizontal' ? {
            'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
        } : {
            'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
        },
        // slice2 style
        slice2Style = config.orientation === 'horizontal' ? {
            'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
        } : {
            'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
        };

    if( this.options.optOpacity ) {

        slice1Style.opacity = 0;
        slice2Style.opacity = 0;

    }

    // we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next"
    // or going "prev" according to the direction.
    // the idea is to make it more interesting by giving some animations to the respective slide's elements
    //( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' );

    $currentSlide.removeClass( 'sl-trans-elems' );

    var transitionProp = {
        'transition' : 'all ' + this.options.speed + 'ms ease-in-out'
    };

    // add the 2 slices and animate them
    $movingSlide.css( 'z-index', this.slidesCount )
                .find( 'div.sl-content-wrapper' )
                .wrap( $( '<div class="sl-content-slice" />' ).css( transitionProp ) )
                .parent()
                .cond(
                    dir === 'prev', 
                    function() {

                        var slice = this;
                        this.css( slice1Style );
                        setTimeout( function() {

                            slice.css( resetStyle );

                        }, 50 );

                    }, 
                    function() {

                        var slice = this;
                        setTimeout( function() {

                            slice.css( slice1Style );

                        }, 50 );

                    }
                )
                .clone()
                .appendTo( $movingSlide )
                .cond(
                    dir === 'prev', 
                    function() {

                        var slice = this;
                        this.css( slice2Style );
                        setTimeout( function() {

                            $currentSlide.addClass( 'sl-trans-back-elems' );

                            if( self.support ) {

                                slice.css( resetStyle ).on( self.transEndEventName, function() {

                                    self._onEndNavigate( slice, $currentSlide, dir );

                                } );

                            }
                            else {

                                self._onEndNavigate( slice, $currentSlide, dir );

                            }

                        }, 50 );

                    },
                    function() {

                        var slice = this;
                        setTimeout( function() {

                            $nextSlide.addClass( 'sl-trans-elems' );

                            if( self.support ) {

                                slice.css( slice2Style ).on( self.transEndEventName, function() {

                                    self._onEndNavigate( slice, $currentSlide, dir );

                                } );

                            }
                            else {

                                self._onEndNavigate( slice, $currentSlide, dir );

                            }

                        }, 50 );

                    }
                )
                .find( 'div.sl-content-wrapper' )
                .css( cssStyle );

    $nextSlide.show();

}

Answer 2

You could simulate a click event with $.trigger('click'). Try binding your <a> that you want to defer the event to like this:

$('a.anhrClr.custAnchr').on('click', function(e) {
    $('.nav-arrow-next').trigger('click');
    e.preventDefault();
    return false;
});

EDIT: For clarification, the e.preventDefault() and return false; is to prevent your browser from handling a click to the anchor element. Otherwise your browser might scroll to the top of the page with an href="#" or do other undesirable things.