70 lines
2.7 KiB
HTML
70 lines
2.7 KiB
HTML
[(#REM)
|
|
fork du modèle d'owl carousel pour le slider de la home EPISUR
|
|
dots = true
|
|
affiche des flêches pour suivant / précédents
|
|
autoplay = true
|
|
largeur = 750px
|
|
caption = oui
|
|
autoplayHoverPause = true
|
|
lazyLoad = true
|
|
id-carousel = slider_home
|
|
|
|
@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.
|
|
]
|
|
<div id="slider_home" class="owl-carousel owl-theme">
|
|
<BOUCLE_listDocs(DOCUMENTS){id_article?}{id_rubrique?}{extension==jpg|png}{tout}{par rang_lien}{largeur >= 800}{hauteur >= 430}>
|
|
[(#SET{couleur_text,#COULEUR_TEXT|sinon{#ffffff}})]
|
|
<div class="owl-slide">
|
|
<div class="caption"[ style="background-color:(#COULEUR_FOND);"]>[
|
|
[(#URL_TITRE|?{<a href="#URL_TITRE" class="message">,<div class="message" style="color:#GET{couleur_text}!important;">})]
|
|
(#DESCRIPTIF)
|
|
[(#URL_TITRE|?{</a>,</div>})]][
|
|
<div class="credits">[<a href="(#CREDITS*)" title="<:epb:voir_source_credits:>" style=" color:#GET{couleur_text}!important;">](#TITRE)[(#CREDITS|oui)<i class="fa fa-external-link"></i></a>]</div>]
|
|
</div>
|
|
[<a href="(#URL_TITRE)" class="" rel="diaporamaslider_home" style="color:#GET{couleur_text}!important;">]
|
|
<img class="[(#ENV{lazyLoad,true}|=={true}|oui) owl-lazy" data-]src="[(#FICHIER|image_recadre{1700:430,-,focus}|adaptive_images{1200}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
|
|
[(#URL_TITRE|oui)</a>]
|
|
</div>
|
|
</BOUCLE_listDocs>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
jQuery(function($){
|
|
$("#slider_home").owlCarousel({
|
|
loop:true,
|
|
lazyLoad: true,
|
|
caption: 'oui',
|
|
dots: true,
|
|
nav: true,
|
|
autoplay: false,
|
|
autoplayHoverPause: true,
|
|
largeur: 750,
|
|
items: 1,
|
|
autoHeight: true,
|
|
// URLhashListener: false,
|
|
// startPosition: 'URLHash',
|
|
navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
|
|
// navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
|
|
responsive:{
|
|
0:{
|
|
items:1
|
|
}
|
|
}
|
|
});
|
|
|
|
// Gallerie Colorbox
|
|
$("a.js-colorbox").colorbox({
|
|
rel:'diaporamaslider_home',
|
|
});
|
|
});
|
|
</script>
|
|
</B_listDocs>
|