javamavenspring-bootvaadin

How to create an image slideshow in a Vaadin Spring Boot Web application?


I am new to Vaadin and Spring Boot. I've built the project with Maven. I have tried to create an image slideshow in many different ways, but all got me to endless issues/errors.

I want to create an web app with fake ads as it is just a school project and I will not publish it. I need the slideshow in order to replicate the ads effects.

I've tried to implement this by threads, fancylayouts add-on from Vaadin, Swing Timers, scheduled tasks with Spring etc.

https://spring.io/guides/gs/scheduling-tasks/
https://vaadin.com/directory#!addon/fancylayouts
https://docs.oracle.com/javase/tutorial/uiswing/misc/timer.html

What is the most suitable way to do this?

Any help would be much appreciated, thanks.

If it helps, here is my last attempt:

package com.example.ui;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

import com.vaadin.server.Resource;
import com.vaadin.server.ThemeResource;
import com.vaadin.ui.Image;
import com.vaadin.ui.Layout;

@Component
public class Ads {
    Image image;
    int i;
    private static final Logger log = LoggerFactory.getLogger(Ads.class);

@Scheduled(fixedDelay = 5000)
    public void AdsImg() {

    Resource res = new ThemeResource("images/"+i+".jpg");
    image = new Image(null, res);

}

public Ads() {

    for (int i=1; i<=4;i++){    
        AdsImg();

    }


 }
}

Solution

  • Bootstrap

    You can easily create a Carousel using the most popular UI framework, Bootstrap.

    On their examples page they have one specifically called Carousel. Open this example, view the HTML source and you can then customize it and make it your own.