Click here to Skip to main content
12,634,171 members (28,810 online)
Click here to Skip to main content
Add your own
alternative version

Stats

6.6K views
1 bookmarked
Posted

Using Bootstrap Carousel Slider in Servoy 7.4

, 27 Aug 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Using Bootstrap Carousel Slider in Servoy 7.4

Introduction

 Servoy does not yet have plugins for using the bootstrap classes and plugins.But we can use Boostrap plugins and classes  in Servoy 7.4  for designing impressive UI . Here is the tips.

 

Using the code

 Use  a HTMLArea in a form and assigned a global variable as a DataProvider

( var  loadHTML="").

For now am using the CDN links for Bootstrap classes and plugins . You can also download the Bootstrap classes ,plugins and import in your solution.

 Javascrip code :

 
 /**
 * 
 * @properties={typeid:24,uuid:"CB9A3BA5-1808-473A-B70A-5AD793307F8D"}
 */
function loadHTML(){
    globals.imageSlider = (
        <html>
        <head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap        .min.css"></link>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap        -theme.min.css"></link>
        <link rel="stylesheet" href="media:///imageSlider.css"></link>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></scrip>
        <script type="text/javascript">
        <![CDATA[
        $(function(){
            $("#myCarousel").carousel({
                interval:2000,
                pause :true,
            });
        });
        
         ]]>
        </script>
        </head>
        <body>
        <div class="bs-example">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Carousel indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>   
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="active item">
                
                    <h5>Slide 1</h5>
                     <div class="carousel-caption">
                     <a href = "">
                        <img src = "media:///New_York_City_-_Central_Park_-_Conservatory_Garden_-                        _Summer-2.jpg" height="150" width="800"/>
                     </a>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </div>
                <div class="item">
                    <h5>Slide 2</h5>
                    <div class="carousel-caption">
                    <img src = "media:///sinery.jpg" height="150" width="800"/>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </div>
                <div class="item">
                    <h5>Slide 3</h5>
                    <div class="carousel-caption">
                    <img src = "media:///waterfall.jpg" height="150" width="800"/>
                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </div>
                </div>
            </div>50
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
        </body>
        </html>
        ).toXMLString().replace(']]>', '').replace('<![CDATA[','');
    
}

Now run the solution in WebClient.

Points of interest

We can use Bootstrap style classes and plugins in Servoy.

History

Fisrt Tips :August 27 , 2014

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dhanabati
India India
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.161208.2 | Last Updated 27 Aug 2014
Article Copyright 2014 by Dhanabati
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid