amélioration du carousel bootstrap

bootstrap/css/_carousel.scss

@@ -1,4 +1,13 @@
-// Wrapper for the slide container and indicators
+// Notes on the classes:
+//
+// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
+//    the active slide is heading.
+// 2. .active.carousel-item is the current slide.
+// 3. .active.carousel-item-left and .active.carousel-item-right is the current
+//    slide in its in-transition state. Only one of these occurs at a time.
+// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+//    is the upcoming slide in transition.
+
 .carousel {
   position: relative;
 }
@@ -14,7 +23,6 @@
   display: none;
   align-items: center;
   width: 100%;
-  @include transition($carousel-transition);
   backface-visibility: hidden;
   perspective: 1000px;
 }
@@ -23,6 +31,7 @@
 .carousel-item-next,
 .carousel-item-prev {
   display: block;
+  @include transition($carousel-transition);
 }
 
 .carousel-item-next,
@@ -31,7 +40,6 @@
   top: 0;
 }
 
-// CSS3 transforms when supported by the browser
 .carousel-item-next.carousel-item-left,
 .carousel-item-prev.carousel-item-right {
   transform: translateX(0);
@@ -60,6 +68,42 @@
 }
 
 
+//
+// Alternate transitions
+//
+
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-duration: .6s;
+    transition-property: opacity;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    opacity: 1;
+  }
+
+  .active.carousel-item-left,
+  .active.carousel-item-right {
+    opacity: 0;
+  }
+
+  .carousel-item-next,
+  .carousel-item-prev,
+  .carousel-item.active,
+  .active.carousel-item-left,
+  .active.carousel-item-prev {
+    transform: translateX(0);
+
+    @supports (transform-style: preserve-3d) {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+
 //
 // Left/right controls for nav
 //
@@ -91,13 +135,13 @@
 .carousel-control-prev {
   left: 0;
   @if $enable-gradients {
-    background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
+    background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
   }
 }
 .carousel-control-next {
   right: 0;
   @if $enable-gradients {
-    background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
+    background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
   }
 }
 
@@ -145,6 +189,7 @@
     margin-right: $carousel-indicator-spacer;
     margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
+    cursor: pointer;
     background-color: rgba($carousel-indicator-active-bg, .5);
 
     // Use pseudo classes to increase the hit area by 10px on top and bottom.

css/_sq_balint.scss

@@ -179,11 +179,20 @@ a, a:hover {
 /**************************** CAROUSEL ********************************/
 /**********************************************************************/
 
-.carousel-item{
+#diaporama_accueil{
+	height: 430px;
 	background: $bg-diapo;
+}
+
+
+.carousel-item{
 	padding: 2rem;
 	border-radius: 0.2rem;
 	font-size: 1.2rem;
+	opacity: 0;
+	&.active{
+		opacity: 1;
+	}
 }
 
 .carousel-caption{
@@ -211,6 +220,26 @@ a, a:hover {
 	margin: 2rem;
 }
 
+.carousel, .carousel-inner, .carousel-item {
+    height: 100%;
+}
+
+.carousel-fade .carousel-item {
+	transition-duration: 1.5s;
+}
+
+.carousel-item.active, .carousel-item-next, .carousel-item-prev {
+	transition: transform 1.5s ease, opacity 0.2s;
+}
+
+.carousel-indicators li{
+	height: 8px;
+	width: 8px;
+	margin-right: 4px;
+	margin-left: 4px;
+	border-radius: 100%;
+}
+
 /**********************************************************************/
 /***************************** FOOTER *********************************/
 /**********************************************************************/

css/mon_site.css

@@ -5615,10 +5615,6 @@ button.close {
   -webkit-box-align: center;
           align-items: center;
   width: 100%;
-  -webkit-transition: -webkit-transform 0.6s ease;
-  transition: -webkit-transform 0.6s ease;
-  transition: transform 0.6s ease;
-  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   -webkit-perspective: 1000px;
@@ -5629,6 +5625,10 @@ button.close {
 .carousel-item-next,
 .carousel-item-prev {
   display: block;
+  -webkit-transition: -webkit-transform 0.6s ease;
+  transition: -webkit-transform 0.6s ease;
+  transition: transform 0.6s ease;
+  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
 }
 
 .carousel-item-next,
@@ -5679,6 +5679,45 @@ button.close {
   }
 }
 
+.carousel-fade .carousel-item {
+  opacity: 0;
+  -webkit-transition-duration: .6s;
+          transition-duration: .6s;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+}
+
+.carousel-fade .carousel-item.active,
+.carousel-fade .carousel-item-next.carousel-item-left,
+.carousel-fade .carousel-item-prev.carousel-item-right {
+  opacity: 1;
+}
+
+.carousel-fade .active.carousel-item-left,
+.carousel-fade .active.carousel-item-right {
+  opacity: 0;
+}
+
+.carousel-fade .carousel-item-next,
+.carousel-fade .carousel-item-prev,
+.carousel-fade .carousel-item.active,
+.carousel-fade .active.carousel-item-left,
+.carousel-fade .active.carousel-item-prev {
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+}
+
+@supports (transform-style: preserve-3d) {
+  .carousel-fade .carousel-item-next,
+  .carousel-fade .carousel-item-prev,
+  .carousel-fade .carousel-item.active,
+  .carousel-fade .active.carousel-item-left,
+  .carousel-fade .active.carousel-item-prev {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+
 .carousel-control-prev,
 .carousel-control-next {
   position: absolute;
@@ -5755,6 +5794,7 @@ button.close {
   margin-right: 3px;
   margin-left: 3px;
   text-indent: -999px;
+  cursor: pointer;
   background-color: rgba(255, 255, 255, 0.5);
 }
 
@@ -11893,11 +11933,11 @@ a, a:hover {
   background-repeat: no-repeat;
 }
 
-#mis-en-avant .row {
+#mis-en-avant .container {
-  padding: 3rem 0;
+  padding: 4rem 0;
 }
 
-#mis-en-avant .row > div {
+#mis-en-avant .container > div {
   margin: 2px 0;
 }
 
@@ -11913,9 +11953,10 @@ a, a:hover {
 }
 
 #agenda h3 {
+  font-weight: 700;
+  text-transform: uppercase;
   margin: 1.5rem;
   color: rgba(0, 13, 158, 0.65);
-  font-weight: 700;
 }
 
 #agenda h4 {
@@ -11928,17 +11969,78 @@ a, a:hover {
 
 #a-la-une {
   background: url("../images/fond-une-jaune.jpg");
-  height: 500px;
+}
+
+#a-la-une .container {
+  padding: 4rem 0;
+}
+
+#a-la-une h3 {
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 1rem;
+}
+
+.liste-articles .bloc-article {
+  height: 100%;
+  background: white;
+  outline: 1px solid #DDD;
+}
+
+.liste-articles .bloc-article a {
+  min-height: 100%;
+}
+
+.liste-articles .bloc-article a h2 {
+  text-align: left;
+}
+
+.liste-articles .bloc-contenu {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  -webkit-box-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+}
+
+.liste-articles .photo_article {
+  max-width: 100%;
+  height: auto;
+}
+
+.liste-articles .bloc-textes {
+  padding: 1.5rem;
+  -webkit-box-flex: 1;
+          flex-grow: 1;
+}
+
+.liste-articles .resume-article {
+  -webkit-box-flex: 1;
+          flex-grow: 1;
 }
 
 /**********************************************************************/
 /**************************** CAROUSEL ********************************/
 /**********************************************************************/
-.carousel-item {
+#diaporama_accueil {
+  height: 430px;
   background: rgba(255, 243, 219, 0.75);
+}
+
+.carousel-item {
   padding: 2rem;
   border-radius: 0.2rem;
   font-size: 1.2rem;
+  opacity: 0;
+}
+
+.carousel-item.active {
+  opacity: 1;
 }
 
 .carousel-caption {
@@ -11970,6 +12072,32 @@ a, a:hover {
   margin: 2rem;
 }
 
+.carousel, .carousel-inner, .carousel-item {
+  height: 100%;
+}
+
+.carousel-fade .carousel-item {
+  -webkit-transition-duration: 1.5s;
+          transition-duration: 1.5s;
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  -webkit-transition: opacity 0.2s, -webkit-transform 1.5s ease;
+  transition: opacity 0.2s, -webkit-transform 1.5s ease;
+  transition: transform 1.5s ease, opacity 0.2s;
+  transition: transform 1.5s ease, opacity 0.2s, -webkit-transform 1.5s ease;
+}
+
+.carousel-indicators li {
+  height: 8px;
+  width: 8px;
+  margin-right: 4px;
+  margin-left: 4px;
+  border-radius: 100%;
+}
+
 /**********************************************************************/
 /***************************** FOOTER *********************************/
 /**********************************************************************/

inclure/diaporama_accueil.html

@@ -1,4 +1,4 @@
-<div id="diaporama_accueil" class="carousel slide" data-ride="carousel">
+<div id="diaporama_accueil" class="carousel slide carousel-fade" data-ride="carousel" data-interval="8000">
 	<ol class="carousel-indicators">
 <BOUCLE_compteur(ARTICLES){titre_mot=diaporama}{tout}>
 		<li data-target="#diaporama_accueil" data-slide-to="[(#COMPTEUR_BOUCLE|moins{1})]" [(#COMPTEUR_BOUCLE|=={1}|oui) class="active"]></li>