bxSlider Carousel et Slideshow

by oilvier

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<div class="starter-carousel js-carousel-wrapper">
	<button type="button" class="bx-button starter-carousel__button js-carousel-prev" aria-label="Revenir aux éléments précédents" title="Précédent">
		Précédent
	</button>
	<button type="button" class="bx-button starter-carousel__button js-carousel-next" aria-label="Aller aux éléments suivants" title="Suivant">
		Suivant
	</button>
	<ul class="grids js-carousel">
		<li class="grid-1-3 mob-1-2 phab-full">
			<div class="starter-carousel__slide">1</div>
		</li>
		<li class="grid-1-3 mob-1-2 phab-full">
			<div class="starter-carousel__slide">2</div>
		</li>
		<li class="grid-1-3 mob-1-2 phab-full">
			<div class="starter-carousel__slide">3</div>
		</li>
		<li class="grid-1-3 mob-1-2 phab-full">
			<div class="starter-carousel__slide">4</div>
		</li>
	</ul>
</div>

<div class="starter-carousel js-carousel-wrapper">
	<button type="button" class="bx-button starter-carousel__button js-carousel-prev" aria-label="Revenir aux éléments précédents" title="Précédent">
		Précédent
	</button>
	<button type="button" class="bx-button starter-carousel__button js-carousel-next" aria-label="Aller aux éléments suivants" title="Suivant">
		Suivant
	</button>
	<ul class="grids js-carousel">
		<li class="grid-1-3 mob-1-2 phab-full">
			<div class="starter-carousel__slide">A</div>
		</li>
		<li class="grid-1-3 mob-1-2 phab-full">
			<div class="starter-carousel__slide">B</div>
		</li>
		<li class="grid-1-3 mob-1-2 phab-full">
			<div class="starter-carousel__slide">C</div>
		</li>
	</ul>
</div>

<div class="starter-slideshow js-slideshow-wrapper">
	<button type="button" class="bx-button starter-slideshow__button js-slideshow-prev" aria-label="Revenir aux éléments précédents" title="Précédent">
		Précédent
	</button>
	<button type="button"...

SCSS

$gutter:20px;

/* ==========================================================================
   ## Reset
   ========================================================================== */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, form, fieldset, legend, table, th, td, caption, hr {margin:0; padding:0;}

/**
 * On annule le style sur les listes  
 */
ol, ul {list-style:none;}

*, 
*:before, 
*:after {box-sizing: border-box;}

body {max-width:720px; margin:0 auto; background-color:beige;}

.grids {display:flex; flex-direction:row; flex-wrap:wrap; margin:0 0 0 -#{$gutter}; 
	& > * {flex:0 0 auto; padding-left:$gutter;}
}

.grid-1-3 {width:percentage(1/3);}

/* ==========================================================================
   ## Exemple de carousel via bxSlider
   ========================================================================== */
/* Sera le conteneur du carousel ainsi que des éléments de navigation */   
.starter-carousel {border:1px solid; margin:20px 0;

	/**
	 * Si le carousel est chargé on annule le comportement des grilles 
	 * Cela permet d'avoir à bxSlider de faire un calcul correct des dimensions de chaque slide
	 */
	&.is-loaded {
		.grids {margin-left:0; overflow:hidden;
			& > [class^="grid-"] {padding-left:0; box-sizing:content-box;}
		}
	}
}
	
	/* Par défaut, les boutons de navigation sont masqués */
	.starter-carousel__button {display:none;
		/* Si le carousel est chargé, on les affichent */
		.is-loaded & {display:block;}
	}

	
	.starter-carousel__slide {padding:5px; background-color:white; font-size:30px; text-align:center; border-radius:6px;}

/* ==========================================================================
   ## Exemple de slideshow via bxSlider
   ========================================================================== */
$ratio-slideshow:9/16!default;  
/**
 * 1. Afin d'éviter un affichage temporaire de tous les slides
 * au chargement de la page, on bloque la hauteur du slideshow...

JavaScript

/*===================================================
=            Déclaration des breakpoints            =
===================================================*/

/**
 *
 * Les breakpoints définis en CSS sont déclarés en JS 
 * afin de pouvoir être utilisés avec enquire.js
 * Dans le cas d'une modification des breakpoints dans
 * le CSS, il faudra reporter la modification ici.
 *
 */

var bp_palm 				= (451 / 16) * 1 - .01 + 'em',
	bp_palm_min 			= (451 / 16) * 1 + 'em',
	bp_phab 				= (721 / 16) * 1 - .01 + 'em',
	bp_phab_min				= (721 / 16) * 1 + 'em',
	bp_mob 					= (831 / 16) * 1 - .01 + 'em',
	bp_mob_min				= (831 / 16) * 1 + 'em',
	bp_lap 					= (1001 / 16) * 1 - .01 + 'em',
	bp_lap_min 				=  (1001 / 16) * 1 + 'em',
	
	// Tweakpoints
	bigPhones				= (571 / 16) * 1 - .01 + 'em',
	bigPhones_min			= (571 / 16) * 1 + 'em',
	layoutBreak				= (1601 / 16) * 1 - .01 + 'em';
	layoutBreak_min			= (1601 / 16) * 1 + 'em';
/*=====  End of Déclaration des breakpoints  ======*/



/*======================================================
=            Exemple de carousel responsive            =
======================================================*/
var carouselWrapper	= $('.js-carousel-wrapper'), // Sera le conteneur du carousel ainsi que des éléments de navigation  
	currentConfig 	= {},
	loadedClass 	= 'is-loaded',
	lapSlides		= 3,
	mobSlides		= 2;

if(carouselWrapper.length) {
	/** 
	 * La méthode via `each` permet d'avoir plusieurs carousels dans la même page 
	 * avec la même instance
	 */
	$(carouselWrapper).each(function(i){
		var	$this 				= $(this),
			carousel 			= $this.find(".js-carousel"),
			carouselItems		= carousel.find('> li:not(.bx-clone)'),
			carouselPrev 		= $this.find('.js-carousel-prev'),
			carouselNext 		= $this.find('.js-carousel-next'),
			carouselOptions		= {
				/**
				 * Configuration commune à tous les carousels
				 * On changera ensuite uniquement le nombre de slides et leurs dimensions
				 * selon la taille de l'écran
				...