Using Slick Slider to display slider with own content

Home Forums Product Support Forums Related Posts Pro for WordPress Support Using Slick Slider to display slider with own content

This topic contains 1 reply, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 5 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #13374
    1Planet
    1Planet
    Participant

    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

    #13438
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.