Сейчас при загрузке перегрузке страницы галерея начинается по порядку с 1-й (1.jpg)
Нужно чтобы при загрузке страницы, по умолчанию загружалась с 3-й (3.jpg)
Вариант с зацикливанием не подходит - нужны крайняя левая и крайняя правая фотографии.
$(document).ready(function(){
//Swipe speed:
var speed = "650"; //ms.
//Elements:
var interactiveElements = $('input, button, a');
var itemsLength = $('.panel').length;
var active = 1;
//Background images:
for (i=1; i<=itemsLength; i++){
var $layer = $(".panel:nth-child("+i+")");
var bgImg = $layer.attr("data-img");
$layer.css({
"background": "url("+bgImg+") no-repeat center",
"ackground-size": "cover",
});
};
//Transitions:
setTimeout(function() {
$(".panel").css({
"transition": "cubic-bezier(.4,.95,.5,1.5) "+speed+"ms"
});
}, 200);
//Presets:
$(".panel:not(:first)").addClass("right");
//Swipe:
function swipeScreen() {
$('.swipe').on('mousedown touchstart', function(e) {
var touch = e.originalEvent.touches;
var start = touch ? touch[0].pageX : e.pageX;
var difference;
$(this).on('mousemove touchmove', function(e) {
var contact = e.originalEvent.touches,
end = contact ? contact[0].pageX : e.pageX;
difference = end-start;
});
//On touch end:
$(window).one('mouseup touchend', function(e) {
e.preventDefault();
//Swipe right:
if (active < itemsLength && difference < -30) {
$(".panel:nth-child("+active+")").addClass("left");
$(".panel:nth-child("+(active+1)+")").removeClass("right");
active += 1;
btnDisable();
};
// Swipe left:
if (active > 1 && difference > 30) {
$(".panel:nth-child("+(active-1)+")").removeClass("left");
$(".panel:nth-child("+active+")").addClass("right");
active -= 1;
btnDisable();
};
$('.swipe').off('mousemove touchmove');
});
});
};
swipeScreen();
//Prevent swipe on interactive elements:
interactiveElements.bind('touchstart touchend touchup', function(e) {
e.stopPropagation();
});
//Buttons:
$(".btn-prev").click(function(){
// Swipe left:
if (active > 1) {
$(".panel:nth-child("+(active-1)+")").removeClass("left");
$(".panel:nth-child("+active+")").addClass("right");
active -= 1;
btnDisable();
};
});
$(".btn-next").click(function(){
//Swipe right:
if (active < itemsLength) {
$(".panel:nth-child("+active+")").addClass("left");
$(".panel:nth-child("+(active+1)+")").removeClass("right");
active += 1;
btnDisable();
};
});
function btnDisable() {
if (active >= itemsLength) {
$(".btn-next").prop("disabled", true);
$(".btn-prev").prop("disabled", false);
}
else if (active <= 1) {
$(".btn-prev").prop("disabled", true);
$(".btn-next").prop("disabled", false);
}
else {
$(".btn-prev, .btn-next").prop("disabled", false);
};
};
});
$(function() {
var offset = $("#anketa").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#anketa").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {$("#anketa").stop().animate({marginTop: 0});};});
<div class="container">
<div class="swipe" >
<div class="panel" data-img="http://1.jpg"></div>
<div class="panel" data-img="http://2.jpg"></div>
<div class="panel" data-img="http://3.jpg"></div>
<div class="panel" data-img="http://4.jpg"></div>
<div class="panel" data-img="http://5.jpg"></div>
</div>
</div>
html,
body,
.container {
width: 988px;
height: 100%;
max-height: auto;
margin:0 auto;
position: relative;
}
/* Panels */
.swipe {
position: relative;
width: 976px;
height: 100%; /* "min-height" doesn't work on Firefox. */
background: #000000;
overflow-x: hidden;
margin:10px 0 0 10px;
}
.panel {
position: absolute;
width: 976px;
min-height: 100%;
top: 0;
left: 0;
}
.left {
left: -100%;
}
.right {
left: 100%;
}
/* Buttons */
.info {
position: absolute;
width: 100%;
}
.info:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transform: translate(-10px, -10px);
-ms-transform: translate(-10px, -10px);
-o-transform: translate(-10px, -10px);
transform: translate(-10px, -10px);
background: #cdd2ff; /* Красный */
background: #ffafd7; /* Синий */
}
.buttons {
position:absolute;
bottom:620px;
margin-left:434px;
pointer-events: all;
}
.btn-prev,
.btn-next {
width: 70px;
height: 20px;
border: none;
outline: none;
border-radius: 5px;
color: #FFFFFF;
background: -webkit-linear-gradient(top, #c8e1dc, #8caabe);
background: linear-gradient(to bottom, #c8e1dc, #8caabe);
box-shadow: 2px 2px 10px 2px rgba(10,10,10,.3);
cursor: pointer;
}
.buttons button {
transition: ease .4s;
}
.buttons button:hover {
box-shadow: 2px 2px 10px 2px rgba(10,10,10,.7);
}
/*
.buttons button:disabled {
box-shadow: 2px 2px 10px 5px rgba(10,10,10,.7);
background: -webkit-linear-gradient(top, #8caabe, #c8e1dc);
background: linear-gradient(to bottom, #8caabe, #c8e1dc);
cursor: default;
}
*/
@media (max-width: 620px) {
body {
font-size: 13px;
line-height: 1.5em;
}
.info {
position: absolute;
width: 100%;
max-width: 100%;
bottom: 0;
right: 0;
}
.inner {
padding: .5em 1.5em;
box-shadow: none;
}
.buttons {
display: none;
}
}
