Kotlin SpringBoot – Bootstrap Carousel

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

I. Technologies

– Java 1.8
– Kotlin 1.2.20
– Apache Maven 3.5.2
– Spring Tool Suite – Version 3.9.2.RELEASE
– Spring Boot – 1.5.10.RELEASE

II. Goal

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

Kotlin Springboot Bootstrap Carousel - project structure

-> results (.gif image):

Kotlin Springboot Bootstrap Carousel-demo

Implementation detail:

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 Kotlin SpringBoot project
– Create Web Controller
– Create RestAPI
– Create index.html

1. Create Kotlin SpringBoot project

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

2. Create Web Controller

3. Create RestAPI

4. Create index.html

IV. SourceCode

KotlinSpringBootstrapCarousel

By grokonez | February 19, 2018.



Related Posts


Got Something To Say:

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

*