Wątek przeniesiony 2016-05-24 17:36 z Webmastering przez dzek69.

slider nie działa

0

Witam,
Próbuje wstawić slider na stronę jednak nie wiem dlaczego nie działa. o czym zapomnialem?
Slider ten - http://codepen.io/desandro/pen/wBPJZj
No i tam wszystko śmiga, a gdy wstawie to do jakiegoś tam pliku html dokładnie tak samo :

<!DOCTYPE html>
<html>
<head>

<style>
.gallery {
  background: black;
}

.gallery-cell {
  width: 100%;
  height: 400px;
}

.gallery-cell img {
  display: block;
  max-height: 400px;
  max-width: 100%;
  margin: 0 auto;
}

</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {

  var $gallery = $('.gallery').flickity({
    cellSelector: '.gallery-cell'
  })

});
</script>
</head>

<body>
<div class="gallery">
  <div class="gallery-cell"><img src="http://i.imgur.com/bwy74ok.jpg" alt="A lovely tree of oranges" /></div>
  <div class="gallery-cell"><img src="http://i.imgur.com/bAZWoqx.jpg" alt="Gentleman submerged in water" /></div>
  <div class="gallery-cell"><img src="http://i.imgur.com/PgmEBSB.jpg" alt="At the summit, just chillin', thinking about quinoa" /></div>
  <div class="gallery-cell"><img src="http://i.imgur.com/aboaFoB.jpg" alt="One World Trade" /></div>
  <div class="gallery-cell"><img src="http://i.imgur.com/LkmcILl.jpg" alt="Twas rainy that day. The day I lost my keys." /></div>
  <div class="gallery-cell"><img src="http://i.imgur.com/q9zO6tw.jpg" alt="Felix could smell fear" /></div>
  <div class="gallery-cell"><img src="http://i.imgur.com/r8p3Xgq.jpg" alt="And in the sky, a she saw Harold flying" /></div>
  <div class="gallery-cell"><img src="http://i.imgur.com/hODreXI.jpg" alt="Bae gets emo sometimes" /></div>
  <div class="gallery-cell"><img src="http://i.imgur.com/UORFJ3w.jpg" alt="I will not leave my wingman" /></div>
</div>
</body>
</html>

To slider nie działa, tworzy sie po prostu wielku div, w ktorym sa obrazki jeden pod drugim. Czego tutaj brakuje?

1

A nie zapomniałeś dodać linka do pluginu jQuery?

<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script>

0

Nie, jest tam takie podpięcie :

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
1

Znajdź 10 różnic:
https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js
http://code.jquery.com/jquery-latest.min.js

Widzę taką analogię:

  • Panie, nie działa mi samochód.
  • Brakuje silnika...
  • No jak, przecież ma kierownicę, pedał gazu, dźwignię zmiany biegów. Dlaczego nie działa?

Brakuje Ci absolutnych podstaw. Poczytaj co to jest jQuery, co to jest plugin, czym się różnią. Zrozum też, że do strony można załączać wiele plików js, można też umieszczać kod js bezpośrednio w html. Pliki te i kod na stronie mogą korzystać z siebie nawzajem, wtedy jeden bez drugiego nie zadziała.
Rozwiązanie masz już podane w mojej poprzedniej odpowiedzi, wystarczy je zrozumieć i zastosować.

0

Dzięki mądralo, działa.

1 użytkowników online, w tym zalogowanych: 0, gości: 1