Create your own slider for news articles or images

[Barrowboy]

Hi

I am trying to create a news slider from CREATE YOUR OWN EXAPLE

But how do you call items from the news?

How do you add news items into the example provided.

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

I want the news items to be called from the news module so it would possible be the first 6 items, if a news item was added that would go to the top of the list.

I trust that makes some since.

Thanks

[DIGI3]

The help for the News module is actually pretty useful for this:

How do I use it?
The easiest way to use it is with the {news} wrapper tag (wraps the module in a tag, to simplify the syntax). This will insert the module into your template or page anywhere you wish, and display news items. The code would look something like: {news number='5'}

[Rolf]

https://cmscanbesimple.org/blog/create- ... -or-images

[Barrowboy]

Hi
I Have tried your suggestion but still nothing.

This is the code in my template header.
{cms_jquery}

<__script__ type="text/javascript" src="http://www.mysite.org.uk/scripts/jquery ... "></__script>
<__script__ type="text/javascript">
$(document).ready(function() {
$('.slider').cycle( {
fx: 'scrollRight',
timeout: 5000,
pause: 1,
cleartypeNoBg: true
} );
} );
</__script>

I then have this in the page content.

<div class="slider">{foreach from=$items item=entry}
<div class="NewsSummary">{news number='3'}</div>
{/foreach}</div>

But nothing shows.

The jquery is in the correct place.

When I look into the source code it only shows this.
<div class="slider">

</div>

Can you please advice further.

Thanks

[DIGI3]

The foreach should be in your news template, it can't be in your page template the way you have it as it doesn't have any data to work with yet.

So, in your page template or content:
{News number=3 template='yourtemplatename'}

Then look at a sample news summary template to see how the foreach works, and create your own with the appropriate code.

[Barrowboy]

Hi

I am nearly there. The slider is now working but it appears to sit on top not within the content area.

I have this code in the main template.

<__script__ src="/lib/jquery/js/jquery.cycle.all.min.js"></__script>
<__script__ type="text/javascript">
$(document).ready(function() {
$('.slider').cycle( {
width: 500,
height: 500,
fx: 'scrollLeft',
timeout: 3000,
pause: 1,
cleartypeNoBg: true
} );
} );
</__script>

This is my news summary template.

<div class="row small-up-1 medium-up-3" data-equalizer data-equalizer-on="medium" >
<div class="ns_container">
<div class="slider">
{foreach from=$items item=entry}
<div class="column">
<div class="card" data-equalizer-watch>

<div class="card-divider">
<h4>{$entry->title|cms_escape}</h4>
</div>

{if isset($entry->fields)}
{foreach from=$entry->fields item='field'}
{if $field->type == 'file'}
{if isset($field->value) && $field->value}
<img src="{$entry->file_location}/{$field->value}" alt="{$field->value}" />
{/if}
{elseif $field->type == 'linkedfile'}
{if !empty($field->value)}
<img src="{file_url file=$field->value}" alt="{$field->value}" />
{/if}
{/if}
{/foreach}
{/if}

<div class="card-section">
{if $entry->postdate}
Posted {$entry->postdate|cms_date_format}
{/if}

{if $entry->summary}
{$entry->summary}
{else if $entry->content}
{$temp="{eval var=$entry->content}"}
<p>{$temp|strip_tags|truncate:280}</p>
{/if}
<a class="button" href="{$entry->moreurl}">read more&hellip;</a>

</div>
</div>
</div>
{/foreach}
</div></div></div>

And the call in the page content area.

{News number=5 summarytemplate='my-slider-summary'}

But I cannot get the slider to show correct on the page it appears to be outside the content block.

Does it require 'index' somewhere.

Thanks for your help.

[DIGI3]

View the source code of the generated page and try to find out where you went wrong. The output will be wherever you put the module call.

[Barrowboy]

OK sorted just need to tweak the layout a bit.

Thanks