Member Avatar for vizz

I'm using this Image Slider with Thumbnails.(http://www.menucool.com/slider/javascript-image-slider-demo2)

I tried to make it fullscreen with floating Thumbnails but it is not working properly. Can anyone help me to make it responsive & fullscreen with floating thumbnails?

  • 2 Contributors
  • 2 Replies
  • 205 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by vizz

Dani AI

Generated

Quick, practical guidance for (and a nod to ): the common reasons a thumbnail-enabled slider fails to behave as a true fullscreen, responsive control are inline sizing injected by the plugin, unhandled image aspect ratios, and the difference between a full-viewport overlay versus a full-height section. The approach below forces the slider to fill the viewport, overlays a floating thumbnail strip, and suggests small-screen fallbacks — while leaving the slider logic intact so thumbnail clicks still jump slides.

/* full-viewport wrapper (use fixed for overlay, absolute inside a section otherwise) */
.slider-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
  background: #000;
}
.slider-fullscreen .slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* floating thumbnails */
.slider-fullscreen .thumbs {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.slider-fullscreen .thumbs img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.85;
}
.slider-fullscreen .thumbs img.active { outline: 2px solid #fff; opacity: 1; }

Sometimes the plugin writes inline width/height on slides; remove or override them and force a layout recalculation after images load:

document.querySelectorAll('.slider-fullscreen img').forEach(img=>{
  img.removeAttribute('width');
  img.removeAttribute('height');
});
window.addEventListener('load', ()=> window.dispatchEvent(new Event('resize')));

Troubleshooting and UX notes: add a media query to hide or stack thumbnails on small screens, use object-fit: cover only when cropping is acceptable (use contain for no crop), and if the slider is inside an anchored section (like #portfolio) prefer an absolute full-height wrapper instead of fixed so page anchors and scrolling remain predictable. If the plugin still resists, consider switching to a modern responsive slider that has a built-in "thumbs" sync (many exist) rather than fighting inline sizing.

Recommended Answers

All 2 Replies

Member Avatar for Member #46692

Why not just use a reponsive slider?

Member Avatar for vizz

I want fullscreen slider with thumbnails. So I'm using this, because my page looks like, http://abc.com/#portfolio, so this slider is easier for me to locate images when thumbnails are clicked.

It works well but there is only one problem with fullscreen images.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.