Member Avatar for tanvir2012

I was trying to set a stylish slideshow for my blog.

Expert advise please.

Thanks

  • 4 Contributors
  • 3 Replies
  • 125 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by margaret224

Dani AI

Generated

— a modern, stylish slideshow for Blogspot should focus on three things: responsiveness (works on phones/tablets), performance (fast to load), and accessibility (keyboard/touch/ARIA). ’s suggestion is a fine starting point for older templates, but older demos often lack touch support and modern image optimization, which explains ’s mobile issue.

Practical checklist to implement today:

  • Use a lightweight slider or a CSS-first solution that supports touch/swipe, or pick a small JS library with touch and accessibility built in.
  • Serve optimized, responsive images with srcset/sizes and loading="lazy" (or lazy-load JS) so mobile users don’t download huge files.
  • Ensure the template has a proper viewport meta tag and that the slider container is responsive (max-width + width:100%).
  • Add keyboard controls, ARIA roles/labels, and visible focus styles so the slider is usable without a mouse.
  • Avoid loading multiple versions of jQuery (check your theme); duplicate libraries often break plugins.

Troubleshooting steps if a demo works on desktop but not on mobile:

  • Open the page on a real device and check the browser console for JS errors.
  • Verify touch/swipe support; many older plugins only listen for mouse events.
  • Confirm CSS isn’t blocking pointer events (e.g., an overlay with pointer-events:none or incorrect z-index).
  • Test after removing other widgets/plugins to rule out conflicts.
  • If adding via a post content box is stripping scripts, use Layout > Add a Gadget > HTML/JavaScript or Theme > Edit HTML to inject the slider markup and assets.

Minimal accessible structure to adapt (drop into a gadget or theme):

<div class="slider" role="region" aria-label="Featured images">
  <ul class="slides">
    <li><img src="image-small.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w" sizes="(max-width:600px) 100vw, 800px" alt="Description"></li>
    <li><img src="..."></li>
  </ul>
  <button class="prev" aria-label="Previous">‹</button>
  <button class="next" aria-label="Next">›</button>
</div>

Include responsive CSS and a small script (or use a library) to handle slide transforms, lazy-loading, autoplay with pause-on-hover, and touch gestures.

Recommended Answers

All 3 Replies

Member Avatar for Member #120589

There are many more. Google: 'blogger slideshow' :)

Member Avatar for JorgeM

Hmm. Their demo doesn't appear to work on the mobile platform, at least not on the device I'm on.

Member Avatar for margaret224

Nice Information.....!!!!

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.