Ребят помогите! Как сделать так что к примеру я хочу 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>
Простой
Средний
