1

My client is looking to display a range of logos on their public facing sharepoint 2013 site and cycle through them automatically. I can't for the life of me find a user friendly solution to this.

Any ideas at all would be gratefully appreciated.

0

You can use sharepoint OOTB Picture Slideshow webpart for this.

Steps are as follows:

  1. Create a Picture library.
  2. Upload the images in the picture library.
  3. Add the picture slideshow webpart to the page and configure the webpart to use the picture library created.

This will help you configure the webpart.

  • Thanks for your comment. I was looking for a MultiFrame slider though. (See Trusted By Section at the bottom of this page for an example: flowforma.com) Would this still be possible with the OOTB Picture SlideShow webpart do you think? – Mike_Piercy Oct 29 '14 at 12:06
  • Picture slideshow webpart displays 1 image at a time. This cannot be achieved using PSWP – Harshini Hegde Oct 29 '14 at 12:13
  • Thanks Jinxed, Any ideas on how it can be implemented? – Mike_Piercy Oct 29 '14 at 12:18
  • You have to use a jquery plugin for this. You can use the plugin here-jquery.malsup.com/cycle2/demo/carousel.php.. The same plugin has been used by the site mentioned by you – Harshini Hegde Oct 29 '14 at 12:22
0

You can use jQuery to achieve this.

  1. First place an img tag to the page as follows

    <img id="imageRotator" />
    
  2. Add a new script editor web part to the page OR if it's master page then edit and insert following code

    var images = [
       "http://www.mouserunner.com/images/FxLogo128x128.png",
       "http://www.emsl.com/emslimages/facebook-logo2013.png",
       "http://www.theecoa.org/iMIS15/images/homepage/linkedin.gif"
    ];
    
    var currentIndex = 0;
    $(document).ready(function() {
       setTimeout(changeImage, 3000); 
    });
    
    function changeImage() {
        if(currentIndex < images.length) {
            $('#imageRotator').attr('src', images[currentIndex]);
            currentIndex = currentIndex+1;
        }
        else
            currentIndex = 0;
    
        setTimeout(changeImage, 3000);
    }
    

As you can see above the image URL are stored in an array. You can add as many images are you want. Images will keep changing every 3 second.

Update based on comment

Use jQuery Cycle Plugin. Download the plugin and add following references

<script src="/js/jquery.cycle2.min.js"></script>
<script src="/js/jquery.cycle2.center.js"></script>
<script src="/js/jquery.cycle2.carousel.js"></script>
<script src="/js/jquery.cycle2.tile.js"></script>

Define a div element where you want to display the images

<div id="slider"/>

Use API reference on how to activate the plugin

http://jquery.malsup.com/cycle2/api/

  • This is great, Thanks for this - but I was hoping to have a MultiFrame Carousel. Like the 'Trusted By' section at the bottom of this page: flowforma.com. Any ideas? Thanks again. – Mike_Piercy Oct 29 '14 at 12:09
  • @Mike_Piercy in that site they are using jquery cycle plugin jquery.malsup.com/cycle2/download – Amal Hashim Oct 29 '14 at 12:38
0

For those looking for an answer, the Cycle2 plugin that Jinxed recommended in the comments offered the desired solution. (Albeit a little changes to the css were required)

Check out jquery.malsup.com/cycle2/demo/carousel.php

(Jinxed - if you want to submit this comment as an Answer I'd be happy to mark it as the chosen solution)

Hope this helps.

Thanks.

Michael

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.