Create your own slider for news articles or images

  Previous article Next article  

Create your own slider for news articles or images

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.4
  Last updated: 20-07-2016
  Comments: 3

I will describe the basics of how to create a slider, you can use it yourself in your CMS Made Simple module templates. Think of rotating summary views of the News or CGBlog modules or rotating company logos in the CMSMS Company Directory module.

  How to use

This feature uses jQuery, so to start you need to call the jQuery library in your template. If you already have it there because another module uses it, you don't need to add it twice!

Download the jQuery Cycle plugin and put it in a folder at your webserver. I used the folder "scripts" here...

Add to the head section of your template:

{cms_jquery}

<script type="text/javascript" src="scripts/jquery.cycle.all.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.slider').cycle( {
        fx: 'scrollRight',
        timeout: 5000,
        pause: 1
      } );
    } );
</script>

Use in your page or template in example:

<ul class="slider">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

or:

<div class="slider">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Example News module:

<div class="slider">
  {foreach from=$items item=entry}
    <div class="NewsSummary">
       ...
    </div>
  {/foreach}
</div>

Hacks

White background in Internet Explorer: source

cleartypeNoBg: true

  Working example





A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  3 Comments

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

Create your own slider for news articles or images

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.4
  Last updated: 20-07-2016
  Comments: 3

A2 Webhosting CMS Made Simple