Code Play and Learn

Content Editor WebPart Slider using Adaptor Slider(CSOM)

Advertisements

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