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

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.

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>
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.

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>
2

OK, ale czy w ogóle czytałeś dokumentację do tej karuzeli?
https://owlcarousel2.github.io/OwlCarousel2/docs/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();
});
0

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

0

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

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();
});
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?

0

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

1

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

0

Zobaczyłem co w tych plikach z rozszerzeniami js. Tam jest tragedia, chyba cały sztab ludzi to pisał. Dajcie jakiś najprostszy przykład z tymi karuzelami, aby to działało od początku do końca. Pełny kod.

0

To jest nawet za trudne do modyfikacji. Te programy są tak rozbudowane. Chodzi o zespół plików w js.

0

Dajcie coś najprostszego z karuzelami.

0

Zobaczyłem te pliki js. Przecież to pisał cały sztab ludzi. Dajcie jakiś prostszy przykład z tymi karuzelami, najprostszy z możliwych z pełnym kodem, aby to można było modyfikować. I oczywiście najlepiej w jednym piliku a nie w 10 plikach, bo tego zmodyfikować nie można.

1

Pobierasz paczkę ze strony, która podałeś w pierwszym poście. Interesuje cie z niej folder dist. a w nim pliki:
1.owl.carousel.min.css
2.owl.theme.default.min.css
3.owl.carousel.min.js
Potrzebujesz jeszcze jquery
Zakładając, ze wszytkie pliki sa w tym samym katalogu początkowy kod wygląda tak:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="owl.carousel.min.css">
    <link rel="stylesheet" href="owl.theme.default.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
    <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>
    <script src="owl.carousel.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".owl-carousel").owlCarousel();
        });
    </script>
</body>

</html>
0

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

‹›

Coś takiego pokazuje wyświetlana strona. To jest bez zastosowania. Ma ktoś inne rozwiązanie ? Nie poruszają się zdjęcia na ekranie.

0

W tym samym katalogu karuzela luzem, bez katalogów. Tylko pliki w katalogu karuzela.

0

To jak to powinno być podpięte w katalogu karuzela na pulpicie. Jak powinny wyglądać ścieżki dostępu ? Zakładam, że mam jeden katalog utworzony karuzela na pulpicie i chcę, aby wszystkie pliki były w katalogu karuzela.

0

Jeszcze raz spokojnie, rozumiem że masz już wyodrębnione potrzebne pliki ("owl.carousel.min.css", "owl.theme.default.min.css", "owl.carousel.min.js") i znajdują się one luzem w tym samym katalogu co plik HTML. Jak pisał kolega wyżej ?. Jeżeli tak, to twój plik HTML powinie wyglądać:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="owl.carousel.min.css" /> <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <link rel="stylesheet" href="owl.theme.default.min.css" /> <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <div class="owl-carousel">
      <div class="item">Content1</div>
      <div class="item">Content2</div>
    </div>
    <script src="owl.carousel.min.js"></script> <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <script>
      $(document).ready(function() {
        var owl = $(".owl-carousel");
        owl.owlCarousel({
          items: 2,
          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>
  </body>
</html>

Edit: Ale jak nie zajrzysz do dokumentacji sam, to wątpię, żeby uda Ci się coś sensownego stworzyć z tym.

0

Stwórz pusty katalog. Umieść w nim plik HTML z kodem, który napisałem oraz trzy pliki carousel, na które wskazują odnośniki w HTML (dwa CSS i jeden js)

0

Pokazuje to: Content1
Content2

Lub nic. Pozostają tylko przyciski. Nie ma ruchu obrazów.

0

Ale jakie ty chcesz mieć obrazki, skoro w poprzednich postach masz przykłady z tekstem zamiast obrazków? Wstaw zamiast tekstu obrazki, to będziesz miał to co chcesz.

0

Jak napisów nie przesuwa, to czy będzie obrazki ?

0
adamon napisał(a):

Jak napisów nie przesuwa, to czy będzie obrazki ?

Pewnie nie :P Ale piszesz w Twoich postach o obrazkach, a cytujesz kod w przykładach, w których nie ma obrazków. Trochę to wprowadza bajzel w temacie.

0

Podaję cały kod. Nic się niedzieje, obrazki zniknęły.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="owl.carousel.min.css" /> <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <link rel="stylesheet" href="owl.theme.default.min.css" /> <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <div class="owl-carousel">
      <div class="item">Content1</div>
      <img src="picture1.jpg">
      <img src="picture2.jpg">
      <img src="picture3.jpg">
      <div class="item">Content2</div>
     
      
    </div>
    <script src="owl.carousel.min.js"></script> <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <script>
      $(document).ready(function() {
        var owl = $(".owl-carousel");
        owl.owlCarousel({
          items: 2,
          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>
  </body>
</htm
0

Są obrazki w kodzie i katalogu naszych plików. Po uruchomieniu nic się nie dzieje.

0 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="owl.carousel.min.css" />
    <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <link rel="stylesheet" href="owl.theme.default.min.css" />
    <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <div class="owl-carousel">
      <div class="item"><img src="picture1.jpg" /></div>
      <div class="item"><img src="picture2.jpg" /></div>
      <div class="item"><img src="picture3.jpg" /></div>
    </div>
    <script src="owl.carousel.min.js"></script>
    <!-- Ten musi być w tym samy folderze, co plik HTML -->
    <script>
      $(document).ready(function() {
        var owl = $(".owl-carousel");
        owl.owlCarousel({
          items: 1,
          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>
  </body>
</html>
0 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
   <div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
            <div class="owl-item"><img src="https://via.placeholder.com/500X300" /></div>
        </div>
    </div>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})
    </script>
  </body>
</html>
0

Tylko, jest jeden problem. Zdjęcia nie poruszają się. Jak zrobić tą animację, aby się poruszały na ekranie ?

One powinny automatycznie się przesuwać np. co trzy sekundy.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto