desktop-big optional class for indicator element

README.md

@@ -8,6 +8,7 @@
   - [Lightbox setup](#lightbox-setup)
   - [Controls](#controls)
   - [Contain](#contain)
+  - [Thumbnails on desktop](#thumbnails-on-desktop)
   - [Carousel setup](#carousel-setup)
   - [Responsive images](#responsive-images)
 - [Keyboard shortcuts](#keyboard-shortcuts)
@@ -201,6 +202,17 @@ Gallery widget:
 </div>
 ```
 
+### Thumbnails on desktop
+
+To make the thumbnails bigger and scrollable on desktop, add the CSS class 
+`desktop-big` to the indicator element:
+
+```html
+<ol class="indicator desktop-big"></ol>
+  <!-- ... -->
+</div>
+```
+
 ### Carousel setup
 
 To display the images in an inline carousel instead of a lightbox, follow the

css/blueimp-gallery-indicator.css

@@ -46,6 +46,19 @@
   cursor: pointer;
 }
 
+.blueimp-gallery > .indicator.desktop-big > li{
+  background-size: cover;
+}
+.blueimp-gallery > .indicator.desktop-big::-webkit-scrollbar {
+  background: #202020;
+}
+.blueimp-gallery > .indicator.desktop-big::-webkit-scrollbar-thumb {
+  background: rgb(82, 82, 82);
+}
+.blueimp-gallery > .indicator.desktop-big::-webkit-scrollbar-thumb:hover{
+  background: grey;
+}
+
 /* IE7 fixes */
 * + html .blueimp-gallery > .indicator > li {
   display: inline;
@@ -95,3 +108,20 @@
 .blueimp-gallery-single > .indicator {
   display: none;
 }
+
+@media (min-width: 768px){
+  .blueimp-gallery > .indicator.desktop-big {
+    height: 110px;
+    width: calc(100vw - 120px);
+    overflow: auto;
+    white-space: nowrap;
+  }
+  .blueimp-gallery > .indicator.desktop-big > li{
+      width: 80px;
+      height: 80px;
+      opacity: 1;
+  }
+  .blueimp-gallery > .indicator.desktop-big > li:after{
+      display: none;
+  }
+}