Chcę stworzyć "karuzelę".

pytanie zadane 19 lipca 2016 w JavaScript przez R.orlinski Mądrala (5,490 p.)

Witam serdecznie.

Dopiero uczę się JavaScriptu, a chciałem wstawić na stronę tzw. "karuzelę" czyli przewijany tekst lub grafiki na danym obszarze. Korzystałem z tej strony internetowej: http://www.owlcarousel.owlgraphic.com/ i za nic nie mogę tego pojąć, ani też nie chce to zadziałać. Na pewno robię coś źle.

Czy ktoś ma jakiś poradnik czy to w formie dokumentacji, czy filmu, który opisywałby tworzenie tego krok po kroku, a tym samym przystępniej dla takiego laika jak ja?

Pozdrawiam.

2 odpowiedzi

odpowiedź 19 lipca 2016 przez Comandeer Guru (600,810 p.)

w formie dokumentacji

http://www.owlcarousel.owlgraphic.com/docs/started-installation.html → chyba bardziej na kroki się tego rozbić nie da.

komentarz 19 lipca 2016 przez R.orlinski Mądrala (5,490 p.)

No właśnie robię wg. tego i jedyne co otrzymuje to białą stronę w przeglądarce.

komentarz 19 lipca 2016 przez Comandeer Guru (600,810 p.)

Wypada najpierw dołączyć wymagane skrypty a później wywoływać zawarte w nich funkcje.

odpowiedź 19 lipca 2016 przez Kornelia Kobiela Nałogowiec (33,340 p.)

Wiesz, nie pokazałeś kodu jaki piszesz - ja osobiście nie wróżę z fusów Kodu maszynowego ani adresów IP, więc nie bardzo umiem ci pomóc. Z tego co widzę, to dokumentacja na stronie, którą podałeś jest dość przyjaźnie i czytelnie napisana. Poczytaj przykłady, które masz na stronie. Możesz używać konsoli dla JS z poziomu przeglądarki i tam obejrzeć kod dowolnej strony.

Nie wiem, czy programujesz w jakimś języku już, ale jeśli nie, to może lepiej na początek opanować sam JS w lepszym stopniu, a dopiero potem korzystać z gotowych narzędzi?

komentarz 19 lipca 2016 przez R.orlinski Mądrala (5,490 p.)

Jeśli nie weźmiemy pod uwagę HTML i CSS to nie programuje. :P Uczę się właśnie JavaScriptu jako pierwszy język.

Ten kod wygląda tak:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="owl.carousel.css">
  <link rel="stylesheet" href="owl.theme.css">

  <style type="text/css">
  #owl-demo .item{
    background: #3fbf79;
    padding: 30px 0px;
    margin: 10px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
  }
  .customNavigation{
    text-align: center;
  }
  //use styles below to disable ugly selection
  .customNavigation a{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  </style>




</head>
<body>


<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>



 <script type="text/javascript">
  $(document).ready(function() {
   
  $("#owl-example").owlCarousel();
   
  });


  $('.owl-carousel').owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      responsive:{
          0:{
              items:1
          },
          600:{
              items:3
          },
          1000:{
              items:5
          }
      }
  })
  </script> 
<script src="jquery-1.9.1.min.js"></script>
<script src="owl.carousel.js"></script>
</body>
</html>

Korzystałem z tego co podesłał Comandeer: http://www.owlcarousel.owlgraphic.com/docs/started-installation.html

oraz z tego: http://www.owlcarousel.owlgraphic.com/demos/basic.html