WEBSiCO - More freedom for web publishing

Comment intégrer un slideshow jQuery flexible ?

1- Dans un élément "Texte brut (HTML)" copier-coller le code suivant :

<!-- Include the jQuery library (local or CDN) -->
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<!-- Include the plugin *after* the jQuery library -->
<script src="bjqs-1.3.min.js"></script>

<!-- Styles -->
<style>
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:10;}
ul.bjqs-controls.v-centered li a{position:absolute; width: 20%; height: 100%;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}

ol.bjqs-markers{position: relative; list-style: none; padding: 0; margin: 1em; font-size: 1.5em; margin-top: -3em; z-index: 10;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block; width: 1em; height: 1em; background-color: transparent; color: transparent; margin: 0.3em; border: 0.3em white solid; border-radius: 1em;}
ol.bjqs-markers li a:hover {color: transparent; background-color: rgba(255, 255, 255, 0.2);}
ol.bjqs-markers li.active-marker a{background-color: red}

p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

/* To override the Websico default opacity transition */
#slider * {transition: opacity 0s; -moz-transition: opacity 0s; -webkit-transition: opacity 0s; -o-transition: opacity 0s;}

</style>

<!-- The HTML block -->
<div id="slider">
    <ul class="bjqs">
        <li><img src="image-1.jpg" alt="Enter a description here"></li>
        <li><img src="image-2.jpg" alt="Enter a description here"></li>
        <li><img src="image-3.jpg" alt="Enter a description here"></li>
    </ul>
</div>

<!-- Starter -->
<script>
jQuery(document).ready(function($) {
    $('#slider').bjqs({
        'height': 488,
        'width': 1680,
       responsive: true,
       nexttext: '',
       prevtext: '',
       centermarkers: false
    });
});
</script>

2- Associer les fichiers suivants :

  • Vos images

  • et le fichier suivant :
See elements, arrangements and settings in simulated edition mode
  • Enter a description here
  • Enter a description here
  • Enter a description here

Vous pouvez déplacer l’élément sur la page et appliquer les caractéristiques d’apparence de l’élément "Texte brut, HTML" (Bordures, Marges, Couleurs)

Back to top