2015/11/10

Owl Carousel - 2 rodzaje sliderów


W tym tutorialu zamieściłam gotowe kody skryptów sliderów Owl Carousel, które można umieścić w dowolnym miejscu na swoim blogu. Ja zademonstruję, w jaki sposób wstawić je nad nagłówkiem Bloggera (nad tytułem bloga, czyli na samej górze strony).

By umieścić slider nad nagłówkiem bloga, wybierz kod jednego z dwóch stylów, po czym wejdź do panelu admina i edytuj kod HTML szablonu. Następnie pod </head> wklej:

Styl 1

<div id="owl-demo">

<div class="item"><a href="#"><img src="http://3.bp.blogspot.com/-1he0RHfS1Qc/VVtHoVhR6zI/AAAAAAAALPk/SffZ5m554E8/s1600/11249567_701081896670510_741585563_n.jpg" alt="Owl Image"/></a></div>
<div class="item"><a href="#"><img src="http://4.bp.blogspot.com/-vEOBoe_uOAc/VVtHpC4HEeI/AAAAAAAALPs/CQW1Tut6oZ4/s1600/11252517_910243502352600_1786553711_n.jpg" alt="Owl Image"/></a></div>
<div class="item"><a href="#"><img src="http://4.bp.blogspot.com/-DyatJrS0NDA/VVtHpEDB_-I/AAAAAAAALPo/M-NySVhq3HQ/s1600/11261119_486485558176037_1513208573_n.jpg" alt="Owl Image"/></a></div>
<div class="item"><a href="#"><img src="http://1.bp.blogspot.com/-wWaKHF_pmFU/VVtHpkxK-xI/AAAAAAAALPw/RTSNeDJOGDo/s1600/11280183_691477317623840_1635703562_n.jpg" alt="Owl Image"/></a></div>
<div class="item"><a href="#"><img src="http://2.bp.blogspot.com/-MOLeUhlC7ME/VVtHqsk5oPI/AAAAAAAALQA/LSqpT5x48R0/s1600/11283340_445345902301752_1477116257_n.jpg" alt="Owl Image"/></a></div>
<div class="item"><a href="#"><img src="http://3.bp.blogspot.com/-FV-DyW9gi2I/VVtHsNAX0tI/AAAAAAAALQM/sztCDqB3Eug/s1600/11311181_1109146942434609_104438895_n.jpg" alt="Owl Image"/></a></div>
<div class="item"><a href="#"><img src="http://4.bp.blogspot.com/-sAdvz7OkdVo/VVtHsaXFlSI/AAAAAAAALQQ/mfj6y68iqCc/s1600/11326012_817078068367162_1391198318_n.jpg" alt="Owl Image"/></a></div>
<div class="item"><a href="#"><img src="http://1.bp.blogspot.com/-vmG74kX9W5c/VVtHtMi9IUI/AAAAAAAALQc/xktrdTTT2KY/s1600/11333444_1583145218608216_1137232056_n.jpg" alt="Owl Image"/></a></div>

</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://googledrive.com/host/0BzWYBwKfT2edaG0xTzRTVTU5ZXM"/>
<link rel="stylesheet" href="https://googledrive.com/host/0BzWYBwKfT2edUG1kQmh4TVA5UTQ"/>
<script src="https://googledrive.com/host/0BzWYBwKfT2edUHBrS2lnV1FsN28" type="text/javascript"/>
<script src="https://googledrive.com/host/0BzWYBwKfT2eddlFPaTFwcXFjRms" type="text/javascript"/>
<style>
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>


<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000,
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});

});
</script>

Styl 2

<div id="owl-demo" class="owl-carousel owl-theme">

<div class="item"><a href="#"><img src="http://3.bp.blogspot.com/-1he0RHfS1Qc/VVtHoVhR6zI/AAAAAAAALPk/SffZ5m554E8/s1600/11249567_701081896670510_741585563_n.jpg" alt="Text1"/></a></div>
<div class="item"><a href="#"><img src="http://4.bp.blogspot.com/-vEOBoe_uOAc/VVtHpC4HEeI/AAAAAAAALPs/CQW1Tut6oZ4/s1600/11252517_910243502352600_1786553711_n.jpg" alt="Text2"/></a></div>
<div class="item"><a href="#"><img src="http://4.bp.blogspot.com/-DyatJrS0NDA/VVtHpEDB_-I/AAAAAAAALPo/M-NySVhq3HQ/s1600/11261119_486485558176037_1513208573_n.jpg" alt="Text3"/></a></div>

</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://googledrive.com/host/0BzWYBwKfT2edaG0xTzRTVTU5ZXM"/>
<link rel="stylesheet" href="https://googledrive.com/host/0BzWYBwKfT2edUG1kQmh4TVA5UTQ"/>
<script src="https://googledrive.com/host/0BzWYBwKfT2edUHBrS2lnV1FsN28" type="text/javascript"/>
<script src="https://googledrive.com/host/0BzWYBwKfT2eddlFPaTFwcXFjRms" type="text/javascript"/>
<style>
#owl-demo .item img{
display: block;
width: 700px;
height: 400px;
margin: 0 auto;
}
</style>


<script>
$(document).ready(function() {

$("#owl-demo").owlCarousel({

autoPlay: 3000,
navigation : false, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true

// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false

});

});
</script>
Na koniec zapisz szablon.

Dostosowywanie ustawień slidera

  • # zaznaczone na zielono zamień na linki do poszczególnych postów.
  • Linki zaznaczone na pomarańczowo zamień na bezpośrednie adresy do obrazków.
  • Tekst zaznaczony na turkusowo zamień na opis / tytuł slajdu.
Oczywiście slider posiada mnóstwo innych opcji dostosowywania szybkości, automatycznego przewijania, itd, jednak ten poradnik stworzyłam dla początkujących. Jeśli jesteś bardziej zaawansowanym webmasterem, więcej informacji przeczytasz na stronie Owl Carousel.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.