Как добавить ссылки к слайду? и заставить их работать?

Question

[StaticArt]

Ребят помогите! Как сделать так что к примеру я хочу site.ru/#sl30 и он будет открывать 30 слайд сразу ?

var mySlider = {
  
  config : {
    
    slider : '.slider-content',
    activeSlide : '.slide.active',
    button: '.next-button',
    transition: 500,
    delay: function() {return this.transition;},
    navigation : '.control-nav'
    
  },
  
  init : function(config) {
        //$.extend(mySlider.config, config);
        this.createNav();
        $(mySlider.config.button).
            click(function() {
                mySlider.animateSlide($(this));
            });
    },
  
  getActiveSlide : function() {
    
    return $(mySlider.config.activeSlide);   
       
  },
  
  getNextSlide : function() {
     
     var nextSlide = mySlider.getActiveSlide().next();
      
     if ( nextSlide.length === 0 ){
      
       nextSlide = $(mySlider.config.slider).find('.slide').eq(0);   
     } 
    
    return nextSlide;
    
  },
  
  getNextSlideColorAndName : function() {
    
    var colorAndName = {};
    var nextSlidenext = mySlider.getNextSlide().next();
    var nextSlideColor = nextSlidenext.data('color');
    var nextSlideName = nextSlidenext.data('name');
    
    colorAndName.color = nextSlideColor;
    colorAndName.name = nextSlideName;
    
    if ( nextSlidenext.length === 0 ) {
      nextSlidenext = $(mySlider.config.slider).find('.slide').eq(0);  
      nextSlideColor = nextSlidenext.data('color');
      nextSlideName = nextSlidenext.data('name');
      
      colorAndName.color = nextSlideColor;
      colorAndName.name = nextSlideName;
    }
    
    return colorAndName;
  }, 
  
  createNav : function() {
    
    var totalSlides = $(mySlider.config.slider).find('.slide').length;
    var controlNav = $(mySlider.config.navigation).find('ul');
    var nav;
                        
    for( var i=0; i < totalSlides; i++ ){
        
        var active = "";
        if(i === 0){
          active = 'active';
        }
        
        controlNav.append('<li class="slider-nav nav-'+i+' '+active+' "></li>')

    }                      
                        
  },
  
  animateNav : function() {
    
    var activeNav  = $('li.active');
    var nextNav = activeNav.next();
    
    if(nextNav.length === 0){
      nextNav = $('.control-nav li').eq(0);
    }
    
    activeNav.removeClass('active');
    nextNav.addClass('active');
  },
  
  animateSlide : function(button) {
    
    var activeSlide  = mySlider.getActiveSlide();
    var nextSlide = mySlider.getNextSlide();
    var delay = mySlider.config.delay(); 
    var clipPath = $('.clip-svg');
    
    clipPath.css('transition-duration', mySlider.config.transition+'ms');
    button.css('pointer-events', 'none');
    nextSlide.css('z-index',10);
    button.css('background', mySlider.getNextSlideColorAndName().color);
    button.prev().find('.color').html(mySlider.getNextSlideColorAndName().name);
    nextSlide.addClass('active').css('opacity', 1); 
    
    setTimeout(function() {
      activeSlide.removeClass('active').css('opacity', 0);
    }, delay);
    
    setTimeout(function() {
      nextSlide.css('z-index','');
      button.css('pointer-events', 'auto');
    }, delay + 300);
    
    mySlider.animateNav();
    
  }
} 

$(document).ready(function() { mySlider.init(); });

<div class="slider-wrapper">

<div class="slider-container"> 
	
	
      <div class="nav-wrapper">
        <div class="next">
          <div class="next-color">
            <span class="color">Далее</span>
          </div>
          <div class="next-button">
            <svg>
              <use xlink:href="#arrow"></use>
            </svg>
          </div>
        </div>
      </div>
	  
      <div class="slide active" data-order="1" data-color="#blue" data-name="red">
        <div class="slide-content ">
          <div class="clip-svg">
              <img class="" src="1.jpg" alt="" />
              <div class="title-wrapper">
                  <h1>- Cuz i'm still looking</h1>
                  <h2>looking for trouble</h2>
              </div>
          </div>
        </div>
      </div>
      
      <div class="slide " data-order="2" data-color="#f59600" data-name="orange">
        <div class="slide-content ">
          <div class="clip-svg">1
              <img class="" src="2.jpg" alt="" />
              <div class="title-wrapper bigger">
                  <h1>- Your hesitation speaks to me</h1>
                  <h2>more than million words</h2>
              </div>
          </div>
        </div>
      </div>
      

	  
	  
	  <div class="slide " data-order="3" data-color="#f59600" data-name="orange">
        <div class="slide-content ">
          <div class="clip-svg">
              <img class="" src="3.jpg" alt="" />
              <div class="title-wrapper bigger">
                  <h1>- Your hesitation speaks to me</h1>
                  <h2>more than million words</h2>
              </div>
          </div>
        </div>
      </div>  
	  
	  
	  
	  
	  <div class="slide " data-order="5" data-color="#0028f2" data-name="blue">
        <div class="slide-content ">
          <div class="clip-svg">
              <img class="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/boldybae3.jpg" alt="" />
              <div class="title-wrapper bigger">
                  <h1>- Heels on the bike it's a mess</h1>
                  <h2>I'm not the only one who is late</h2>
              </div>
          </div>
        </div>
      </div>
	  
	  
	  	  <div class="slide " data-order="6" data-color="#0028f2" data-name="blue">
        <div class="slide-content ">
          <div class="clip-svg">
              <img class="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/boldybae3.jpg" alt="" />
              <div class="title-wrapper bigger">
                  <h1>- Heels on the bike it's a mess</h1>
                  <h2>I'm not the only one who is late</h2>
              </div>
          </div>
        </div>
      </div>
	  
	  
	  
	  <div class="slide " data-order="7" data-color="#0028f2" data-name="blue">
        <div class="slide-content ">
          <div class="clip-svg">
              <img class="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/boldybae3.jpg" alt="" />
              <div class="title-wrapper bigger">
                  <h1>- Heels on the bike it's a mess</h1>
                  <h2>I'm not the only one who is late</h2>
              </div>
          </div>
        </div>
      </div>
	  
	  
	  
	  	  <div class="slide " data-order="5" data-color="#0028f2" data-name="blue">
        <div class="slide-content ">
          <div class="clip-svg">
              <img class="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/boldybae3.jpg" alt="" />
              <div class="title-wrapper bigger">
                  <h1>- Heels on the bike it's a mess</h1>
                  <h2>I'm not the only one who is late</h2>
              </div>
          </div>
        </div>
      </div>
   </div>
  </div>