将滑动事件添加到我的WP jQuery //幻灯片放映中

Add Swipe Event to my WP jQuery // Slide Show?

本文关键字：jQuery 幻灯片 WP 我的 事件 添加      更新时间：2023-09-26

我想知道如何将jQuery/Mobile Swipe事件添加到我的Wordpress幻灯片中：

我希望能够在移动设备上使用它"滑动"我的幻灯片。

幻灯片代码//使用 WP 的 PHP 标记： 

<!-- Top of Page Slider FRAGILE -->
<div id="photo-rotatorWrapper">
<div id="photosubwrap" style="min-height: 280px; max-height: 280px;">
<div id="photo-rotator" style="">
<?php $slide_id=1; ?>
<?php
 $featuredPosts = new WP_Query();
 $featuredPosts->query("showposts=3");
 while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
 ?>
    <div id="slide-<?php echo $slide_id; $slide_id++;?>">
     <a href="<?php the_permalink() ?>" class="post-image">
         <?php the_post_thumbnail( 'rotator-post-image' ); ?>
         <span class="title" style="font-style:italic; color:#999;"><?php the_title(); ?></span>
     </a>
     </div>
    <?php endwhile; ?><!--/close loop-->
    <ul id="slide-nav">
        <?php $nav_id=1; ?>
        <?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
            <li>
                <a href="#slide-<?php echo $nav_id; ?>">
                    <span class="thumbnail" style="display:none;">
                    </span>
                    <p style="color:#F93; font-family:Georgia, 'Times New Roman', Times, serif; font-size: 18px;"><? the_title(); $nav_id++;?></p>
                    <div style="">
                    <!--<?php the_excerpt(); ?>-->
                    <?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?>
                         <div class="">
                         <p style="font-weight: normal; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><?php echo $text; ?></p> 
                         </div>
                        <?php } //else { print"<div>"; } ?>  
                    </div>   
                </a>
            </li>
        <?php endwhile; ?><!--/close loop-->
        </ul>
        </div>
</div>
</div>
<!-- End Top page Slider FRAGILE -->

允许幻灯片放映的脚本：

<script type="text/javascript">
jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});
</script>

更新：我刚刚尝试过：

<script>
$("#slide-1").swiperight(function() {
    $.mobile.changePage("#slide-2");
});
</script>

没有这样的运气~

任何建议 - ？

为了扩展我的评论，以下是如何使用jQuery UI的选项卡小部件以编程方式更改选项卡的方法：

//cache all the tabs (I called them slides...)
//get the number of tabs
var $slides    = $('div[id^="slide"]')
    slideCount = $slides.length;
//bind the event handlers necessary
$slides.bind('swipeleft', function () {
    //this is to go to the next index
    //get current slide index and figure out the next one
    var currentIndex = $(this).index();
    if ((currentIndex + 1) < slideCount) {
        currentIndex++;
    } else {
        //the end was reached, so go back to the first tab
        currentIndex = 0;
    }
    //now select the new tab
    $("#photo-rotator").tabs( "select" , currentIndex);
}).bind('swiperight', function () {
    //this is to go to the previous index
    //get current slide index and figure out the previous one
    var currentIndex = $(this).index();
    if ((currentIndex - 1) >= 0) {
        currentIndex--;
    } else {
        //the beginning was reached, so go to the last tab
        currentIndex = slideCount;
    }
    //now select the new tab
    $("#photo-rotator").tabs( "select" , currentIndex);
});
相关文章：