Utvikler cookbook

5.1.1. Article list carousel

Tittel: Article list carousel

Filnavn: eross-object-list-articles-slider.tpl

 

{*
@title			Article list carousel
@description	List of articles in a carusel. Supports manual URL
@type 			object
@compatibility 	EP_News,EP_NewsCopy,EP_NewsCopy_Multi
@bundle 		eross
*}
<section class="top-30 clearfix">
  {if $arr_items|@count > 0}
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div class="eross-slider">
            <div class="slider flexslider">
              <ul class="slides">
                {foreach item=el from=$arr_items}
                  {if $el.url_manual|trim != ''}
                    {assign var=url value=$el.url_manual}
                  {else}
                    {assign var=urlA value='/nyheter/?article_id='}
                    {assign var=url value=$urlA|cat:$el.id}
                  {/if}
                  
                  <li>
                    <a href="{$url}">
                      <img alt="{$image.description}" src="{$image.url}" draggable="false">
                    </a>
                    <div class="col-xs-12 col-md-8 nb-content animated-area">
                      <h2>{$el.header}</h2>
                      <p>{$el.abstract}</p>
                      <div class="text-right">
                        <a href="{$url}" title="{$el.readmore_text}" class="button green">{$el.readmore_text}<i class="fa fa-share"></i></a>
                      </div>
                    </div>
                  </li> 
                {/foreach}
              </ul><!-- // .slides -->
          </div><!-- // .slider -->
         </div>

        </div>
      </div>
    </div>

{literal}
<script>

  //Slider
  jQuery('.flexslider').hover(function() {
    jQuery(this).find('.flex-direction-nav .flex-prev').stop().animate({'opacity' : 1, 'margin-left': 0}, 200, 'easeOutQuad');
    jQuery(this).find('.flex-direction-nav .flex-next').stop().animate({'opacity' : 1, 'margin-right' : 0}, 200, 'easeOutQuad');
  }, function(){
    jQuery(this).find('.flex-direction-nav .flex-prev').stop().animate({'opacity' : 0, 'margin-left': -25}, 200, 'easeOutQuad');
    jQuery(this).find('.flex-direction-nav .flex-next').stop().animate({'opacity' : 0, 'margin-right' : -25}, 200, 'easeOutQuad');
  });

  //FlexSlider
  jQuery('.slider').flexslider({
    animation: "fade",
    controlNav: false,              
    directionNav: true,
    prevText: '<i class="fa fa-angle-left"></i>',           
    nextText: '<i class="fa fa-angle-right"></i>',              
  });

</script>
{/literal}
  {/if}
</section>

23.06.14

Hjelp / support

Jeg finner ikke det jeg leter etter

Vår dokumentasjon er stadig under utvikling. Vi endrer og legger til nye kapitler og bøker etter hvert som EasyPublish CMS endrer og vokser. Skulle du likevel ikke finne det du leter etter så ta kontakt med oss via support@escio.no.

Jeg har funnet en feil

Hvis du har funnet en feil i vår dokumentasjon så ønsker vi å rette på den. Send oss et hint til support@escio.no.

Translate

You can translate this documentation by using Google Translate. Select your language:

×