77 lines
2.7 KiB
HTML
77 lines
2.7 KiB
HTML
[(#REM)
|
|
fork du modèle d'owl carousel
|
|
|
|
@param : id_article
|
|
@param : id-carousel : id unique du carousel
|
|
@param : caption : oui : Affiche la description de l'image.
|
|
@param : docs : 1,2,3 : selectionne individuellement les documents
|
|
@param : dots : true par defaut : affiche les points de navigation
|
|
@param : navigation : true par defaut : affiche les boutons précédents suivants
|
|
@param : caption_css : ajouter des css sur la description (par exemple : invisible).
|
|
@param : autoplay : true (false par défaut) : le carousel démarre automatiquement.
|
|
@param : autoplayHoverPause : true (false par défaut) : pause sur le rollHover en mode autoplay
|
|
@param : lazyLoad : true (false par défaut) : ne charge que les images visibles pour optimiser le chargement.
|
|
]
|
|
<style>
|
|
[#(#ENV{id-carousel,demo})] .owl-slide > .caption{
|
|
z-index: 100;
|
|
position: absolute;
|
|
left:55%;
|
|
width: 40%;
|
|
bottom:5%;
|
|
}
|
|
[#(#ENV{id-carousel,demo})] .owl-slide > .caption > .title{
|
|
background: #000;
|
|
color : #FFF;
|
|
padding: 5px;
|
|
width: auto;
|
|
}
|
|
[#(#ENV{id-carousel,demo})] .owl-slide > .caption > p {
|
|
background-color: rgba(88, 88, 88, 0.75) ;
|
|
/*float: right;*/
|
|
color: #FFF;
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
<div id="#ENV{id-carousel,demo}" class="owl-carousel owl-theme">
|
|
<BOUCLE_arti(ARTICLES){ps=une}>
|
|
<BOUCLE_listDocs(DOCUMENTS){id_article}{extension==jpg|png|gif}{statut in publie, prop}{par id_document}{0,1}>
|
|
<div class="owl-slide">
|
|
<div class="caption[ (#ENV{caption_css})]">
|
|
[<a class="lien_carousel" href="#URL_ARTICLE{#ID_ARTICLE}">
|
|
<h3 class="title">(#_arti:TITRE)</h3>
|
|
</a>]
|
|
</div>
|
|
<img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_recadre{855:555,-,focus}|image_reduire{855,566}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
|
|
</div>
|
|
</BOUCLE_listDocs>
|
|
</BOUCLE_arti>
|
|
</div>
|
|
<script type="text/javascript">
|
|
jQuery(function($){
|
|
$("[#(#ENV{id-carousel,demo})]").owlCarousel({
|
|
loop:true,[
|
|
navigation:(#ENV{navigation}),][
|
|
items: (#ENV{items, 1}),][
|
|
margin:(#ENV{margin}),][
|
|
dots:(#ENV{dots, false}),][
|
|
nav:(#ENV{navigation, true}),][
|
|
autoplay: (#ENV{autoplay}),][
|
|
autoplayHoverPause: (#ENV{autoplayHoverPause}),][
|
|
lazyLoad: (#ENV{lazyLoad}),][
|
|
autoplayTimeout: (#ENV{autoplayTimeout}),][
|
|
autoHeight: (#ENV{autoHeight}),][
|
|
URLhashListener:(#ENV{URLhashListener}),
|
|
startPosition: 'URLHash',]
|
|
navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
|
|
responsive:{
|
|
0:{
|
|
items:1
|
|
}[,
|
|
855:{
|
|
items:(#ENV{items})
|
|
}]
|
|
}
|
|
});
|
|
});
|
|
</script>
|