jQuery Image Scrolling

[ebaileyybs]

Hi,

I would like to create an image scroller on one of our CMS homepages.I have found the following article which has a jQuery for a scroller;

http://cssglobe.com/jquery-plugin-easy-image-or-content-slider/

I have created a UI script for the jQuery code. I have then started to create the script with my images to try to set them to scroll.

Here is my script so far;

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:include_script src="easySlider.1.7.js"/>

<div id="slider">

      <ul>

      <li> <img src="nominate_star_banner.jpgx"/></li>

      <li> <img src="open_house_banner.jpgx"/></li>

      </ul>

</div>

</j:jelly>

I am struggling with the next steps after adding the <div> code. What do I need to do to get this working?

Any help with this would be greatly appreciated.

Kind regards,

Emma

[Manjul Katare]

Hi Emma,

ServiceNow Platform supports Bootstrap and has jQuery already plugin in.

Please try below snippet, all you need is change <img> sources.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->

  <ol class="carousel-indicators">

      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

      <li data-target="#myCarousel" data-slide-to="1"></li>

      <li data-target="#myCarousel" data-slide-to="2"></li>

      <li data-target="#myCarousel" data-slide-to="3"></li>

  </ol>

  <!-- Wrapper for slides -->

  <div class="carousel-inner" role="listbox">

      <div class="item active">

          <img src="image-1.pngx" />

      </div>

      <div class="item">

          <img src="image-2.pngx"/>

      </div>

      <div class="item">

          <img src="image-3.pngx"/>

      </div>

      <div class="item">

          <img src="image-4.pngx"/>

      </div>

  </div>

  <!-- Left and right controls -->

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

      <span class="sr-only">Previous</span>

  </a>

  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

  </a>

</div>

</j:jelly>

Hope this helps!

-Manjul

[Community Alums]

Hi Emma,

Please go to https://developer.servicenow.com/app.do#!/training/article/app_store_learning_advanced_ui_fuji_c_Mod..., you will find a step by step Slider implementation in service Now if you are using CMS.

Note: Please keep this in mind when you will go to open this link, it will automatically append https://community.servicenow.com/   so in address bar please remove this, then you will reach the right content.

Reagrds,

Ravi Katiyar