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:-
http://bxslider.com/
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:-
http://sorgalla.com/jcarousel/examples/
Also when Styling UI FontAwesome might be handy:-
http://fortawesome.github.io/Font-Awesome/
We can refer the font awesome CDN as below:-
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/CSS/font-awesome.min.css" type="text/css" />
Or we can place the fontawesome.min.css file and supporting fonts/images to style library.

No comments:

Post a Comment