Jak powinien wyglądać pełny kod programu karuzeli slajdera poniżej ?

Odpowiedz Nowy wątek
2019-04-11 13:14
0

Nada tegol nie rozumiem. Mogę prosić o podanie kodu, który jak wkleję do pliku html będzie pokazywał automatyczną karuzelę zdjęć jak na stronie www: https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html

Zależy mi na pełnym kodzie do takiego slajdera (karuzeli) zdjęć, abym mógł po zapisaniu w pliku html zobaczyć efekt jak na stronie autoplay.html

Dziękuję za pomoc i szczegółowe odpowiedzi.

Pozostało 580 znaków

2019-04-11 13:59
1

Odpal sobie stronę z demo, a następnie wybierz "pokaż żródło" (skrót klawiaturowy Ctrl+U). I zobacz, co się tam dzieje.

Podpowiedź: za te 12 przesuwających się prostokątów odpowiada poniższy kod:

          <div class="owl-carousel owl-theme">
            <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>

That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say

Pozostało 580 znaków

2019-04-11 14:10
0

Próbowałem to zrobić. Ale po wklejeniu tego kodu i utworzeniu pliku html powstaje zupełnie inna strona. Nie ma tam poruszających się tych zdjęć i slajderów. Dlatego tego nie rozumiem.

Pozostało 580 znaków

2019-04-11 14:13
0

Po wklejeniu tego kodu i zapisaniu pliku jako html. Tam nie ma karuzeli i poruszających się prostokątów. Dlaczego ?

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- head -->
    <meta charset="utf-8">
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Autoplay usage demo">
    <meta name="author" content="David Deutsch">
    <title>
      Autoplay Demo | Owl Carousel | 2.3.4
    </title>

    <!-- Stylesheets -->
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="../assets/css/docs.theme.min.css">

    <!-- Owl Stylesheets -->
    <link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- Favicons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="shortcut icon" href="../assets/ico/favicon.png">
    <link rel="shortcut icon" href="favicon.ico">

    <!-- Yeah i know js should not be in header. Its required for demos.-->

    <!-- javascript -->
    <script src="../assets/vendors/jquery.min.js"></script>
    <script src="../assets/owlcarousel/owl.carousel.js"></script>
  </head>
  <body>

    <!-- header -->
    <header class="header">
      <div class="row">
        <div class="large-12 columns">
          <div class="brand left">
            <h3>
              <a href="/OwlCarousel2/">owl.carousel.js</a> 
            </h3>
          </div>
          <a id="toggle-nav" class="right">
            <span></span> <span></span> <span></span> 
          </a> 
          <div class="nav-bar">
            <ul class="clearfix">
              <li> <a href="/OwlCarousel2/index.html">Home</a>  </li>
              <li class="active">
                <a href="/OwlCarousel2/demos/demos.html">Demos</a> 
              </li>
              <li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a>  </li>
              <li>
                <a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a> 
                <span class="download"></span> 
              </li>
            </ul>
          </div>
        </div>
      </div>
    </header>

    <!-- title -->
    <section class="title">
      <div class="row">
        <div class="large-12 columns">
          <h1>Autoplay</h1>
        </div>
      </div>
    </section>

    <!--  Demos -->
    <section id="demos">
      <div class="row">
        <div class="large-12 columns">
          <div class="owl-carousel owl-theme">
            <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>
          <a class="button secondary play">Play</a> 
          <a class="button secondary stop">Stop</a> 
          <h3 id="overview">Overview</h3>
          <p>Autoplay plugin has three options:</p>
          <pre><code>//default settings:
autoplay:false
autoplayTimeout:5000
autoplayHoverPause:false</code></pre>
          <p>In this example i&#39;ve added two buttons with custom events for play and stop:</p>
          <pre><code>var owl = $(&#39;.owl-carousel&#39;);
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true
});
$(&#39;.play&#39;).on(&#39;click&#39;,function(){
    owl.trigger(&#39;play.owl.autoplay&#39;,[1000])
})
$(&#39;.stop&#39;).on(&#39;click&#39;,function(){
    owl.trigger(&#39;stop.owl.autoplay&#39;)
})</code></pre>
          <script>
            $(document).ready(function() {
              var owl = $('.owl-carousel');
              owl.owlCarousel({
                items: 4,
                loop: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 1000,
                autoplayHoverPause: true
              });
              $('.play').on('click', function() {
                owl.trigger('play.owl.autoplay', [1000])
              })
              $('.stop').on('click', function() {
                owl.trigger('stop.owl.autoplay')
              })
            })
          </script>
        </div>
      </div>
    </section>

    <!-- footer -->
    <footer class="footer">
      <div class="row">
        <div class="large-12 columns">
          <h5>
            <a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a> 
            <a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a> 
          </h5>
        </div>
      </div>
    </footer>

    <!-- vendors -->
    <script src="../assets/vendors/highlight.js"></script>
    <script src="../assets/js/app.js"></script>
  </body>
</html>

Pozostało 580 znaków

2019-04-11 14:28
2

OK, ale czy w ogóle czytałeś dokumentację do tej karuzeli?
https://owlcarousel2.github.i[...]ocs/started-installation.html
1) include jQuery and owl.carousel.min.js into the footer.

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

2) All you need is to wrap your divs(owl works with any type element a/img/span..) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file. If you want the default nav controls like dots or buttons, you must also include the "owl-theme" class on that same div.

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

3) Now call the Owl initializer function and your carousel is ready.

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
edytowany 2x, ostatnio: cerrato, 2019-04-11 15:06

Pozostało 580 znaków

2019-04-11 16:31
0

Czy tam są twoje pliki?
../assets/

edytowany 1x, ostatnio: pablop76, 2019-04-11 16:33

Pozostało 580 znaków

2019-04-12 14:07
0

Jakie pliki /assets/ ? Nie posługiwałem się jquery, Co dopisać ?

Pozostało 580 znaków

2019-04-12 19:21
0

Czy chodzi o wiersze:

<script src="../assets/vendors/highlight.js"></script>
<script src="../assets/js/app.js"></script>

Czy tam w plikach app.js oraz highlight.js mam dodać to:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

Pozostało 580 znaków

2019-04-12 20:05
1

@cerrato wkleił Ci instrukcję. Wszytko jasno opisane. Ale mi chodzi o to, że ścieżki w twoim kodzie, który podałeś prowadzą do folderu assets i dalej w głąb. I moje pytanie jest takie: czy twoja struktura katalogów właśnie tak wygląda?

Pozostało 580 znaków

2019-04-12 20:44
0

tak wygląda moja struktura katalogów, tylko co ma być w tych plikach: app.js i highlight.js ?

Pozostało 580 znaków

2019-04-12 20:51
1

Czy kolega czyta dokumentację Pliki są w pobranym katalogu, trzeba je wyciągnąć do swojego projektu i zamieścić według dokumentacji

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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