コンテンツをオーバーレイできる画像スライド スライダーを作成する方法を知っている人はいますか?おそらく単純に聞こえるかもしれませんが 、スライド画像を変更する機能を含むSrpout テーマ テーマ フォレストの後にあるのはこれですか? 私はcycle.jsを試しましたが、中心に置くことができません:
jQuery(function() {
jQuery("#slideshow").cycle({
fx: 'fade',
pause: 1,
speed: 1800,
timeout: 3500
});
});
HTML:
<body>
<div id="header-wrap">
<div id="header">
<div id="backrgound-slider"><?php get_template_part( 'background', 'slider' ); ?></div>
<div id="slideshow" class="bgSlider">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/k2-in-skies.jpg" class="bgimage" width="2000" height="1500" alt="Slide 1">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/k2.jpg" class="bgimage" width="2000" height="1500" alt="Slide 2">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/kunhar-river.jpg" class="bgimage" width="2000" height="1500" alt="Slide 3">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/mitre-peak-baltoro.jpg" class="bgimage" width="2000" height="1500" alt="Slide 4">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/musa-ka-musalla.jpg" class="bgimage" width="2000" height="1500" alt="Slide 5">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/nanga-parbat.jpg" class="bgimage" width="2000" height="1500" alt="Slide 6">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/naran-valley.jpg" class="bgimage" width="2000" height="1500" alt="Slide 7">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/shugran.jpg" class="bgimage" width="2000" height="1500" alt="Slide 8">
</div>
<div id="title">
<h1 id="logo">logo</h1>
<h2 id="tagline"></h2>
</div>
<!--and so on -->
CSS:
#slideshow, img.bgimage {
width: 2000px;
height: 640px;
position: relative;
top: 0;
z-index:-9999;
left: -500px;
}
ありがとう