Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add Image carousel in markdown

I want to create image carousel in my GitHub README.md file. I saw that code HTML does not work very well in markdown but I want to know if it is possible to do carousel in markdown. I am using HTML code for image slider from here

like image 837
Gautam Chibde Avatar asked Apr 07 '26 13:04

Gautam Chibde


1 Answers

This question is a little bit outdated but still relevant, so I want to share my (a little bit hacky) way to do it as a future reference:

I use ffmpeg to create a gif with crossfade

ffmpeg \
-framerate 10 -loop 1 -t 5 -i 1.png \
-framerate 10 -loop 1 -t 5 -i 2.png \
-framerate 10 -loop 1 -t 5 -i 3.png \
-framerate 10 -loop 1 -t 5 -i 4.png \
-framerate 10 -loop 1 -t 5 -i 5.png \
-filter_complex \
"[1]format=rgba,fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+4/TB[f0]; \
 [2]format=rgba,fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+8/TB[f1]; \
 [3]format=rgba,fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+12/TB[f2]; \
 [4]format=rgba,fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+16/TB[f3]; \
 [0][f0]overlay[bg1];[bg1][f1]overlay[bg2];[bg2][f2]overlay[bg3];[bg3][f3]overlay,split[v0][v1]; \
 [v0]palettegen[p];[v1][p]paletteuse[v]" -map "[v]" out.gif

After that I'm going to create an issue on Github "add a slideshow to readme" and here I'm going to add the gif as comment. Now you can simply copy the created link to the github raw content upload and paste it into your readme.

Now you have a slideshow in your readme without adding any images or code to your repo and without using javascript.

like image 180
Fabian Avatar answered Apr 09 '26 05:04

Fabian



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!