かなり基本的な質問ですが、コンテンツの4つの異なる段落を連続してフェードイン/アウトするボタンのないjQueryコンテンツスライダーを探しています。
私は Google で検索を行いましたが、私が望むことを行うスライダーが見つからないようです - ここの誰かが推奨してくれることを望んでいました.
前もって感謝します。
さまざまなトランジション効果を選択するために添付したリンクからオプションを見ることができます........
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>Skitter - Slideshow for anytime!</title>
<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<script src="js/jquery-1.6.3.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.skitter.min.js"></script>
<script>
$(document).ready(function() {
var options = {
numbers: false,// the thing required no anchoring or navigation
navigation:false,
animation: "random",
velocity:0.2, //velocity of animation
interval:4000// time gap between the transitions
};
$('.box_skitter_large').skitter(options);
});
</script>
</head>
<body>
<div id="page">
<div id="content">
<div class="border_box" style="width:200px" >
<div class="box_skitter box_skitter_large" style="margin-left:152px;margin-top:34px">
<ul>
<li><a href="#cube"><img src="images/1.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li>
<li><a href="#cubeRandom"><img src="images/2.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li>
<li><a href="#block"><img src="images/3.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li>
<li><a href="#cubeStop"><img src="images/4.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li>
<li><a href="#cubeHide"><img src="images/5.jpg" class="cubeHide" /></a><div class="label_text"><p>cubeHide</p></div></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
js および css ファイルをダウンロードし、さまざまなトランジション効果を確認するには、http: //thiagosf.net/projects/jquery/skitter/にアクセスしてください。
画像・動画のみを使いたい場合は、NivoSliderが探していると思います。
http://nivo.dev7studios.com/support/jquery-plugin-usage/で入手できます。 ページを下にスクロールすると、コントロールを表示するための true/false オプションが表示されます。
HTML コンテンツを使用したい場合、最後に聞いたのは、nivoslider ではそれができないということです。
したがって、スライド内で html コンテンツを使用したい場合は、ここで入手できる rhinoslider を試してください: http://rhinoslider.com/how-to-use/ リンクされたページで、ニーズに合わせてデモを使用できます。
ただし、もう少し情報があればいいでしょう。それはレスポンシブである必要がありますか?表示したいコンテンツは何ですか?
この投稿がお役に立てば幸いです。
ごきげんよう、ドミニク
これを試しましたか?? http://manos.malihu.gr/jquery-custom-content-scroller
これはあなたが探しているものかもしれません。独自のスクロール バーをカスタマイズするか、提供される複数のオプションのいずれかを使用できます。
私はそれを試してみましたが、それは本当に完璧に機能します