Thursday, 19 October 2017

Create a Responsive Bootstrap Carousel Touch Slider with Text Animation in XPages


In my continuous search for modern plugins for my XPages applications I came across the Bootstrap Carousel Touch Slider with Text Animation plugin. The plugin is adding touch behavior to Bootstrap's Carousel and adds beautiful animations in text slides. It is possible to use all text animations from animate.css. The only thing needed is to include the library on an XPages or Custom Control and create the carousel components as described in the official Bootstrap documentation. The JavaScript and CSS file can be downloaded from Bootstrap Themes website.
Below an example how the Bootstrap Carousel Touch Slider with Text Animation plugin can be used in an XPages application.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder bootstrapcarouseltouchslider has been added in the WebContent Folder.
Next the JavaScript and CSS files, bootstrap-touch-slider.js and bootstrap-touch-slider.css must be included on the XPage or Custom Control. In this example I add the files to an XPage. I also added a link to the animate.css file and the touchSwipe library.

<link rel="stylesheet" href="bootstrapcarouseltouchslider/bootstrap-touch-slider.css" />
<script type="text/javascript" src="bootstrapcarouseltouchslider/bootstrap-touch-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js">
</script>

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:carousel}" ).bsTouchSlider();
})
]]></xp:this.value>
</xp:scriptBlock>

Animations
For each item I added a slide text layer with the text and button animations in the Bootstrap Carousel. See for more information under Code XPage in this blog post.

<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>

Final result
The final result is a responsive Bootstrap Carousel Slider including touch enabled dragging slides with beautiful text animations.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="bootstrapcarouseltouchslider/bootstrap-touch-slider.css" />
<script type="text/javascript" src="bootstrapcarouseltouchslider/bootstrap-touch-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js">
</script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:carousel}" ).bsTouchSlider();
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div id="carousel" class="carousel bs-slider fade slide_style_left control-round indicators-line" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="bootstrapcarouseltouchslider/images/birds1.jpg" alt="image1"></img>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="bootstrapcarouseltouchslider/images/birds2.jpg" alt="image2"></img>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_right">
<h1 data-animation="animated zoomInLeft">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="bootstrapcarouseltouchslider/images/birds3.jpg" alt="image3"></img>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_center">
<h1 data-animation="animated zoomInLeft">Bootstrap Carousel</h1>
<p data-animation="animated fadeInCenter">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bootstrap Carousel Touch Slider with Text Animation

No comments:

Post a Comment