Toggle Submenu
  1. Forums
  2. Recent
  3. Categories
  4. Tags
  5. Users
  6. Badges
Support is currently Offline
Support Offline
It's past support hour. We are taking some rest and will come back stronger tomorrow. Promise!
Official support hours:
Monday To Friday except Saturday and Sunday
From 09:30 To 17:00
Our current time: Friday 4:09 am
Add a reply View Replies (6)

Resolved Easyprofile users list module with slider/carousel option/view?

  1. blocdaddy
    blocdaddy
  2. General
  3. Friday, April 05 2019, 01:31 AM
I am using the Easyprofile users list module in a couple of different ways on my homepage http://www.premierlawyers.org. One version of the module (under the header "Featured Members";) is set to display only the users in a certain usergroup, from newest to oldest (and the other module is set to list all members in every usergroup from newest to oldest). I know that through the module settings I can limit the number of users, columns, profile info etc., that is shown in the front end of the modules and I have done this for both. However for the module which I have set to only show only one usergroup ("Featured Members";), I would like to be able to show on my homepage all of the users that could possibly be shown. The problem is that by doing so, it takes up most of my homepage as it shows in the front end as a list/column. Is there anyway to show the modules in a slider type of format where the featured members would be displayed as scrolling along one line of the page like a slider or carousel view rather than a normal list/column like now? Is this an option anywhere? If not, is there any code which could be added which would make this possible? Is this something you could add if it isn't already a feature?
Responses (6)
admin
admin Accepted Answer
Admin
Hi,
this is not possible natively, anyway you can do this by adding a bit of javascript like this:


jQuery(document).ready(function(){

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').hide(); 

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().show().addClass('jsn-active'); 



	setInterval(function(){ 

		if(jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').is(':last-child')) {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').hide().removeClass('jsn-active');

			jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().fadeIn().addClass('jsn-active');

		}

		else {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').removeClass('jsn-active').hide().next().fadeIn().addClass('jsn-active');

		}

	}, 3000);

});


In my example every 3 seconds (3000 milliseconds) the view change to another row.
  1. more than a month ago
  2. General
  3. # 1
blocdaddy
blocdaddy Accepted Answer
Awesome - thanks for the quick response! I am only a beginner coder...where would I insert your sample code?
  1. more than a month ago
  2. General
  3. # 2
admin
admin Accepted Answer
Admin
Hi,
sorry for late reply, it's a weekend :D

Normally all templates allow you to add custom Javascript code with 2 ways:
1) In Template parameters (Extensions->Templates->Styles)
2) In specific custom files, for example creating a new file like /templates/theme-folder/js/custom.js

About your template you can follow docs at http://documentation.aplikko.com/flex/#Custom_Code_Settings, in parameter called "Before /head" add following code:
<script>jQuery(document).ready(function(){

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').hide(); 

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().show().addClass('jsn-active'); 



	setInterval(function(){ 

		if(jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').is(':last-child')) {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').hide().removeClass('jsn-active');

			jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().fadeIn().addClass('jsn-active');

		}

		else {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').removeClass('jsn-active').hide().next().fadeIn().addClass('jsn-active');

		}

	}, 3000);

});</script>
  1. more than a month ago
  2. General
  3. # 3
blocdaddy
blocdaddy Accepted Answer
Wow, thanks for answering on a weekend! I wasn't expecting a response. I'll insert the code and see if it works. Thanks again for the quick responses and really great help!!
  1. more than a month ago
  2. General
  3. # 4
blocdaddy
blocdaddy Accepted Answer
I just tried the code and it works great! I had one other quick question...is there any way to slow down the actual transition effect between views so it's more of a fade in and out effect? Thanks so much for your help. Your software and support are really great!
  1. more than a month ago
  2. General
  3. # 5
admin
admin Accepted Answer
Admin
Hi,
please try to replace the previous code with this:
<script>jQuery(document).ready(function(){

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').hide(); 

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().fadeIn(2000).addClass('jsn-active'); 



	setInterval(function(){ 

		if(jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').is(':last-child')) {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').fadeOut(2000 , function(){

				jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().fadeIn(2000).addClass('jsn-active');

			}).removeClass('jsn-active');

			

		}

		else {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').removeClass('jsn-active').hide().next().fadeIn(2000).addClass('jsn-active');

		}

	}, 5000);

});</script>


2000 are milliseconds of the transition time
5000 are milliseconds of switch between slides

NOTE: if you set 2000 to transition time then it mean 2 seconds for fadeOut and 2 seconds for fadeIn, so total transition time will be 4 seconds (4000ms). With 4000ms of transition time then the time to switch between slides must be great than 4000ms, so something like 5000ms is good
  1. more than a month ago
  2. General
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.