recommended components to show small cards (portrait) in a horizontal slider

I'm thinking of a UI feature for a web app that's similar in nature to these displays on Amazon:

I need something that can fit on a mobile device without taking up more than 1/4 of the screen or so vertically, and lets you scroll left and right to see some info where there's a small image at the top. It might display two or three cards at a time. (This is from my desktop so it's a lot wider than you'd get on a phone.)

What component(s) can I use to do this in WEB Core?

I've got data (objects) in a TList and plan to have a filter that can select subsets of items and sort them in various ways. If you click on one, it will do something, maybe in a small popup window.

Lots of options. How fancy do you want to be? Here's a post about image sliders, but really the image can be whatever you like, any HTML <div> element for example.

Thanks, Andrew. The image is just a small face, maybe a gravitar image; possibly a caricature. Below are just a few lines of text, nothing fancy. If you hover over the lines, it will show a little longer explanation, but that's not too useful without a mouse.

Is there anything that standard components will do?

I'm using a grid right now, but they aren't very amenable to mobile devices that aren't very wide.

Maybe start with the included TWebSlider and go from there? It's the first one covered in the blog post.

1 Like

I need a card wiht a small image on it and text below. Not just an image.

Yes, I realize. The idea is that you're just adding an element, and whatever you put in there is up to you. I've added a project (the project from the Basics 3 post) with an extra bit with a slider in it. here's what it looks like. Colors are just to show where the boundaries of the control might be.

I used a later Swiper library, but it likely doesn't matter much, this usage has been part of it for a long time. This needs to be added to the Project1.html file or your equivalent. A version of this library is added to your project automatically if you add a TWebImageSlider to your page, for example.

    <script src=""></script>
    <link rel="stylesheet" href="">

The idea is that you create a bunch of slides and then initialize the slider. The slider is just a TWebHTMLDiv on the page, so you can size that or do whatever you like and the slides should fill up whatever space you have. Lots of ways to customize how this looks and works. But just trying to get you started here. The TWebHTMLDiv contains HTML that lays out the internals of the slider.

    <div class="d-flex flex-column w-100 h-100 overflow-hidden">  
      <div class="order-2 swiper w-100 h-100">  
        <div class="swiper-wrapper w-100"></div>  
      <div class="order-1 swiper-button-prev" style="left:-50px;"></div>  
      <div class="order-3 swiper-button-next" style="right:-50px;"></div>  

The slides themselves can be created out of thin air if you like, or include references to images or anything else. Here, I've added an asm block to WebFormCreate to get the ball rolling. The slides are constructed in a manual way here, but you could construct them via any other means- no end to the options for you here.

    var slides = '';
    var slideprefix = '<div class="swiper-slide" style="display:flex; justify-content:center; width:125px;"><div class="p-1 m-1 bg-primary text-white rounded" style="width:125px;">';
    var slidesuffix = '</div></div>';

    slides += slideprefix+'abc'+slidesuffix;
    slides += slideprefix+'def'+slidesuffix;
    slides += slideprefix+'ghi'+slidesuffix;
    slides += slideprefix+'jkl'+'<span style="font-size:8px; color:black;"><br/>more info</span>'+slidesuffix;
    slides += slideprefix+'mno'+slidesuffix;

The slides are added to the element using this, but again lots of ways to do this.

    divSwiper.firstElementChild.firstElementChild.firstElementChild.innerHTML = slides;

And then this is what initializes the control. Tons of options can be passed in here, including things for generating additional UI elements like thumbnails or those little navigation circles that appear under sliders sometimes. In this case, we've set the "slidesPerView" to be auto, meaning if the control is wider you'll see more elements. Other options are to just show a fixed number, an option to loop when you get to the end, and so on.

    // Create the main slider
    const swiper = new Swiper('.swiper', {
      slidesPerView: "auto",
      spaceBetween: 5,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',


Hope that helps? (53.3 KB)

1 Like

The Actorious project uses the same slider to show just images, but works really well with mouse scrolling (left and right) and can even display items in two rows instead of one. So a good control to use as it can really be extended in lots of useful ways.

I find myself using very few visual components. In fact my latest project has none. the DevExtreme Gallery is very good for this purpose.

So it's all command-line driven? Or it's just an embedded application?

It's a full applicaion. I am currently rewriting a Windows Estate Agency application. Existing users are used to the enormous power of the DevEx grid so the only way is to use the DevExtreme equivalent.

Yeah, DevEx grids are quite addicting :slight_smile: