1

hi I want to insert an automatic sections for icons like http://www.nestle.com/ section of A selection of our brands is there any step by step guide for do it in sharepoint 2013 enter image description here

2 Answers 2

2

This can be done using a CSS carousel as follows:

  1. Edit the SharePoint page where you want the carousel to live.
  2. Insert a content editor web part.
  3. Create multiple elements with the same class name eg. <img class="mySlides" src="img_fjords.jpg"> <img class="mySlides" src="img_lights.jpg"> <img class="mySlides" src="img_mountains.jpg"> <img class="mySlides" src="img_forest.jpg">
  4. As buttons to scroll eg. <button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button> <button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button>
    1. Add a little JavaScript for image selection eg. var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) {     showDivs(slideIndex+= n); } function showDivs(n) {     var i;     var x = document.getElementsByClassName("mySlides");     if (n > x.length) {slideIndex = 1}      if (n < 1) {slideIndex = x.length} ;     for (i = 0; i < x.length; i++) {        x[i].style.display ="none";      }     x[slideIndex-1].style.display ="block";  }

That's it. Code sourced from the excellent W3Schools. See it in action here: https://www.w3schools.com/w3css/w3css_slideshow.asp

0
0

If you want to update images on the regular basis then hard coding the images in the content editor web part is not a good idea. This is where you can consider Display Templates.

Have a look at this. You should be able to customise the size/style as per your requirement.

https://en.share-gate.com/blog/image-slider-with-sharepoint-2013-search-results

1

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.