CarouFredSel を使用して垂直スクローラー ( http://new.joshrodg.com/?page_id=206 )を表示する Web サイトに取り組んでいます。問題は、前のボタンをクリックすると、CarouFredSel が正常にスクロールすることです。 ..しかし、次のボタンをクリックしてスライドショーを進めようとすると、スクロールが台無しになります....奇妙なことに、WordPress MapPress プラグインを使用して Google マップを投稿した場合にのみ発生します。
MapPress プラグインが問題の原因であると確信していますが、いくつかのコードで修正できると思います (特に、これは Safari のみの問題であるように思われるため... Safari、Firefox、Chrome、およびIE8)
今、(ある程度)うまくいったことの1つはposition: relative
、私の.sidebar-image a
cssスタイルに追加することでした。それに関する唯一の問題は、正しく進みますが、スクロール効果がないことです(目的を無効にします)
誰もこれを経験したことがありますか?
私script
のように見えます:
$(window).load(function() {
/* Sidebar */
$("#sidebar-image").carouFredSel({
direction: "up",
auto: false,
items: {
visible: 2
},
next: "#down",
prev: "#up",
scroll: {
easing: "quadratic",
items: 1
},
width: "100%"
});
});
私code
のように見えます:
<div class="sidebar-image">
<div id="sidebar-image">
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) { ?>
<?php
$id = get_post_thumbnail_id();
$url = wp_get_attachment_image_src($id, "large", true);
?>
<a href="<?php echo $url[0]; ?>" rel="lightbox[<?php echo get_the_ID(); ?>]"><?php the_post_thumbnail("sidebar-image"); ?></a>
<?php } ?>
<?php endwhile; ?>
</div>
<div class="clear">
<!-- -->
</div>
</div>
そして私のようにCSS
見える:
/* Slides */
.sidebar-image {
border-bottom: 1px solid #dcdedf;
overflow: hidden;
width: 277px;
}
.sidebar-image a {
border-left: 1px solid #dcdedf;
border-right: 1px solid #dcdedf;
border-top: 1px solid #dcdedf;
display: block;
position: relative;
float: left;
}
このコードはすべて、相対位置を持つ別の div にあります。問題を引き起こす可能性のある場所を読みましたが、css を削除した後でも、カルーセルは同じことを行います...
含まれcode
ている div は次のようになります。
/* Slideshow */
#sidebar {
float: right;
position: relative;
width: 305px;
}
別のjQueryライブラリ(Googleから直接のものではなく、jQueryから直接のもの)を使用してみました。また、CarouFredSel パック バージョンを使用するのではなく、完全な CarouFredSel スクリプトを使用してみました。
何か案は?それは私を困惑させました:-(
ありがとう、
ジョシュ