Use cWebView.pkg
Use cWebPanel.pkg
Use cWebForm.pkg 
Use csfWebCarousel.pkg
Use cWebCombo.pkg
Use cWebButton.pkg
Use cWebLabel.pkg

Object oCarouselDemo is a cWebView
    //Set piWidth to 700
    Set psCaption to "Carousel Demo"

    // Your DDO structure will go here

    Object oWebMainPanel is a cWebPanel
      Set piColumnCount to 12

      Object oWebCarousel is a csfWebCarousel
        //Set piWidth to 200
        //Set piHeight to 500
        Set piColumnSpan to 7
        //Set psCssClass to 'templateCarousel'
        //Set psIndicatorsTemplate to "#indicatorTemplate"
        //Set psIndicatorsTemplate to ('<div class="indicator" indicator-index="${index}"><img src="${getThumbImage(index)}" alt="image" style="height:100%;width:100%;" /></div>')
        Set pbThumbnailIndicators to True
        Set piHeight to 500
        Set pbServerOnSlideChanged to False
        Set pbServerOnSlideChanging to True

        Procedure OnFill
          Forward Send OnFill
          Send AddImage "images/Carousel/bridge.jpg" "Golden Gate Bridge" "The Golden Gate Bridge in San Francisco"
          Send AddImage "images/Carousel/CIMG0366.jpg" 
          Send AddImage "images/Carousel/CIMG0378.jpg" ""
          Send AddImage "images/Carousel/rocks.jpeg" ""
          Send AddImage "images/Carousel/sea.jpg" ""
          // Adding this one via the "Add Image" button dynamically instead.
          //Send AddImage "images/Carousel/waterfall.jpg" ""
        End_Procedure
        
        Procedure OnSlideChanged Integer iCurrentIndex Integer iPreviousIndex Boolean bIsSwiped String sSlideDirection
          //Integer iIndex
          //WebGet piSelectedIndex to iIndex
          WebSet psCaption of oCurrentImageLabel to ("img = "+trim(iCurrentIndex))
        End_Procedure
        
        Procedure OnSlideChanging Integer iCurrentIndex Integer iNextIndex Boolean bIsSwiped String sSlideDirection Boolean bCancel
          WebSet psCaption of oCurrentImageLabel to ("img = "+trim(iNextIndex))
        End_Procedure
        
      End_Object

      Object oIntervalForm is a cWebForm
          Set piColumnSpan to 4
          Set psLabel to "Interval"
          Set peDataType to typeNumber
          Set psValue to "5000"
          Set piColumnIndex to 8
          Set psToolTip to "Slide interval time in milliseconds"
          Set pbServerOnChange to True
          
          Procedure OnChange
            Integer iValue
            WebGet psValue to iValue
            If (iValue>=1000) Begin
              WebSet piInterval of oWebCarousel to iValue
            End
          End_Procedure
      End_Object

      Object oPauseButton is a cWebButton
          Set piColumnSpan to 2
          Set psCaption to "Pause"
      
          Procedure OnClick
            Send Pause to oWebCarousel
          End_Procedure
      End_Object

      Object oPlayButton is a cWebButton
          Set piColumnSpan to 2
          Set psCaption to "Play"
          Set piColumnIndex to 2
      
          Procedure OnClick
            Send Play to oWebCarousel
          End_Procedure
      End_Object

      Object oPreviousButton is a cWebButton
          Set piColumnSpan to 2
          Set psCaption to "Previous"
          Set piColumnIndex to 4
      
          Procedure OnClick
            Send PreviousSlide to oWebCarousel
          End_Procedure
      End_Object

      Object oNextButton is a cWebButton
          Set piColumnSpan to 2
          Set psCaption to "Next"
          Set piColumnIndex to 6
      
          Procedure OnClick
            Send NextSlide to oWebCarousel
          End_Procedure
      End_Object

      Object oCurrentImageLabel is a cWebLabel
          Set psCaption to "label"
          Set piColumnSpan to 2
          Set piColumnIndex to 10
      End_Object

      Object oCurrentIndexButton is a cWebButton
          Set piColumnSpan to 3
          Set psCaption to "Current Index"
      
          Procedure OnClick
            Integer iIndex
            WebGet piSelectedIndex of oWebCarousel to iIndex
            Send ShowInfoBox ("Selected image is "+Trim(iIndex))
          End_Procedure
      End_Object
      Object oAddImageButton is a cWebButton
          Set piColumnSpan to 2
          Set psCaption to "Add Image"
          Set psToolTip to "Add an image to the carousel"
          Set piColumnIndex to 3
      
          Procedure OnClick
            Send AddCarouselItem of oWebCarousel "images/Carousel/waterfall.jpg" ""
            //
            WebSet pbEnabled to False
            WebSet pbEnabled of oDeletemageButton to True
          End_Procedure
      End_Object
      Object oDeletemageButton is a cWebButton
          Set piColumnSpan to 2
          Set psCaption to "Delete Image"
          Set psToolTip to "Remove the image you just added"
          Set piColumnIndex to 5
          Set pbEnabled to False
      
          Procedure OnClick
            Integer iCount
            tCarouselItem[]  CarouselItems
            WebGet pCarouselItems of oWebCarousel to CarouselItems
            Move (SizeOfArray(CarouselItems)) to iCount
            // we're just removing the last item we just added, you can of course delete another one..
            Send RemoveCarouselItem of oWebCarousel (iCount-1)
            WebSet pbEnabled to False
            WebSet pbEnabled of oAddImageButton to True
          End_Procedure
      End_Object
      Object oRemoveSelectedImage is a cWebButton
          Set psCaption to "Remove Selected"
          Set psToolTip to "Remove the selected item from the carousel"
          Set piColumnIndex to 7
          Set psCSSClass to "WebIcon_x_circle"
          Set piColumnSpan to 2
             
          WebSetResponsive piColumnIndex rmMobile to 5
         
          Procedure ConfirmWebCarouselImageRemoval Integer eConfirmMode
            Integer iIndex
            tCarouselItem[] CarouselItems
            //
            If ( eConfirmMode = cmYes ) Begin
                 WebGet piSelectedIndex of oWebCarousel to iIndex
                 //
                 WebGet pCarouselItems  of oWebCarousel to CarouselItems
                 //
                 If ( (SizeOfArray(CarouselItems)) > 0 ) Begin
                       //
                       //    EraseFile CarouselItems[iIndex].sPath
                       //
                       Send RemoveCarouselItem of oWebCarousel iIndex
                       //
                 End
            End
            //
          End_Procedure
         
          WebPublishProcedure ConfirmWebCarouselImageRemoval
         
          Procedure OnClick
            tCarouselItem[] CarouselItems
            WebGet pCarouselItems  of oWebCarousel to CarouselItems
            If ( (SizeOfArray(CarouselItems)) > 0 ) Send ShowYesNo (Self) (RefProc(ConfirmWebCarouselImageRemoval)) "Image Removal" "Confirm"
            //
          End_Procedure
             
      End_Object
        
    End_Object 

End_Object