123

Product support

Get help in the plugin support forum.

Categories

Touch Responsive Slideshows

Add touch responsive slideshows with device independent design and advanced options. Advance options allow you to make you own style slider with many customizations. Feel free to use with any browser on any device.

Multiple Slideshows

Add multiple slideshows on same page with different customizations.

Features

  • Touch responsive
  • Light weight
  • No JQuery used
  • 17 transaction effects
  • Touchpad scrolling
  • Multiple slideshows on same page
  • Image fill modes
  • Keyboard arrow key navigation
  • Horizontal and vertical drag orientation
  • Bullet and arrow navigators with custom direction

Live demo:

Like this plugin?

Give a like, if you found this plugin helpful, you can help me to make this plugin more improved by giving your suggestions and comments.

Manage Sliders

Rjsliders Plugin

Create a slideshow in your website using high performance, touch responsive sliders.

How do this work

The plugin provides advanced slider component to build slideshow with advance settings, through which you can create your own style sliders.

Note: Put {% styles %} and {% scripts %} in your page header, if not there.

Advanced Slider Component

Use the advanced component to display the slideshow for your images of any size. The component has the following properties:

  • Slider - Choose slideshow that is registered previously.
  • Height - Set the height of your slideshow, default value is 400 (Note: width is dynamic).
  • Autoplay - Whether to auto play, to enable slideshow, this option must be set to true, default value is True.
  • Fill Mode - The way to fill image in slide, stretch, keep aspect ratio and put all inside slide, cover (keep aspect ratio and cover whole slide), actual size, contain for large image, actual size for small image, default value is Stretch.
  • Transaction Effect - Set the slideshow transaction effect, default value is Random.
  • Autoplay Interval - Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 2000.
  • Pause on Hover - Whether to pause when mouse over if a slider is auto playing, Options: no pause, mouse, touch, mouse & touch, default value is Mouse.
  • Arrow Key Navigation - Allows keyboard (arrow key) navigation or not, default value is True.
  • Slide Duration - Specifies default duration (swipe) for slide in milliseconds, default value is 500.
  • Drag Offset - Minimum drag offset to trigger slide , default value is 40.
  • Slide Spacing - Space between each slide in pixels, default value is 0.
  • Drag Orientation - Orientation to drag slide, Options: no drag, horizontal, vertical, both, default value is Horizontal.
  • Play Orientation - Orientation to play slide (for auto play, navigation), Options: horizontal, vertical, horizontal reverse, vertical reverse, default value is Horizontal.
  • Navigator Show - Show the bullet or arrow navigator for slide, default value is Always.
  • Auto Center - Align navigator to user specific location.
  • Orientation - Horizontal and vertical orientation for bullet and arrow navigators.
  • SpacingX - Horizontal spacing for bullet navigator, default value is 8.
  • SpacingY - Vertical spacing for bullet navigator, default value is 8.
  • Steps - Steps to go for each navigation request, default value is 1.
  • Lanes - Specify lanes to arrange items, default value is 1.

The next example shows usage of advanced component: title = "Demonstration" url = "/" layout = "default"

[advanced]
idSlider = "9"
height = "400"
autoplay = "true"
fillmode = "0"
transaction = "1"
autoplayinterval = "2000"
pauseonhover = "1"
arrowkeynavigation = "true"
slideduration = "500"
mindragoffset = "40"
slidespacing = "0"
dragorientation = "1"
playorientation = "1"
chancetoshow = "2"
autocenter = "1"
orientation = "1"
spacingx = "8"
spacingy = "8"
steps = "1"
lanes = "1"
chancetoshowarrow = "1"
autocenterarrow = "2"
stepsarrow = "1"
==
<!-- Advance Slider -->
<div class="container-fluid">
    {% component 'advanced' %}
</div>
<!-- End Advanced Slider -->

Live demo:

  • Found the plugin useful on 27 Oct, 2017

    插件有一个错误,需作以下修改: 在以下路径plugins/raviraj/rjsliders/contrllers/sliders/找到config_list.yaml文件

    Model List Column configuration

    list: $/raviraj/raviraj/rjsliders/models/slider/columns.yaml 去掉一个/raviraj。OK!

  • Found the plugin useful on 21 Sep, 2017

    You can easily fix the wrong path in plugins/raviraj/rjsliders/controllers/sliders/config_list.yaml

    It is already fixed in the git repo for over a year, but unfortunately the changes aren't reflected here.

  • Found the plugin not useful on 18 Mar, 2017

    How a shitty plugin still can be hosted here?

    Impossible de trouver le fichier de configuration /Applications/XAMPP/xamppfiles/htdocs/speedbike/plugins/raviraj/raviraj/rjsliders/models/slider/columns.yaml défini dans Backend\Behaviors\ListController. /Applications/XAMPP/xamppfiles/htdocs/speedbike/modules/system/Traits/ConfigMaker.php line 63

  • Found the plugin not useful on 13 Nov, 2016

    Unable to find configuration file ../plugins/raviraj/raviraj/rjsliders/models/slider/columns.yaml defined for Backend\Behaviors\ListController.

  • Found the plugin not useful on 11 Jul, 2016

    After successful installation, I clicked on the "Slider" Button in Backend which gave me this error:

    Unable to find configuration file ../plugins/raviraj/raviraj/rjsliders/models/slider/columns.yaml defined for Backend\Behaviors\ListController.

    Click to see image This happens with current stable build 348.

    Will update once I resolved this issue....

  • Found the plugin useful on 7 Sep, 2015

    This is awesome. But unlike other sliders, it doesn't have the option of adding links in every image. Nonetheless, it's excellent.

  • Found the plugin useful on 15 Jul, 2015

    Excellent product but links need to be added!

  • Found the plugin useful on 29 May, 2015

    Awesome plugin. easy to use. The only thing that necessary is adding links to images. I think, not only I need this thing.

  • Found the plugin useful on 20 Nov, 2014

    great!

  • Found the plugin useful on 16 Oct, 2014

    Great plugin, easy to use! :D

  • Found the plugin useful on 22 Aug, 2014

    Very nice but I'd suggest to do add visual description of image for e.g bootstrap slider and adding link to image

  • Found the plugin useful on 13 Aug, 2014

    awesome, works perfectly as per my need.

1.1.0

Fix deleting sliders

Jul 08, 2016

1.0.9

Use checkboxes for boolean values

Sep 14, 2015

1.0.8

Add CS locale

Sep 14, 2015

1.0.7

Fix showing permissions

Sep 14, 2015

1.0.6

Added compatibility for latest version of OctoberCMS.

Jan 13, 2015

1.0.5

Slider loading issue fixed.

Dec 18, 2014

1.0.4

Performance improvement, JQuery removed.

Aug 16, 2014

1.0.3

Minor code cleanup, JQuery added for responsive design.

Aug 16, 2014

1.0.2

Multiple sliders compatibility on same page, JQuery removed, minor code cleanup

Aug 13, 2014

1.0.1

First version of RjSliders

Aug 12, 2014