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.
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:
CSS 
HTML5 
<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>
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.
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've added two buttons with custom events for play and stop:</p>
<pre><code>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')
})</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>
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();
});
Jakie pliki /assets/ ? Nie posługiwałem się jquery, Co dopisać ?
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();
});
tak wygląda moja struktura katalogów, tylko co ma być w tych plikach: app.js i highlight.js ?
Czy kolega czyta dokumentację Pliki są w pobranym katalogu, trzeba je wyciągnąć do swojego projektu i zamieścić według dokumentacji
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.
To jest nawet za trudne do modyfikacji. Te programy są tak rozbudowane. Chodzi o zespół plików w js.
Dajcie coś najprostszego z karuzelami.
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.
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>
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.
W tym samym katalogu karuzela luzem, bez katalogów. Tylko pliki w katalogu karuzela.
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.
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.
Pokazuje to: Content1
Content2
Lub nic. Pozostają tylko przyciski. Nie ma ruchu obrazów.
Jak napisów nie przesuwa, to czy będzie obrazki ?
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.
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
Są obrazki w kodzie i katalogu naszych plików. Po uruchomieniu nic się nie dzieje.
<!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>
<!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>