Create your own slider for news articles or images
Previous article Next articleI 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:
<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,
cleartypeNoBg: true
} );
} );
</script>
- Download: http://jquery.malsup.com/cycle/download.html
- Parameters: http://jquery.malsup.com/cycle/options.html
Use in your page or template in example:
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
or:
<div>...</div>
<div>...</div>
<div>...</div>
</div>
Example News module:
{foreach from=$items item=entry}
<div class="NewsSummary">
...
</div>
{/foreach}
</div>
Working example
- Local demo page - Opens in a new tab
- Rotating sponsor banner
Comment Form
ReviewManager
ReviewManager
7 Comments
Horny Shriya called you 2 times. She is online. Click the below link to chat with her. She is very horny now.
https://live-sex-chat.club/?call=horny-shriya
The tutorial contains an example for the News module, based on the default CMSMS summary template.
What you want/need to add in the NewsSummary div is up to you.
Hi
I am trying to use the slider to rotate the first 4 -5 news items from the News module.
I have the jquery copied and stored then linked back to the template as described but cannot figure out what should go between the div's
can you please advice.
Thanks
{foreach from=$items item=entry}
...
{/foreach}
Thanks you, Toti
I have updated the tutorial.
Great idea!
I found a tiny problem with JS parameters. In the end of line "pause" should be "," instead of ".". With this change the script works well in my page.
Thanx again.
Nice tutorial on news slider or images. You can get more awesome plugins here http://www.jqueryplugins.net
Simple and useful, I love to use cycle2 in my jobs
just one word "awesome".
can you please provide me XMl and mail me @ my email address please.. because i dont't know how to assign module to particular position and i had also tried with syntax provided in doc but not display as i intended.
Create your own slider for news articles or images
Article optimized for CMSMS 2.x
Author: RolfLast tested in: CMSMS 2.2.7
Last updated: 29-08-2018
Comments: 7
http://cms.ms/f56D
