SeasideSoft Photo Rotator — Responsive, Lightweight Image Slider

SeasideSoft Photo Rotator: Quick Setup & Customization Guide

What it is

SeasideSoft Photo Rotator is a lightweight image slider widget for websites that cycles through photos with transition effects, captions, and navigation controls. It’s designed to be responsive, easy to embed, and configurable via simple options or data attributes.

Quick setup (3 steps)

1. Include files
   • Add the CSS and JS assets (hosted or local) to your page:

     html
     Copy CodeCopied
     <link rel=“stylesheet” href=“seasidesoft-rotator.min.css”>
     <script src=“seasidesoft-rotator.min.js”></script>
     

2. Add HTML
   • Minimal markup:

     html
     Copy CodeCopied
     <div class=“ss-rotator” id=“homeGallery”>
     <img src=“img1.jpg” alt=“Caption 1”>
       <img src=“img2.jpg” alt=“Caption 2”>
       <img src=“img3.jpg” alt=“Caption 3”>
     </div>
     

3. Initialize
   • Auto-initialize via data attributes or JS:

     html
     Copy CodeCopied
     <div class=“ss-rotator” data-interval=“4000” data-effect=“fade”></div>
     

     or

     js
     Copy CodeCopied
     SeasideSoft.Rotator.init(’#homeGallery’, { interval: 4000, effect: ‘fade’, loop: true });
     

Key configuration options

• interval (ms) — time between slides. Default 3000.
• effect — ‘fade’, ‘slide’, ‘zoom’. Default ‘fade’.
• loop — true/false. Default true.
• showControls — show next/prev buttons. Default true.
• showIndicators — show dot indicators. Default true.
• autoPauseOnHover — pause when hovering. Default true.
• lazyLoad — load images on demand. Default false.
• captionSource — ‘alt’, ‘data-caption’, or custom function.

Customization tips

• Styling: override CSS classes .ss-rotator, .ss-slide, .ss-caption for layout and typography.
• Responsive: use percentage widths and max-height with object-fit: cover to preserve crop.
• Accessibility: include meaningful alt text, enable keyboard navigation, and set aria-live on the rotator container.
• Performance: enable lazyLoad, use WebP, and size images to expected display dimensions.
• Advanced: use the JS API to listen for events (onChange, onStart, onStop) and to programmatically goTo(index) or add/remove slides.

Example: custom caption template

js
Copy CodeCopied
SeasideSoft.Rotator.init(’#homeGallery’, {
  captionSource: (img) => </span><span class="token template-string" style="color: rgb(163, 21, 21);"><strong></span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">${</span><span class="token template-string interpolation">img</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">.</span><span class="token template-string interpolation">dataset</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">.</span><span class="token template-string interpolation">title</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">}</span><span class="token template-string" style="color: rgb(163, 21, 21);"></strong><span></span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">${</span><span class="token template-string interpolation">img</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">.</span><span class="token template-string interpolation">dataset</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">.</span><span class="token template-string interpolation">desc</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">}</span><span class="token template-string" style="color: rgb(163, 21, 21);"></span></span><span class="token template-string template-punctuation" style="color: rgb(163, 21, 21);">
});

Troubleshooting (quick)

• Slides not changing: check JS console for initialization errors and confirm script order.
• Images stretched: add img { width:100%; height:auto; object-fit:cover; }.
• Controls missing: ensure showControls is true and CSS not hiding elements.

If you want, I can generate the exact HTML/CSS/JS bundle for a demo page using your preferred effect, size, and captions.