Content Editor WebPart Slider using Adaptor Slider(CSOM)

Hi

Description:CEWP Slider using Adaptor Slider

Just Follow the step:

Create Index.html File and Copy past below code into this
you can download Adaptor JS File and Css From this Link
http://www.jqueryscript.net/demo/Adaptor-Cool-3D-jQuery-Content-Slider/

In My case i have Put all File in asset Library bcoz i have used sub site
you can put it in Item Style also but after that Change all reference of file in your html File accordingly

Ok now Goto your sp site and Edit webpart and give reference of your HTML File and Save it
your slider is ready to slide

<!DOCTYPE html>
<html>
<head>
<title>slider</title>
<script type=”text/javascript” src=”../SiteAssets/Adaptor-Cool-3D/jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=“../SiteAssets/Adaptor-Cool-3D/box-slider-all.jquery.min.js“></script>
<script type=”text/javascript” src=”../SiteAssets/Adaptor-Cool-3D/modernizr.min.js”></script>
<link href=”../SiteAssets/Adaptor-Cool-3D/screen.css” rel=”stylesheet”>

<script type=”text/javascript” >
ExecuteOrDelayUntilScriptLoaded(loadSlideImages, “sp.js”);
function loadSlideImages()
{
var clientContext=new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle(‘AdaptorImages‘);// Get List
var camlQuery = SP.CamlQuery.createAllItemsQuery();

this.frontPictureItems = oList.getItems(camlQuery);
clientContext.load(frontPictureItems, ‘Include(Id, DisplayName, FileLeafRef,EncodedAbsUrl)’);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {
var carousel_html=””;
var listItemInfo = ”;
var listItemEnumerator = frontPictureItems.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var PicUrl=oListItem.get_item(“EncodedAbsUrl“);
carousel_html += “<figure class=’slide’><img src='”+PicUrl+”‘></img></figure>”;

}
$(‘#box’).html(carousel_html);
applyslider();
}
function applyslider() {

var $box = $(‘#box’)
, $indicators = $(‘.goto-slide’)
, $effects = $(‘.effect’)
, $timeIndicator = $(‘#time-indicator’)
, slideInterval = 5000;

var switchIndicator = function ($c, $n, currIndex, nextIndex) {
$timeIndicator.stop().css(‘width’, 0);
$indicators.removeClass(‘current’).eq(nextIndex).addClass(‘current’);
};

var startTimeIndicator = function () {
$timeIndicator.animate({width: ‘680px’}, slideInterval);
};
// initialize the plugin with the desired settings
$box.boxSlider({
speed: 1000
, autoScroll: true
, timeout: slideInterval
, next: ‘#next’
, prev: ‘#prev’
, pause: ‘#pause’
, effect: ‘scrollHorz3d’
, blindCount: 15
, onbefore: switchIndicator
, onafter: startTimeIndicator
});

startTimeIndicator();

// pagination isn’t built in simply because it’s easy to
// roll your own with the plugin API methods
$(‘#controls’).on(‘click’, ‘.goto-slide’, function (ev) {
$box.boxSlider(‘showSlide’, $(this).data(‘slideindex’));
ev.preventDefault();
});

$(‘#effect-list’).on(‘click’, ‘.effect’, function (ev) {
var $effect = $(this);

$box.boxSlider(‘option’, ‘effect’, $effect.data(‘fx’));
$effects.removeClass(‘current’);
$effect.addClass(‘current’);

switchIndicator(null, null, 0, 0);
ev.preventDefault();
});

}
function onQueryFailed(sender, args) {
alert(‘Request failed. ‘ + args.get_message() + ‘n’ + args.get_stackTrace());
}
</script>
</head>
<body>
<div id=”viewport” style=”position: relative; perspective: 1000px; overflow: visible; top: auto; left: auto; display: block; width: 680px; height: 460px;”>
     <div id=”box”>
     </div>
   </div>

</body>
</html>

THANKS SPS

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s