0

このテーマの「最新プロジェクト」スライダーに似たコンテンツ スライダーを探しています(メイン スライダーの下の 2 つのセクション)。CMS システムなしで実装したいと思います。大量のキーワードを検索しましたが、役立つものは何も見つかりませんでした。キーワードなどを教えていただけるとありがたいです。

コンテンツ スライダーは、開始位置に 4 つの項目を表示する必要があります。これらのナビゲーション スライダーでは、無限の項目を許可する必要があります。

よろしくお願いします。

エルトラスト

4

1 に答える 1

0

Bootstrap にはスライダー (別名カルーセル) が組み込まれています。Bootstrap を使用する利点の 1 つは、Web サイトがresponsive(すべてのサイズの画面/デバイスを処理できる) ようになることです。

これはBootstrap スライダーのデモです。

または、自分でロールすることもできます。jsFiddle の単純なスライダーのデモをいくつか示します。

$(function(){
	$('#slider li').hide().filter(':first').show();
	setInterval(slideshow, 3000);
});

function slideshow() {
	$('#slider li:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('#slider');
}
#slider	{ 
    position:relative;
    margin:0;
    padding:0;
    list-style-type:none;
    width:650px;
    height:430px;
    border: 1px solid #008000;     
    overflow:hidden; 
}
#slider li { 
    position:absolute;        
}
#slider img {
    width:650px;
    height:430px;    
}
#slider p { 
    position:absolute;
    bottom:0;
    padding:20px;
    color:#ffffff;
    background-color: #008000;
    opacity: 0.6;
    margin:0;
    left:0;
    right:0; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="slider">
	<li>
		<a href="https://flic.kr/p/pq1UFA">
			<img src="https://c4.staticflickr.com/4/3867/15367978792_acd632254d_h.jpg" alt="Alter Apfelbaum"/>
		</a>
		<p>Alter Apfelbaum</p>
	</li>
	<li>
    	<a href="https://flic.kr/p/ppXtn4">
        	<img src="https://c3.staticflickr.com/3/2942/15367308281_cf8a164414_h.jpg" alt="Ruth St Flowers-191"/>
    	</a>
    	<p>Ruth St Flowers-191</p>
	</li>
	<li>
    	<a href="https://flic.kr/p/pq5a4k">
        	<img src="https://c4.staticflickr.com/4/3862/15368612485_251ef5de2f_h.jpg" alt="Canada Close In."/>
    	</a>
    	<p>Canada Close In.</p>
	</li>
</ul>

jsFiddle - フェード、繰り返し (上記のコード スニペットと同じ)

jsFiddle - スライド、クリック時

Bootstrap チュートリアル (すべてはグリッドに関するものです - グリッドをマスターすれば、Bootstrap をマスターしたことになります)

スライダーについて重要なことは、スライダーが何であるかを理解することです:それは、他のいくつかの DIV を含む単なる DIV コンテナーです (これらの内部 DIV のそれぞれは、写真<h1>(または何でも)、<p>テキスト付きのタグなどを含み、すべてが並んでいます)。長い列に並んでいます）。

ダンボールの移動用ボックスが床に置かれ、左右に穴が開けられ、前面に覗き窓が開けられていると想像してください。一連の靴箱が左から右にスライドされ、それぞれがビュー ポートで一時停止します。各靴箱が移動箱から滑り落ちると、列車の最後まで圧縮され、このプロセスは無限に続きます。

鍵となる秘密は、ダンボールの移動用ボックスposition:relative;overflow:hidden;と各靴箱がスタイルfloat:left付けされていることです (これにより、DIV のデフォルトは互いに積み重ねられるため、横に並べて配置されます)。

各シューズボックスは独自のジオラマです。各靴箱はコンテナであり、それぞれの中に画像、h1、いくつかのサイドバイサイド div、フッターがあります。これらすべてが各靴箱 (別名「コンテナ」、別名 div) 内にあります。各靴箱は div です。DIV には他の div を含めることができ、通常はそうすべきです。<section>、、、<nav>はすべて DIV です<aside>。<footer>名前が違うのはなぜ？SEO用。

上記の例は、あなたのためにトリックを行うはずです。各靴箱の中身/形状を変更するだけです。

これは、コンテナ div (別名「靴箱」)のスタイリングに関する多くのことを説明する素晴らしい記事です。

于 2016-04-04T17:49:04.993 に答える