Xenforo Image Slider yapımı

Forumlarınızda html / css kodlarıyla kolayca bir image slider oluşturabilirsiniz.
Oluşturduğunuz bu slider (kayan görseller) hem forumunuza ayrı bir görüntü, hem de istediğiniz gibi kullanabileceğiniz link verilmiş görseller kazandırır.
Bu kayan görselleri isterseniz premium konularınız için bir kısayol, isterseniz de reklam alanı olarak kullanabilirsiniz.

Şimdi nasıl yapılacağına dair anlatıma geçelim:
Aşağıdaki örnekte 15 görselden oluşan bir yapı hazırladık. Bu sayıyı kendi ihtiyacınıza göre artırıp eksiltebilirsiniz.

Önce admin panelinizde bir html widget oluşturup aşağıdaki kodları ekleyin:
href alanındaki tırnak içine, görsele tıklandığında gidilecek linki,
src alanındaaki tırnak içine, görsel linkinizi girin.

<div class="logos">
<div class="logo_items_right">
<a href="https://....."><img alt="1" src="data/assets/....."></a>
<a href="https://....."><img alt="2" src="data/assets/....."></a>
<a href="https://....."><img alt="3" src="data/assets/....."></a>
<a href="https://....."><img alt="4" src="data/assets/....."></a>
<a href="https://....."><img alt="5" src="data/assets/....."></a>
<a href="https://....."><img alt="6" src="data/assets/....."></a>
<a href="https://....."><img alt="7" src="data/assets/....."></a>
<a href="https://....."><img alt="8" src="data/assets/....."></a>
<a href="https://....."><img alt="9" src="data/assets/....."></a>
<a href="https://....."><img alt="10" src="data/assets/....."></a>
<a href="https://....."><img alt="11" src="data/assets/....."></a>
<a href="https://....."><img alt="12" src="data/assets/....."></a>
<a href="https://....."><img alt="13" src="data/assets/....."></a>
<a href="https://....."><img alt="14" src="data/assets/....."></a>
<a href="https://....."><img alt="15" src="data/assets/....."></a>
</div>
</div>

Bundan sonra da aşağıdaki kodları temanızın extra.less şablonuna ekleyip kaydedin.

@keyframes slides-right {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
.logos {
overflow: hidden;
padding: 1px 0px;
white-space: nowrap;
position: relative;
}
.logo_items_right {
display: inline-block;
animation: 20s slides-right infinite linear;
}
.logos:hover .logo_items_right {
animation-play-state: paused;
}
.logo_items_right img {
height: 100px;
margin: 5px;
}


Herhangi bir sorun yaşadığınızda konu altına yorum yapmaktan çekinmeyin.