• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Slick galeria

0 głosów
106 wizyt
pytanie zadane 14 maja 2017 w JavaScript, jQuery, AJAX przez Bartlomiej Bywalec (2,480 p.)
edycja 14 maja 2017 przez Bartlomiej

Siema mam problem ze zrobieniem tej opcji: Dolne zdjecia mam ale nie potrafie zrobic zeby górne zdjecie działało (te duze glowne)

Ze strony http://kenwheeler.github.io/slick/

Powei mi ktos co zle zrobilem??

kod:

 

 

 

 

<!DOCTYPE html>
<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
  </style>
</head>
<body>


  <section >
    <div>
      <img class="slider-for" src="1.jpg" style="height: 174px; width: 204px;">
    </div>
  </section>


  <section class="slider-nav">
    <div>
      <img src="1.jpg" style="height: 174px; width: 204px;">
    </div>
    <div>
      <img src="2.jpg" style="height: 174px; width: 204px;">
    </div>
    <div>
      <img src="3.jpg" style="height: 174px; width: 204px;">
    </div>
    <div>
      <img src="2.jpg" style="height: 174px; width: 204px;">
    </div>
    <div>
      <img src="2.jpg" style="height: 174px; width: 204px;">
    </div>
    <div>
      <img src="1.jpg" style="height: 174px; width: 204px;">
    </div>
    <div>
      <img src="3.jpg" style="height: 174px; width: 204px;">
    </div>
    <div>
      <img src="3.jpg" style="height: 174px; width: 204px;">
    </div>
    <div>
      <img src="1.jpg" style="height: 174px; width: 204px;">
    </div>
  </section>


  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 6,
  slidesToScroll: 3,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});
    });
  </script>

</body>
</html>

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
0 odpowiedzi 43 wizyt
pytanie zadane 10 lutego w HTML i CSS przez GaryNJ Nowicjusz (240 p.)
0 głosów
1 odpowiedź 57 wizyt
pytanie zadane 21 kwietnia 2017 w HTML i CSS przez SandraS Obywatel (1,400 p.)
0 głosów
1 odpowiedź 162 wizyt
pytanie zadane 26 września 2016 w JavaScript, jQuery, AJAX przez agnieshax Nowicjusz (120 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

62,371 zapytań

108,504 odpowiedzi

226,515 komentarzy

35,490 pasjonatów

Przeglądających: 340
Pasjonatów: 18 Gości: 322

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...