Bootstrap Carousel with SpringBoot RestAPI

In the tutorial, JavaSampleApproach will show you how to use Bootstrap Carousel with SpringBoot RestAPI.

Related posts:
Bootstrap Image with SpringBoot RestAPI
Bootstrap Image + MongoDB GridFsTemplate + SpringBoot RestAPI

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– Bootstrap
– Spring Boot – 1.5.7.RELEASE

II. Goal – Bootstrap Carousel

Bootstrap provides Carousel plugin for slideshow elements. In the tutorial, we create a SpringBoot project with Bootstrap Carousel as below:

Bootstrap Carousel with SpringBoot RestAPI - project structure

-> results (.gif image):

Bootstrap Carousel with SpringBoot RestAPI - working demo

Implementation detail:

Bootstrap Carousel - SpringBoot

We have an outer div:

  • id="jsaAboutCarousel" is used to control properties of inside divs
  • .carousel class is used to tell to Bootstrap that is a carousel div
  • .slide class is used to animate images for moving
  • data-ride="carousel" is used to tells Bootstrap to start animating the carousel right after the page loads

Inside the above div, We have 3 divs: Indicators, Wrapper, and Left and right controls:

- Indicators is used for the little dots at the bottom

  • carousel-indicators class is used to specify Indicator div
  • data-target class is used to point to the id of the carousel
  • data-slide-to class is used to specifies which the showing slide when having any clicking on the dot

- Wrapper is specified by .carousel-inner class.

  • .item class is used to define a content of each slide (image or text)
  • .active is needed to be added for carousel visible

- Left and right controls is used to add left and right buttons.

III. Practice

Step to do:
– Create SpringBoot project
– Create Web Controller
– Create RestAPI
– Create index.html

1. Create SpringBoot project

Using Spring Tool Suite to create a Spring Starter Project with needed dependencies:


	org.springframework.boot
	spring-boot-starter-thymeleaf


	org.springframework.boot
	spring-boot-starter-web

2. Create Web Controller
package com.javasampleapproach.restapiimage.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class WebController {
	@GetMapping(value="/")
    public String homepage(){
        return "index";
    }
}
3. Create RestAPI
package com.javasampleapproach.carousel.controller;

import java.io.IOException;

import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.InputStreamResource;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class RestWebController {
	
    @GetMapping(value = "/api/image/carousel")
    public ResponseEntity getImage(@RequestParam("background") String background) throws IOException {

    	ClassPathResource imgFile;
    	
    	switch(background){
    		case "back":
    			imgFile = new ClassPathResource("image/jsa_about_img_black_background.png");
    			break;
    		case "green":
    			imgFile = new ClassPathResource("image/jsa_about_img_green_background.png");
    			break;
    		case "blue":
    			imgFile = new ClassPathResource("image/jsa_about_img_blue_background.png");
    			break;
    		default:
    			imgFile = new ClassPathResource("image/jsa_about_img_white_background.png");
    	}
    	
        return ResponseEntity
                .ok()
                .contentType(MediaType.IMAGE_PNG)
                .body(new InputStreamResource(imgFile.getInputStream()));
    }
}
4. Create index.html



  Bootstrap Carousel
  
  
  %MINIFYHTMLb32e98815097e40814f409e5e72504a016%%MINIFYHTMLb32e98815097e40814f409e5e72504a017%


Bootstrap Carousel - SpringBoot

%MINIFYHTMLb32e98815097e40814f409e5e72504a018%

IV. Sourcecode

SpringBootstrapCarousel



By grokonez | November 21, 2017.


Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*