Saturday, May 17, 2014

SharePoint2013 Slide Show of List Items using JSOM

Scenario: I have been tasked with showing SharePoint list items on a webpage with ability for users to slide 2 items at a time with right and left arrow as below
Solution: I have used jQuery plugin bxslider that can be found at:-
Download the plugin and place required contents (CSS, JS and image files) in StyleLibrary
and below code does the trick.

Also, modify the jquery.bxslider.css file as below:-
1.  Find ".bx-wrapper img" modify it to ".bx-wrapper div"
2. Find
.bx-wrapper .bx-prev {
 left: 10px;
 background: url(controls.png) no-repeat 0 -32px;
modify the relative path of  "url(controls.png)" as per your environment.

You can also use another Carousel plugin jCarousel:-
Also when Styling UI FontAwesome might be handy:-
We can refer the font awesome CDN as below:-
<link rel="stylesheet" href="//" type="text/css" />
Or we can place the fontawesome.min.css file and supporting fonts/images to style library.