NorrCompetition Carousel

The module displays participants from selected competitions with nice carousel effect.

General Options

  • Type - type of the data - participants or competitions;
  • Items - this variable allows you to set the maximum amount of items displayed;

This allows you to preset the number of slides visible with a particular browser width. That if(window<=1199){ show 4 slides per page}

Desktop

  • Desktop Browser width - width in pixels;
  • Items for Desktop - this variable allows you to set the maximum amount of items displayed for Desktop Browser width;

Desktop Small

  • Desktop Small Browser width - width in pixels;
  • Items for Desktop Small - this variable allows you to set the maximum amount of items displayed for Desktop Small Browser width;

Tablet

  • Tablet Browser width - width in pixels;
  • Items for Tablet - this variable allows you to set the maximum amount of items displayed for Tablet Browser width;

Mobile

  • Mobile Browser width - width in pixels;
  • Items for Mobile - this variable allows you to set the maximum amount of items displayed for Mobile Browser width;
  • Display only one item - force one item to show;
  • Items Scale Up - option to not stretch items when it is less than the supplied items;

Basic Speeds

  • Slide speed - slide speed in milliseconds;
  • Pagination speed - pagination speed in milliseconds;
  • Rewind speed - rewind speed in milliseconds;

Auto Play

  • Auto Play - use the automatic scrolling slides;
  • Auto Play Speed - slide speed in milliseconds if Auto Play Enable;
  • Stop autoplay on mouse hover - enable or disable;

Navigation

  • Navigation - display 'next' and 'prev' buttons;
  • Slide to first - slide to first item. Use Rewind Speed to change animation speed;
  • Scroll per page not per item - scroll per page not per item. This affect next/prev buttons and mouse/touch dragging;

Pagination

  • Show pagination - enable or disable paginations;
  • Show numbers inside pagination buttons;

Responsive

  • Resposive - enable or disable responsive capabilities;
  • Responsive refresh rate - check window width changes every 200ms for responsive actions;

CSS Styles

  • Base class - automaticly added class for base CSS styles. Best not to change it if you don't need to;
  • Theme - name theme, it also is a class theme ;
  • Use Theme CSS - enable or desable theme file css;
  • Use Transitions CSS - enable or disable transition css. Has a dependency on the parameter 'Transition animation';

Lazy Load

  • Lazy load - delays loading of images. Images outside of viewport won't be loaded before user scrolls to them. Great for mobile devices to speed up page loadings. IMG need special markup;
  • Lazy follow - when pagination used, it skips loading the images from pages that got skipped. It only loads the images that get displayed in viewport. If set to NO, all images get loaded when pagination used. It is a sub setting of the lazy load function;

Auto height - automatically adapts the items height. Use it only for one item per page setting;

Mouse Events

  • Mouse drag - turn off/on mouse events;
  • Touch drag - turn off/on touch events;

Transition animation - add CSS3 transition style. Works only with one item on screen. Effects: Fade, Back Slide, Go Down, Fade Up;

Add active class - Add 'active' classes on visible items. Works with any numbers of items on screen;


Participants Options

  • Count - specify the participants count to display;
  • Title Length - if set then the title of the participant will be truncated till this value. You may set it when the title breaks the layout;
  • Competitions - the competition from which the participants should be displayed;
  • Order - ordering for the list of participants;
  • Order Direction - ascending or descending;

Main Layout Settings

This settings are applied to the item of the participant.

  • Image - show or hide the image of the participant;
  • Image Size - you can choose image size: big, medium, small;
  • Image Link - use link in image at the participant;
  • Lightbox - use lightbox link in image instead the participant;
  • Lightbox Image Size - select size image for lightbox: big, medium, small;
  • Title - show or hide the title of the participant;
  • Title Link - use title link of the participant;
  • Rating - show or hide the rating of the participant;

Overlay Layout Settings

Overlay is applied to the image of the participant

  • Use Overlay - use overlay for image of the participant;
  • Title - use title in overlay;
  • Rating - use rating in overlay;

Competitions Options

  • Count - the competitions count to display.
  • Title Length - if set then the title of the competition will be truncated till this value. You may set it when the title breaks the layout;
  • Category - the category from which the competitions should be displayed.
  • Status - the status of the competitions to display: All, Active or Completed.
  • Order - the ordering of the competitions: Title Alphabetical, Ordering, Created Date, Start Date or End Date.
  • Order Direction - the direction of the ordering: Ascending or Descending.

Main Layout Settings

This settings are applied to the item of the competition.

  • Image - show or hide the competition image.
  • Image Link - use link in image at the competition.
  • Description - show or hide the description of the competition.
  • Limit characters - limit the number of characters
  • Information - show or hide the information about the competition. If this parameter is set to hide, then all parameters below will not make any effect.
  • Category – show or hide the category of the competition.
  • Link Category - display the category title as a link to a category layout.
  • Status - show or hide the competition status.
  • Created Date - show or hide the created date of the competition.
  • Start Date - show or hide the start date of the competition.
  • End Date - show or hide the end date of the competition.
  • Voting Start Date - show or hide the voting start date.
  • Voting End Date - show or hide the voting end date.

Overlay Layout Settings

Overlay is applied to the image of the competition.

  • Overlay - use Overlay for image of the competition
  • Title - show or hide the title in overaly
  • Description - show or hide the description in overaly
  • Limit characters - limit the number of characters

Alternative Layout

In the advanced tab you should select the alternative layout that matches your theme in the component settings: default, bootstrap2, bootstrap3 or uikit.