0
方向矢印/ボタンを使用してスライドする以外に、ボタンを使用して呼び出す機能を備えたプレミードスライダがいくつか見られました。現在、スライダーを終了しようとしています。これまで私はそれを左右にスライドさせることができました。今、私はスライドを手動で操作するコントロールを作成するつもりです。スライド4ボタンをクリックすると、スライドボタンが表示されます。スライドをボタンにバインドして呼び出す方法
今私のジレンマは、if/elseを使ってスライダを作成して以来、自分の現在のビルドにコントロールを追加できるかどうかわかりません。私はそれを再作成し、javascript配列を使用して構築する必要があると思っていました。私はそれを構築する方法に関するチュートリアルを見つけることができないようです。ここで
私の現在のビルド
$(document).ready(function() {
function timelineSlider() {
\t \t var position = 0,
\t \t sliderContainer = $('.slider-container').width(),
\t \t slider = $('.slider-container .slider'),
\t \t sliderItems = $('.slider li'),
\t \t totalSlides = $('.slider li').length;
\t \t slider.width(sliderContainer*totalSlides);
\t \t sliderItems.outerWidth(sliderContainer);
\t //next slide
\t $('.next').click(function(){
\t slideRight();
\t });
\t //previous slide
\t $('.prev').click(function(){
\t slideLeft();
\t });
\t function slideLeft(){
\t position --;
\t if (position == -1) { position = totalSlides-1; }
\t slider.css('left', - (sliderContainer*position));
\t console.log(position);
\t }
\t function slideRight(){
\t position ++;
\t if(position == totalSlides) { position = 0; }
\t slider.css('left', - (sliderContainer*position));
\t }
}
timelineSlider();
$(window).resize(function() {
timelineSlider();
})
});/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
.wrapper {
max-width: 1440px;
margin: 0 auto; }
.slider-container {
width: 1160px;
max-width: 1160px;
margin: 0 auto;
overflow: hidden; }
@media only screen and (max-width: 768px) {
.slider-container {
width: 100%;
max-width: 100%; } }
@media only screen and (max-width: 480px) {
.slider-container {
width: 100%;
max-width: 100%; } }
.slider-container .slider {
position: relative;
overflow: hidden;
left: 0;
list-style: none;
-webkit-transition: all 0.3s linear; }
.slider-container .slider li {
float: left;
width: 200px;
padding: 40px; }
/*# sourceMappingURL=style.css.map */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
\t <div class="slider-container">
\t <ul class="slider">
\t <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
\t <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
\t <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
\t <li>
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\t </li>
\t <li>
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\t </li>
\t <li>
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\t </li>
\t </ul>
\t <div class="prev">
\t prev
\t </div>
\t
\t <div class="next">
\t next
\t </div>
\t </div>
</div>
各siにldeと関数を作成して番号でナビゲートする –
ありがとう、私はコントロールを構築するために '.index'だけすればいいと思っていました。まだそれを構築する方法が不思議です – clestcruz