0
youtubeのようにスライダーdivエフェクトを作成するためにスクロールバーを使わずに右ボタンをクリックするたびに最近のコンテナまたはthmbnl最近のdivを左のabitにスライドさせるにはどうしたらいいですか？「右」ボタンがjqueryをクリックしたときに、このdivを左にスライドさせるにはどのようにアニメーションできますか？
$('button').onclick(function(){
$('#thmbnl-recent').animate({left: "-=500"}, 2000);
});/*----------Recent Projects----------*/
#recent-container {
\t width: 950px;
\t height: 275px;
\t background-color: ;
\t border: solid;
\t border-width: 1px;
\t border-color: #d8d8d8;
\t margin-bottom: 25px;
\t position: absolute;
\t overflow-x: scroll;
\t overflow-y: hidden;
\t white-space: nowrap;
}
.thmbnl-recent {
\t padding: 20px 13px 0px 13px;
\t width: 190px;
\t display: inline-block;
\t border: solid;
\t border-width: 1px;
\t border-color: #d8d8d8;
\t background-color: white;
\t transition: background-color 0.3s ease;
\t cursor: pointer;
}
.thmbnl-recent h1 {
\t text-align: center;
\t font-family: "calibri light";
\t font-size: 24px;
\t margin: 0 auto;
\t padding: 10px 0px;
\t letter-spacing: 2px;
}
#recent-title {
\t font-family: "calibri light";
\t text-align: center;
\t width: 950px;
\t background-color: white;
\t margin: 0 auto;
\t padding: 10px 0px;
\t position: relative;
\t z-index: 2;
\t border-top: solid;
\t border-right: solid;
\t border-left: solid;
\t box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
\t border-width: 1px;
\t border-color: #d8d8d8;
}
.thmbnl-recent:hover {
\t background-color: #e8e8e8;
\t transition: background-color 0.3s ease;
}
.thmbnl-recent:active {
\t background-color: #d1d1d1;
}
/*--------SLIDE IMAGE---------*/
#gallery-container {
\t margin: 75px 0px 45px 0px;
\t text-align: center;
\t border: solid;
\t border-color: #d8d8d8;
\t border-width: 1.5px;
}
#slide-section {
\t text-align: center;
\t background-color: white;
\t padding: 20px 20px 0px 20px;
}
#gallery-container h1{
\t padding: 15px 0 15px 0;
\t margin: 0;
\t font-family: "calibri light";
\t font-size: 30px;
\t border-bottom: solid;
\t background-color: white;
\t border-color: #d8d8d8;
\t border-width: 1.5px;
\t box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.3);
\t z-index: 3;
\t position: relative;
}
#imgrow {
\t margin-top: 20px;
\t padding-bottom: 20px;
\t display: flex;
\t justify-content: space-between;
}
button{
\t margin-top: 280px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="recent-title">Recent Projects</h2>
<div id="recent">
\t <div id="recent-container">
\t \t <div class="thmbnl-recent">
\t \t \t <img src="http://placehold.it/190x190">
\t \t \t <h1>Sample</h1>
\t \t </div>
\t \t <div class="thmbnl-recent">
\t \t \t <img src="http://placehold.it/190x190">
\t \t \t <h1>Sample</h1>
\t \t </div>
\t \t <div class="thmbnl-recent">
\t \t \t <img src="http://placehold.it/190x190">
\t \t \t <h1>Sample</h1>
\t \t </div>
\t \t <div class="thmbnl-recent">
\t \t \t <img src="http://placehold.it/190x190">
\t \t \t <h1>Sample</h1>
\t \t </div>
\t \t <div class="thmbnl-recent">
\t \t \t <img src="http://placehold.it/190x190">
\t \t \t <h1>Sample</h1>
\t \t </div>
\t \t <div class="thmbnl-recent">
\t \t \t <img src="http://placehold.it/190x190">
\t \t \t <h1>Sample</h1>
\t \t </div>
\t \t <div class="thmbnl-recent">
\t \t \t <img src="http://placehold.it/190x190">
\t \t \t <h1>Sample</h1>
\t \t </div>
\t </div>
\t <button>right</button>
</div>
あなたのコンソールを開き、それは言う： 'エラー：$（ 'ボタン'）。onclickは関数ではありません。あなたは '$（ 'button'）を使いたいと思っています。 2番目のエラー： '＃thmbnl-recent'は存在しません。 –
クラスには '.thmbnl-recent'を、IDには'＃thmbnl-recent'を選択する必要があります。 – Scelesto