Problemy ze slajderem Wallop. Slajdy skaczą w górę przy przewijaniu.

Question

Witam, przy przewijaniu slajdów w slajderze Wallop slajd skacze o jakieś 25px w górę. Jest to o dziwo drugi obiekt Wallop na tej stronie a pierwszy działa jak powinien. Proszę o pomoc, kod znajdziecie w narzędziach dla programistów. Rozchodzi się o slajder w sekcji "Co sądzą o mnie moi klienci?":
www.amalamastering.com

Answer 1

Znalazłem coś takiego, że element o klasie Wallop-list jest ma dodawany padding w kodzie HTML aby slider nie miał ucietych elementów. Nie wiem czy sam go wpisałeś czy dodaje go skrypt wallop'a ale myślę że tu jest problem ponieważ zmienia się pozycjonowanie elementu który ma wyjechać poza ekran na absolute z relative, a pozycjonowanie absolute ignoruje ci 25px padding. Możesz to np. rozwiązać dodając do klasy .Wallop-item 25px padding zamiast stylować element Wallop-list.

Comments

Mój kod css:
 

.Wallop2
{
  overflow: visible;
  position: relative;
}

.Wallop-list
{
  overflow: visible;
  margin: 0 auto;
}

Kod pliku css od wallop-a:
 

.Wallop {
  position: relative;
}

/*
  This element groups all the items, but not the buttons

  It's a recommendation but it's very likely
  you'll want to hide any overflow from the items
  Especially when doing animations such as scale
 */
.Wallop-list {
  position: relative;
  overflow: hidden;
}

/*
  This is the item element

  By default, they are all hidden and
  positioned absolute
  I recommend always having .Wallop-item--current
  in your markup by default (probably on the first element)
 */
.Wallop-item {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/*
  This is the current item element

  All we do here, is make it visible again reset
  the position to static. Could also be relative
 */
.Wallop-item--current {
  visibility: visible;
  position: relative;
}

 

---

<div class="Wallop-list" style="padding: 25px;"> ... </div>

Tutaj jest twój problem. W tym miejscu w drugim sliderze występuje padding który jest brany pod uwagę przez element przy wartości relative i ignorowany przy absolute. Pytanie czy ty umieściłeś tam tag style czy umieścił go tam skrypt wallopa.

Tak na szybko możesz spróbować edytować klasy wallopa w taki sposób i spr czy przestanie skakać :D

.Wallop-list {
  position: relative;
  overflow: hidden;
  padding: 25px;
}

.Wallop-item {
  visibility: hidden;
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
}

.Wallop-item--current {
  visibility: visible;
  position: relative;
  top:0px;
}

 

---

Fakt, widzę już o co ci chodzi. Dodałem ten padding ponieważ w środku mam elementy position-absolute które były ucinane... Czy dało by się w takim razie jakoś inaczej załatwić ten problem? Zobacz co się stało jak usunąłem ten padding...

---

Przepraszam, nie zauważyłem kodu bo dodałeś go potem, on działa! Dzięki wielkie :)

---

Teraz jest problem z tym, że podczas przewijania pozostaje przycisk np play chyba z poprzedniego slajdu dając bardzo dziwny i brzydki efekt:
http://www27.zippyshare.com/v/iRiQjkzJ/file.html