Member Avatar for grafic.web

Hi there,

i'm looking for the easiest image slider banner for my homepage, any suggest?

Thanks!!

  • 4 Contributors
  • 8 Replies
  • 502 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by grafic.web

Dani AI

Generated

Quick, practical guidance for an MVC homepage banner (building on the suggestions from , and ):

Pick by requirement, not by name. If you want the fastest path and already use jQuery, a mature jQuery slider can be simplest to drop in. If you prefer lean, mobile-first behavior and no jQuery dependency, choose a modern vanilla JS slider with built-in touch support and lazy-loading. For production, prioritize: responsive layout, image lazy-loading, accessible controls (keyboard + ARIA), and good maintenance (recent releases).

Integration pattern for ASP.NET MVC (robust and repeatable):

  • Create a small SlideViewModel with ImageUrl, AltText and optional Link.
  • Render the slider from a partial view so the same markup can be reused across pages.
  • Include the slider CSS/JS in your script bundles and initialize the plugin after the DOM is ready.
  • Use responsive images (srcset) or modern formats and set width/height attributes to prevent layout shift.

Example Razor markup (simple, unobtrusive structure):

@model IEnumerable<SlideViewModel>

<div id="hero-slider" class="slider">
@foreach(var s in Model) {
  <div class="slide">
    <img src="@Url.Content(s.ImageUrl)" alt="@s.AltText" loading="lazy" width="1600" height="600" />
  </div>
}
</div>

Accessibility, performance and troubleshooting notes:

  • Respect users who prefer reduced motion: disable autoplay when prefers-reduced-motion is set.
  • Provide pause/play controls, keyboard navigation, and clear ARIA roles so screen readers announce slide changes.
  • Optimize images (responsive sizes, compression, modern formats) and use a CDN or bundled assets for production.
  • If the slider doesn’t run: check console errors, confirm script order (jQuery before jQuery plugins), ensure only one jQuery copy is loaded, and verify the initialization selector matches the rendered HTML.

Caution: sliders look dynamic but often reduce conversions. If the banner carries a primary message or CTA, test a static hero or a single, well-optimized slide first.

Recommended Answers

All 8 Replies

Member Avatar for JorgeM

I've always liked Nivo Slider. However, there are countless slides out there. You can also build a simple one on your own.

Member Avatar for grafic.web

Something free?

Member Avatar for JorgeM

that slider is free if its not for a wordpress site.

From there site...

The Nivo Slider jQuery plugin is open source and released under the MIT license. This means you can use it almost anywhere and for almost any kind of project, including personal and commercial websites and themes you make. It also means you can give back to the community by contributing your own improvements to the slider via GitHub.

However, don't just go by my one recommendation. I like it but you may find something else out there that may fit better for you. Many of these sliders are free to incorporate into your projects. If you have the time, I'd recommend you do a search find a few that look appealing to you and test them out. Since they are client side, they are very easy to integrate into your project on a test page.

Member Avatar for gabrielcastillo

This is not my slider, but I've used in a few projects before.. work good for just a very simple image slider.

//html
<ul id="html-slider">
    <li><img src="" alt="" /></li>
    <li><img src="" alt="" /></li>
    <li><img src="" alt="" /></li>
</ul>
<div id="counter"></div>

//CSS
    #html-slider {
        height:200px;
        list-style:none;
        margin:;
        padding:0;
        overflow:hidden;
        position:relative;
    }

    #html-slider li {
        display:none;
        left:0;
        position:absolute;
        top:0;
    }

    #html-slider li:first-child {
        display:inline-block;
    }

//Jquery
(function($){
    $.fn.PageSlider = function(interval){
    var slides;
    var cnt;
    var amount;
    var i;

    function run(){
    $(slides[i]).fadeOut(1000);
    i++;
    if(i >= amount) i=0;
    $(slides[i]).fadeIn(1000);

    cnt.text(i+1+ '/' + amount);
    setTimeout(run, interval);
    }


    slides = $("#page-slider").children();
    cnt = $("#counter");
    amount = slides.length;
    i=0;

    cnt.text(i+1+ '/' + amount);
    setTimeout(run, interval);
    };
})(jQuery);

jQuery(window).load(function(){
$("#html-slider").PageSlider(3000);
});
Edited by gabrielcastillo because: updated html tag
Member Avatar for JorgeM

Nice job on this slider. However, change line 49 to:

slides = $("#html-slider").children();
Member Avatar for gabrielcastillo

nice catch.. Was in a hurry.

Member Avatar for Member #46692

flexslider? Plus it is responsive.

Member Avatar for grafic.web

Thanks for thi!!! AMZING

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.