Integrating the image slider into Help Center Follow

Comments

7 comments

  • Avatar
    Leon Cassar

    Hi Andrey,

    Thank you for this article.

    I have found a small issue with the slide transition. Unlike your site, the images are slide from side to side, but they are from front to back. How did you get them to slide from left to right please?

    Also I have showing (in the background) the index section of the images... that is the 1, 2, 3, 4 and the Next button (same thing as in the above gif). How do I remove that?

     

  • Avatar
    Trapta

    Hi @Leon,

     - In response to your first question about slide transition, I think there is some issue as the slider on the site is not the slider listed in this post. And the slider in this post doesn't support the side to side transition.

     - In response to your second question about hiding index section and the next button, pass this setting in the slider configuration to remove index section trackerSummation: false, // 3 of 5 and trackerIndividual: false, // pager. To remove Next button, remove below-listed code from HTML and JS

     From HTML -

    <div id="carousel-left"><img src="//p1.zdassets.com/hc/theme_assets/343497/2051/arrow-left.png" /></div>
    <div id="carousel-right"><img src="//p1.zdassets.com/hc/theme_assets/343497/2051/arrow-right.png" /></div>

    From JS -

    $("#but_prev").click(function () {
    carousel.prev();
    });

    $("#but_next").click(function () {
    carousel.next();
    });

    Thanks

  • Avatar
    Trapta

    @Andrey Sarapulov, will you please take a look at https://sarapulov.zendesk.com/hc/en-us to see why there is a different slider?

    Thanks

  • Avatar
    Andrey Sarapulov

    oh... this article was written long time ago. Many things have changed this then. Even Help Center is not the same anymore. Perhaps rather refer to https://bkosborne.com/jquery-feature-carousel as an example...

  • Avatar
    Leon Cassar

    Hi @trapta

    I removed the codes you mentioned but the numeric index is still showing... anything that i am missing? I cannot see anywhere fro
    m where this is being pull :|

  • Avatar
    Trapta

    @Leon, did you add the settings in the JS code as I mentioned? If not, please pass the settings as mentioned below -

    var carousel = el.featureCarousel({
    trackerSummation: false, // 3 of 5
    trackerIndividual: false // pager
    });

    Thanks

  • Avatar
    Leon Cassar

    Ahhh of course!

    Thanks :D

Please sign in to leave a comment.

Powered by Zendesk