Using Slick Slider to display slider with own content

[1PlanetParticipant]

Hi Ernest,

first of all thank you for your great work! I recently bought your ASP and RPP and I love both of them already.

I havent reviewed them yet, because the site is still under development. Since it

s gonna be a site with several 10 thousand posts (products) I decided to wait with that until I can give a proper feedback on your plugins installed on such a big site, which might be interesting for others.

Well, I have a little problem here which you might help me with. 

I use RPP as carousel (slick slider) and everything works super fine! Now I would like to display some other content as a carousel and first I wanted to use slick slider from Ken Wheeler. I´m not sure but I think your plugin is also using it as a customized version or?

Now it would be great if I could save some requests and data by not implementing that slick slider and instead using what is already integrated in my website through your plugin.

Let

s say I have some html markup like:

<div class=”your-class”>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>

Now I could implement all the slick js and call the script:

$(document).ready(function(){
$(‘.your-class’).slick({
setting-name: setting-value
});
});

So I checked how you do it and it looks a bit different, e.g. :

rppjQuery(document).ready(function ($) {
$(‘div[id^=”relatedpostspro_0_”]’).relatedpostspro({
“node”: null,
“elements”: “.rpp_item.rpp_visible”,
“elementsAll”: “.rpp_item”,
“visibleClass”: “rpp_visible”,
“fadeoutClass”: “rpp_fadeout”,
“titleSelector”: “.rpp_title”,
“loadingSelector”: “.rpp_cssloading_container”,
“relevanceSelector”: “.rpp_relevance”,
“type”: “slick”,
“isotopeLayout”: “masonry”,
“transitionAnimation”: “fxCoverflow”,
“initialFilter”: “post_type”,
“autoplay”: false,
“autoplayTime”: “6000”,
“overrideFilter”: true,
“minShow”: 15,
“defSortValue”: “rpp_relevance”,
“defSortOrder”: “desc”,
“showSettings”: 1,
“showSearchByDefault”: 1,
“exactSearchMatchOnly”: 1,
“dots”: true
});
});

I tried already to use your code to make the html markup from above a carousel, but sadly without success.
In case you are using slick slider as I assume and you dont mind that I would use it to create a slider, I would really appreciate if you could point me into the right direction and tell me how to use your js to make the html appear as a slider.

Maybe you can use the html markup from above to create a little example on how the function must look like.

Thanks a lot in advance and for those two great plugins!

Cheers, Thomas

[Ernest MarcinkoKeymaster]

Hi Thomas,

Thank you very much for your kind words!

The slick slider script is heavily modified and bundled into the plugin scripts, but I believe you should be able to access it as:

jQuery(function($){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

The other code is the related posts plugin code, which only works with the exact HTML structure outputted by the related posts pro shortcode, and other information is needed as well.

It’s been a while since I played around with the slick slider source code, but I think you will still need some of their CSS files to get the correct element positions and flow, otherwise it may not work at all. The default styling bundled with the slick script is mostly removed and the rest is changed to fit only the related posts pro data structures, so that won’t apply to other elements.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts