Widget:Gallery

<style>

.cc-gallery {

 --tot-wid: min(calc(95vmin - 5em), 50vmax);
 --tot-hgt: 30vmax;
 position: relative;
 overflow: hidden;
 display: flex;
 background-color: #000;
 --gal-hgt: var(--tot-hgt);
 --gal-wid: calc(7 * var(--tot-wid) / 8);
 --thumb-wid: calc(var(--tot-wid) / 8);
 border-radius: .5em;
 border: 2px #333 solid;
 width: var(--tot-wid);
 height: var(--tot-hgt);

}

.cc-gallery[class*=""] {

 --gal-wid: var(--tot-wid);
 --thumb-wid: 0;

}-->

.cc-gallery img {

 all: unset;

}

.cc-gallery li {

 list-style-type: none;

}

.cc-gallery *, .cc-gallery *::before, .cc-gallery *::after {

 box-sizing: inherit;
 margin: 0;
 padding: 0;

}

.cc-gallery .thumbnails {

 width: var(--thumb-wid);
 height: var(--gal-hgt);
 display: flex;
 flex-direction: column;
 line-height: 0;
 background-color: black;
 position: absolute;
 right: 1em;

}

.cc-gallery .thumbnails li {

 flex: auto;
 position: relative;
 z-index: 1;
 list-style-type: none;
 display: block;

}

.cc-gallery .thumbnails li:nth-of-type(n+) {

 display: none;

}

.cc-gallery .thumbnails a {

 display: block;
 overflow: hidden;

}

.cc-gallery .thumbnails img {

 width: var(--thumb-wid);
 height: calc(var(--gal-hgt) / );
 object-fit: contain;
 object-position: center center;

}

.cc-gallery .slides {

 overflow: hidden;
 width: calc(var(--gal-wid) - var(--thumb-wid));
 height: var(--gal-hgt);
 position: absolute;
 left: 0;

}

.cc-gallery .slides li {

 width: calc(var(--gal-wid) - var(--thumb-wid));
 height: var(--gal-hgt);
 position: absolute;
 background-color: #000;
 z-index: 1;
 overflow:hidden;

}

/*.cc-gallery .slides li:nth-of-type(n+) {

 display: none;

}*/

.cc-gallery .slides img {

 width: calc(var(--gal-wid) - var(--thumb-wid));
 height: 100%;
 object-fit: contain;
 object-position: 50% 50%;

}

.cc-gallery .slides img[src*="$img"] {

 display: none;

}

.cc-gallery .slides li:target {

 z-index: 3;
 -webkit-animation: fade .5s 1;

}

.cc-gallery .slides li:not(:target) {

 -webkit-animation: hidden .5s 1;

}

@keyframes fade {

 0% {
   /*transform: translateY(-100%);*/
   opacity:0;
 }
 100% {
   /*transform: translateY(0%);*/
   opacity:1;
 }

}

@keyframes hidden {

 0% {
   z-index: 2;
 }
 100% {
   z-index: 2;
 }

}

@keyframes spinner {

 to {transform: rotate(360deg);}

}

.cc-gallery .slides li:before {

 content: ;
 box-sizing: border-box;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 20px;
 height: 20px;
 margin-top: -10px;
 margin-left: -10px;
 border-radius: 50%;
 border: 2px solid #ccc;
 border-top-color: #000;
 animation: spinner .6s linear infinite;
 z-index: -1;

}

.cc-gallery .thumbnails li:before {

 content: ;
 box-sizing: border-box;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 20px;
 height: 20px;
 margin-top: -10px;
 margin-left: -10px;
 border-radius: 50%;
 border: 2px solid #ccc;
 border-top-color: #000;
 animation: spinner .6s linear infinite;
 z-index: -1;

} </style>

• <img src=/>
• <img src= />
• <img src= />
• <img src= />
• <img src= />

• <a href="#slide1"><img src= link="#slide1" /></a>
• <a href="#slide2"><img src= link="#slide2" /></a>
• <a href="#slide3"><img src= link="#slide3" /></a>
• <a href="#slide4"><img src= link="#slide4" /></a>
• <a href="#slide5"><img src= link="#slide5" /></a>