Как сделать загрузку галереи с центральной картинки, а не с первой
Сейчас при загрузке перегрузке страницы галерея начинается по порядку с 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; } } |
Цитата:
var active = 2; ... //Presets: //$(".panel:not(:first)").addClass("right"); $(".panel").each(function(i, elem) { if(i < active) elem.classList.add('left'); if(i > active) elem.classList.add('right'); }) |
Спасибо, стало грузить с той фото что нужно, но только почему то ждать отклика стало долго. Секунд 10 наверное. И только потом слайдер становится активным.
Я просто cделал var active = 2 и заменил мой //Presets: на ваш |
Romazan13,
добавить после блока Presets: active = 3; |
Часовой пояс GMT +3, время: 03:06. |