Jekyll Image slider in al-folio webpage!

[mihir022]

I am using this template to make a website for our lab. I want to add an Image Slider in the About page just below the description. What process or required steps should I follow to add js enabled image slider? Can you tell me what changes should I do in which particular files to reflect the slider on the About page?
Here is demo of slider Image Slider.

[george-gca]

Have you followed the steps in their repo README?

PS: it might simply not work, since the repo hasn't been updated in years. Also it has this information in the repo:

This repository is archived. Issues are disabled. Pull requests will be ignored.

If you want to try it, probably the files that you'll need to modify in our code are _pages/about.md and _layouts/default.html.

[mihir022]

I have read and tried all the steps from repository but still I got no output. Are there any other way to work around this archived repository?

[pskadasi]

I am also trying to do the same, but I am not able to arrive at the solution. can anyone kindly help me on this thing?

[pskadasi]

this is resolved, thanks all.

[george-gca]

Can you share your solution, so others may benefit from it?

[pskadasi]

sure, i'll get back in 3-4 days and post the workaround.

[pskadasi]

as @george-gca said, i tried to follow Readme: https://github.com/jekylltools/jekyll-ideal-image-slider-include

but it would be better if we follow gh_pages branch and try to replicate what they have done for slider: https://github.com/jekylltools/jekyll-ideal-image-slider-include/tree/gh-pages

even after you follow all the steps, you might get a javascript error, that is due to slider_scripts.html file here _includes/slider_scripts.html

line 12-14:

<script src="{{ "/assets/js/slider/ideal-image-slider.min.js" | relative_url }}"></script>
<script src="{{ "/assets/js/slider/iis-bullet-nav.js" | relative_url }}"></script>
<script src="{{ "/assets/js/slider/iis-captions.js" | relative_url }}"></script>

replace the above lines with the below:

<script src="{{ '/assets/js/slider/ideal-image-slider.min.js' | relative_url | bust_file_cache }}"></script>
<script src="{{ '/assets/js/slider/iis-bullet-nav.js' | relative_url | bust_file_cache }}"></script>
<script src="{{ '/assets/js/slider/iis-captions.js' | relative_url | bust_file_cache }}"></script>

basically replacing " with ' solved my error, and slider worked fine. and replace all other above script lines with new script lines in other files as well.

let me know if anyone is facing the problem even if this doesn't solve for you.

[mpil-gist]

It works well. Thanks!

[scaliaven]

Is there any way to add an image slider to the profile image in the About page?

[george-gca]

Yes, we have an example in this blog post.