Wordpress Slider插件,像传送带一样连续旋转

时间:2017-03-06 15:44:45

标签: wordpress slider carousel

我一直在寻找谷歌并测试各种WP插件,但我找不到具体做我需要它的那些。

我正在寻找一种能够像传送带一样旋转帖子,页面和/或图像的滑块。到目前为止,我能找到的最接近的是一个后置一个后出系统。

我愿意尝试自己创建一个滑块,但我的JS知识很差。我觉得好像我可能需要调整一个非常小的设置来实现这一点,但我已经碰到了一堵砖墙。

非常感谢任何帮助。

<div class="slideshow">

            <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
            <div class="slide first" style="background-image: url('<?php echo $thumb['0'];?>')">
                <?php the_title(); ?>
            </div>

            <?php $slideshowPosts = new WP_Query('showposts=10&orderby=rand&posts_per_page=5');
                if ($slideshowPosts -> have_posts()):
                    while ($slideshowPosts -> have_posts()) : $slideshowPosts -> the_post(); ?>
                    <!-- instruction -->

                        <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
                        <div class="slide rest" style="background-image: url('<?php echo $thumb['0'];?>')">
                        <?php the_title(); ?>
                        </div>

                    <!-- end instruction -->
                    <?php endwhile;
                else :
                    echo '<p>No content found</p>';
                endif; 
            wp_reset_postdata(); ?>
        </div>

.slideshow {
    height:240px;
    overflow:hidden;
    height:240px;
    width:3200px;
}
div.slide {
    height:240px;
    width:400px;
    float:left;
}
.rest {
    -webkit-animation: bannermove 30s linear infinite;
    animation-delay: 5s;
    -webkit-transition: all 0.5s ease;
}
.first {
    -webkit-animation: bannermove 30s linear infinite;
}

@-webkit-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

3 个答案:

答案 0 :(得分:1)

我总是在我的网站上使用Revolution Slider。 它没有限制,我相信你会在其中找到你想要的东西。

https://revolution.themepunch.com/

答案 1 :(得分:1)

所以我猜你已经尝试了https://en-au.wordpress.org/plugins/image-slider-widget/screenshots/

我认为使用tweats可以自动旋转。

但如果你看js,你可能会发现下面有趣的

http://www.jqueryscript.net/slideshow/jQuery-Auto-Rotating-Image-Slider-with-CSS3-Wipe-Effect.html

答案 2 :(得分:0)

您可以使用“旋转”滑块。这是一个很棒的WordPress Slider插件。您几乎可以创建任何想要的东西。

Click Here to View the Plugin