为每个项目实现自动循环并一次只显示一个图像？

Question

部署了示例应用http://fruit-items.herokuapp.com/

代码https://github.com/tenzan/catalog

我希望实现图片中的内容：

1. 在左侧列出所有项目（已完成）
2. 在每个项目上循环悬停（矩形形状），并显示具有悬停矩形的项目的图像。它应该无限循环通过项目的矩形，并在每个项目上保持2秒。用户不会进行任何点击。它应该自动循环并显示相应的图像。 （尚未实施）

index.html.erb ：

# added by Anaconda3 2.4.0 installer
export PATH="/Users/georgiospapadopoulos/anaconda/bin:$PATH"

# added by Anaconda3 4.2.0 installer
export PATH="/Users/georgiospapadopoulos/anaconda/bin:$PATH"
export CUDA_HOME=/usr/local/cuda
export DYLD_LIBRARY_PATH="$DYLD_LIBRARY_PATH:$CUDA_HOME/lib"
export PATH="$CUDA_HOME/bin:$PATH"

# Setting PATH for Python 2.7
# The original version is saved in .bash_profile.pysave
#PATH="/Library/Frameworks/Python.framework/Versions/2.7/bin:${PATH}"
PATH="/usr/local/bin/python:$PATH"
export PATH

请告诉我提示在何处以及如何实施。

我想这可以用jquery来完成。同样有趣的是知道这个东西是否更容易用vue.js或其他UI框架实现。