Как я могу заставить этот слайдер работать?

Question

Как это сделать? Когда я нажимаю кнопку, div отпускает, однако сама кнопка не перемещается. Также как я могу получить изображение и текст для формирования двух столбцов? При использовании моей IDE он отображается как два столбца, но на моем сайте это не так.

Спасибо!

$(document).ready(function() { 
 
    $('.rec-anime-button').click(function() { 
 
    if (parseInt($('.rec-anime-list-container').css('right')) < 0) { 
 
     $('.rec-anime-list-container').css('right', '5px'); 
 
     $('.rec-anime-button').css('right', '500'); 
 
    } else { 
 
     $('.rec-anime-list-container').css('right', '-490px'); 
 
     $('.rec-anime-button').css('right', '0'); 
 
    } 
 
    }); 
 
});

.rec-anime-button { 
 
    position: fixed; 
 
    margin-top: 100px; 
 
    right: 0; 
 
    z-index: 1000000; 
 
} 
 
.rec-anime-list-container { 
 
    position: fixed; 
 
    margin-top: 100px; 
 
    right: -490px; 
 
    text-decoration: none; 
 
    transition: right 300ms ease-in-out; 
 
    z-index: 1000000; 
 
} 
 
.rec-anime-list { 
 
    max-width: 480px; 
 
    text-decoration: none; 
 
} 
 
.container li { 
 
    float: left; 
 
    width: 230px; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    text-decoration: none; 
 
} 
 
.column { 
 
    display: inline-block; 
 
    vertical-align: middle 
 
} 
 
.rec-anime-title { 
 
    margin-top: 0; 
 
    color: gray; 
 
    width: 100px; 
 
} 
 
.sub { 
 
    color: blue; 
 
    font-size: 16px; 
 
} 
 
.dub { 
 
    color: red; 
 
    font-size: 16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Recommended Anime Slider --> 
 
<div class="rec-anime-button"> 
 
    <img src="/Rec-Anime-button.png"> 
 
</div> 
 
<div class="rec-anime-list-container"> 
 
    <ul class="rec-anime-list container"> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120xTITLE80/000/fff" /> 
 
     </div> 
 
     </a> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

попробуйте ниже: Я добавил таблицу для каждого Ли и небольшой модификации пФ с указанием точек при установке стиля кнопки в JS.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="rec-anime-button"> 
 
    <img src="http://static1.squarespace.com/static/51c4ae45e4b0e3594ecb840f/t/522e3eb4e4b0c5d6fd5ef60a/1378762451958/ARKHAM_Animation+Curve+Icon.png" style="width:80px;height:80px;"> 
 
</div> 
 
<div class="rec-anime-list-container"> 
 
    <ul class="rec-anime-list container"> 
 
    <li><table><tr><td> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a></td><td> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong> 
 
     </div> 
 
     </td></tr></table> 
 
    </li> 
 
    <li><table><tr><td> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120xTITLE80/000/fff" /> 
 
     </div> 
 
     </a></td><td> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong> 
 
     </div></td></tr></table> 
 
    </li> 
 
    <li><table><tr><td> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a></td><td> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong> 
 
     </div></td></tr></table> 
 
    </li> 
 
    <li><table><tr><td> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a></td><td> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong> 
 
     </div></td></tr></table> 
 
    </li> 
 
    <li><table><tr><td> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a></td><td> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong> 
 
     </div></td></tr></table> 
 
    </li> 
 
    <li><table><tr><td> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a></td><td> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong> 
 
     </div></td></tr></table> 
 
    </li> 
 
    <li><table><tr><td> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a></td><td> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong> 
 
     </div></td></tr></table> 
 
    </li> 
 
    <li><table><tr><td> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a></td><td> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong> 
 
     </div></td></tr></table> 
 
    </li> 
 
    <li><table><tr><td> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a></td><td> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong> 
 
     </div></td></tr></table> 
 
    </li> 
 
    <li><table><tr><td> 
 
     <a href="#"> 
 
     <div class="column"> 
 
      <img src="http://dummyimage.com/120x80/000/fff" /> 
 
     </div> 
 
     </a></td><td> 
 
     <div class="column rightcol"> 
 
     <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong> 
 
     </div> 
 
    </li></td></tr></table> 
 
    </ul> 
 
</div> 
 

 
<script> 
 

 
$(document).ready(function() { 
 
\t $('.rec-anime-button').click(function() { 
 
\t  if (parseInt($('.rec-anime-list-container').css('right')) < 0) { 
 
\t  $('.rec-anime-list-container').css('right', '5px'); 
 
\t  $('.rec-anime-button').css('right', '500px');//use px 
 
\t  } else { 
 
\t  $('.rec-anime-list-container').css('right', '-490px'); 
 
\t  $('.rec-anime-button').css('right', '0px');//use px 
 
\t  } 
 
\t }); 
 
\t }); 
 
</script> 
 
<style> 
 
.rec-anime-button { 
 
    position: fixed; 
 
    margin-top: 100px; 
 
    right: 0; 
 
    z-index: 1000000; 
 
} 
 
.rec-anime-list-container { 
 
    position: fixed; 
 
    margin-top: 100px; 
 
    right: -490px; 
 
    text-decoration: none; 
 
    transition: right 300ms ease-in-out; 
 
    z-index: 1000000; 
 
} 
 
.rec-anime-list { 
 
    max-width: 480px; 
 
    text-decoration: none; 
 
} 
 
.container li { 
 
    float: left; 
 
    width: 230px; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    text-decoration: none; 
 
} 
 
.column { 
 
    display: inline-block; 
 
    vertical-align: middle 
 
} 
 
.rec-anime-title { 
 
    margin-top: 0; 
 
    color: gray; 
 
    width: 100px; 
 
} 
 
.sub { 
 
    color: blue; 
 
    font-size: 16px; 
 
} 
 
.dub { 
 
    color: red; 
 
    font-size: 16px; 
 
} 
 
ul{ 
 
    list-style-type: none; 
 
} 
 
</style>