#featured {height: 1px; width: 1px; overflow: hidden;} div.orbit { width: 1px; height: 1px; position: relative; overflow: hidden; } div.orbit img { position: absolute; top: 0; left: 0; } div.orbit a img {border: none;} div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right:10px; opacity: .6; cursor: pointer; z-index: 1001; } span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeber2jyArv7WkouKwBBjexMDX2xsLe4X99yB6SEAu5s-wRKr-AJwWLbQhZmHHTqdQ8WtskfIqV_tzJxmbGjIGeybTwBGqoTF4zbHQ_p6aIpMzzj7GPGSDJ7hyphenhyphenI4dTqs6hS4SP1LEZuzWF/s1600/timer-icon.png); background-repeat: no-repeat; z-index: 3; } span.mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; } span.rotator.move {left: 0;} span.mask.move { width: 40px; left: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF6A09d2TcHKXtQn1FW7lm04Ax78bsYs6ombj02zed1IYONBuJWMARTyDWLtpjdqXMpGGnUQH4P-vONUcRsrPzYEYZEAyhpkxgeZ1ZqW3NbPSfdL3TEdk6mK54q6mHqTJVofAfoTRG5bZb/s1600/timer-right.png); background-repeat: repeat; background-position: 0px 0px; } span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLx15KTp3D9joUeS17NCuRFvprJ7U3rTRne8B6MRJDOcBDlXQeUGIhEGdPirPWlhRBmcQgXSdVdDQGZD95bBkfvQLZAN7rSO0N23WcLS3l9dlYpSyk-IK4Gm0DiVEImBiwFS8zlSbBskdV/s1600/pause-icon.png); background-repeat: no-repeat; z-index: 4; opacity: 0; } div.timer:hover span.pause, span.pause.active, div.timer:hover span.pause.active { opacity: 1; } div.caption { background: #000; background: rgba(0,0,0,.6); width: 100%; z-index: 1000; position: absolute; bottom:-100px; color: #fff; padding: 8px 0; text-align: center; } div.caption span { padding: 0 10px; font-size: 14px; text-shadow: 0px 1px 0px rgba(0,0,0,.8); margin: 0; } .orbit-caption { display: none; } div.orbit:hover div.slider-nav { display: block; } div.slider-nav { display: none; } div.slider-nav span { width: 33px; height: 33px; text-indent: -9999px; position: absolute; z-index: 1000; top: 43%; cursor: pointer; } div.slider-nav span.right { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOZn9p-yMlbDnw9f3qhf9MT3eAU4sBbZcPm830ZkktlDudDlwImDi3fMdE1IDG-g_ygLQK3bzv7PNiX9b8Z1uXhNiPhC0G1rmroOLztae6XAfRbMjVlxUq0RzwI_6W9foLaCdkBYjidl8T/s1600/arrow-right.png); right: 10px; } div.slider-nav span.left { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRVvjswgK0cIhEDBCssPaPiP_shyphenhyphenhin3RwdWXZBF1BZUemk2JSIxdfjkL8TPnUkCY0bREEwCwp9XLDZA0jJUDKY14__cg-9VsEV1eMPZKgmBhwx5II_rWuxjgPfoJTY48oIzSJu6yrKR0/s1600/arrow-left.png); left: 10px; } .orbit-bullets { position: absolute; z-index: 1000; list-style: none; top: 10px; left: 7px; margin: 0; padding: 0; } .orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBtoNDJalygbmO9Og0HhBN06e9Jsr_1mxPo-a14B-CZ4fPdA-rnahw_kAycjAJQrfduaujC_BAZY_udRCWiqoAhDrROJ-1NsBsNCiEZiz7abG8veziJGqyXkNYD3KFE0CWp7S0iOoCaHBS/s1600/bullets.png); background-repeat: no-repeat; background-position: 0 0; width: 7px; height: 7px; overflow: hidden; } .orbit-bullets li.active { color: #222; background-position: -7px 0; } --> Note: You can change the transitions speed between each image by modifying the 5000 value from the line in blue - a higher number will make the pictures stay longer between each transition. Important! If you have already a version of jQuery in your template, please remove the line in red, otherwise the slideshow might not work. Step 3. Now it is time to add the CSS. Find (CTRL + F) this tag: