Handelingen

BAK-vaan: verschil tussen versies

Uit BoemelWiki

Regel 1: Regel 1:
 +
<div class="boemel-slider">
 +
  <div class="boemel-slide"><img src="/images/Foto1.jpg" alt="Foto 1"></div>
 +
  <div class="boemel-slide"><img src="/images/Foto2.jpg" alt="Foto 2"></div>
 +
  <div class="boemel-slide"><img src="/images/Foto3.jpg" alt="Foto 3"></div>
 +
</div>
 +
 +
<style>
 +
.boemel-slider {
 +
  position: relative;
 +
  width: 100%;
 +
  height: 320px; /* pas aan naar wens */
 +
  overflow: hidden;
 +
  border-radius: 12px;
 +
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
 +
}
 +
 +
.boemel-slide {
 +
  position: absolute;
 +
  width: 100%;
 +
  height: 100%;
 +
  opacity: 0;
 +
  animation: boemelFade 15s infinite;
 +
}
 +
 +
.boemel-slide:nth-child(1) { animation-delay: 0s; }
 +
.boemel-slide:nth-child(2) { animation-delay: 5s; }
 +
.boemel-slide:nth-child(3) { animation-delay: 10s; }
 +
 +
.boemel-slide img {
 +
  width: 100%;
 +
  height: 100%;
 +
  object-fit: cover;
 +
}
 +
 +
@keyframes boemelFade {
 +
  0%  { opacity: 0; }
 +
  10%  { opacity: 1; }
 +
  30%  { opacity: 1; }
 +
  40%  { opacity: 0; }
 +
  100% { opacity: 0; }
 +
}
 +
</style>
 +
 +
 +
 +
 
<gallery widths=160px heights=300px perrow=7 caption="BAK-Vanen door de jaren heen, klik op het vaan voor meer info over dat jaar" mode="traditional">  
 
<gallery widths=160px heights=300px perrow=7 caption="BAK-Vanen door de jaren heen, klik op het vaan voor meer info over dat jaar" mode="traditional">  
 
VAAN2026.jpg | link=[[2025_-_2026_:_Hier_lopte_nie_kwijt]] | 2026
 
VAAN2026.jpg | link=[[2025_-_2026_:_Hier_lopte_nie_kwijt]] | 2026

Versie van 27 mrt 2026 17:37

<img src="/images/Foto1.jpg" alt="Foto 1">
<img src="/images/Foto2.jpg" alt="Foto 2">
<img src="/images/Foto3.jpg" alt="Foto 3">

<style> .boemel-slider {

 position: relative;
 width: 100%;
 height: 320px; /* pas aan naar wens */
 overflow: hidden;
 border-radius: 12px;
 box-shadow: 0 0 20px rgba(0,0,0,0.25);

}

.boemel-slide {

 position: absolute;
 width: 100%;
 height: 100%;
 opacity: 0;
 animation: boemelFade 15s infinite;

}

.boemel-slide:nth-child(1) { animation-delay: 0s; } .boemel-slide:nth-child(2) { animation-delay: 5s; } .boemel-slide:nth-child(3) { animation-delay: 10s; }

.boemel-slide img {

 width: 100%;
 height: 100%;
 object-fit: cover;

}

@keyframes boemelFade {

 0%   { opacity: 0; }
 10%  { opacity: 1; }
 30%  { opacity: 1; }
 40%  { opacity: 0; }
 100% { opacity: 0; }

} </style>