تغيير فئة الصور التي تمت مشاركتها مؤخرًا إلى سلايد شو

<!-- BEGIN switch_forum_images -->

<!-- END switch_forum_images -->

<!-- BEGIN switch_forum_images -->
<div id="konan-solid" class="forum-images">
<div class="konan-images">أحدث الصور المضافة</div>
<div class="konan-solid">
<a href="/images" class="konan-konan">قائمة الصور</a>
 <button id="moveRight">❮</button>
  <button id="moveLeft">❯</button>
<div class="conan-conan">
<div class="fo-header">
<div class="category-title">

<script type="text/javascript">
 $(document).ready(function(){
    var scrollableContent = $('.conan-conan');
    var scrollAmount = 350;

    $('#moveLeft').click(function(){
        scrollableContent.animate({scrollLeft: '-=' + scrollAmount}, 400);
    });

    $('#moveRight').click(function(){
        scrollableContent.animate({scrollLeft: '+=' + scrollAmount}, 400);
    });
});

</script>

 <style>
div#imageList {width: 300px;}
 .konan-images {font-weight: bold;padding: 5px;text-align: center;color: white;background: #3594e1;}              
 .konan-solid {padding: 10px;border: dotted 1px #035393;background: white;}              
 .conan-conan {margin-top: 11px;height: 257px;overflow: scroll;}
a.konan-konan {font-weight: 900;font-size: 17px;border-radius: 10px;color: #fff !important;border: solid 1px #d5dcdf9c;padding: 5px;background: #249eff;float: left;text-decoration: none !important;}
.forum-hidden .container-imgs-list {max-height: 250px !important;padding: 0 !important;text-decoration: auto;}
.container-imgs-list img {height: 222px;width: 222px;}
.container-imgs-list {overflow: initial !important;display: flex;flex-wrap: nowrap;justify-content: right;padding: 0;flex-direction: row-reverse;}          
.container-imgs-list .image_item {width: 222px;height: 222px;transform: rotate(270deg);}
.container-imgs-list .image_column {display: flex;margin: 10px;flex-direction: row-reverse;}
button#moveLeft {border-radius:10px;width:50px;height:40px;font-size:22px;margin-right:10px;color:#f0ffff;background:#2196F3;cursor: pointer;}
button#moveRight {border-radius: 10px;width: 50px;height: 40px;font-size: 22px;margin-left: 10px;color: #f0ffff;background: #2196F3;cursor: pointer;}
.container-imgs-list .image_column {display: inline;transform: rotate(90deg);flex-direction: row-reverse;}
#imageList > div:nth-child(5) {left: 380px;top: -130px;position: relative;}
.container-imgs-list .image_item.overflown {opacity: 0;transform: scale(.4);}
.container-imgs-list {border: 0;}
</style>              
</div></div>
  
<div class="container-imgs-list" style="max-height: 200px; margin-top: 0px" id="imageList">
{switch_forum_images.SCRIPTS}
</div></div></div></div>
<!-- END switch_forum_images -->