Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.03.2020, 18:48
Новичок на форуме
Отправить личное сообщение для Romazan13 Посмотреть профиль Найти все сообщения от Romazan13
 
Регистрация: 19.03.2020
Сообщений: 4

Как сделать загрузку галереи с центральной картинки, а не с первой
Сейчас при загрузке перегрузке страницы галерея начинается по порядку с 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;
  }
}
Ответить с цитированием
  #2 (permalink)  
Старый 19.03.2020, 19:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,078

Сообщение от Romazan13
по умолчанию загружалась с 3-й
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');
})
Ответить с цитированием
  #3 (permalink)  
Старый 19.03.2020, 20:31
Новичок на форуме
Отправить личное сообщение для Romazan13 Посмотреть профиль Найти все сообщения от Romazan13
 
Регистрация: 19.03.2020
Сообщений: 4

Спасибо, стало грузить с той фото что нужно, но только почему то ждать отклика стало долго. Секунд 10 наверное. И только потом слайдер становится активным.
Я просто cделал var active = 2 и заменил мой //Presets: на ваш
Ответить с цитированием
  #4 (permalink)  
Старый 19.03.2020, 21:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,078

Romazan13,
добавить после блока Presets:

active = 3;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
КАК сделать картинки галереи ссылками abuxasan Общие вопросы Javascript 1 04.03.2016 01:25
Как сделать загрузку изображения аля вконтакте? OklickSpb Общие вопросы Javascript 4 31.03.2012 16:12
Как сделать загрузку Store в поле Grid в зависимости от id строки? Сергей З ExtJS 5 02.12.2011 17:01
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 19:56
Как сделать смену картинки, типа "до" и "после", без перезагрузки страницы? btstudio Events/DOM/Window 2 23.02.2009 19:43