繁体   English   中英

使点与jQuery Owl Carousel中的函数一起使用

Make dots work with function in jQuery Owl Carousel

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

jQuery Owl Carousel有一些问题。

我正在努力使功能发挥作用。 我试图在其他答案中找到解决方案,并尝试了不同的方法。 尝试使用触发器和Slideby,但无法解决。

如何使点与我的功能一起使用?

请帮助学生:)

  $('.owl-carousel').owlCarousel({ loop:true, margin:10, dots: true, items: 3, slideBy: 3, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1000:{ items:1 } } }); 
 .item { background: #04fbc7; height: 700px; margin-left: 40px; margin-right: 40px; margin-bottom: 189px; } .owl-dots { text-align: center; } .owl-dot { cursor: pointer; height: 12px; width: 12px; margin: 0 2px; background-color: #ffffff; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; margin-top: 132px; } .active, .owl-dot:hover { background-color: #99f2df; } 
 function carousel_wiever () { ?> <div class="wrapper owl-carousel owl-theme"> <?php $args = array( 'post_type' => 'citat', 'posts_per_page' => -1, 'orderby' => 'date', 'order' => 'DESC' ); query_posts( $args ); // The Loop while ( have_posts() ) : the_post(); ?> <div class="item"> <div class="custom_class"> <div class="text1"> <span class="quote"><?php meta('citatet'); ?></span> </div> <div class="text2"> <span class="author"><?php meta('citerat_av'); ?></span> </div> </div> <!-- custom_class --> <div class="owl-dots"> <div class="owl-dot active"><span></span></div> <div class="owl-dot"><span></span></div> <div class="owl-dot"><span></span></div> </div> </div> <!-- item --> </div> <!-- wrapper --> <?php endwhile; // Reset Query wp_reset_query(); ?> 

1 个回复

首先,您已经放置

<div class="owl-dots">
        <div class="owl-dot active"><span></span></div>
        <div class="owl-dot"><span></span></div>
        <div class="owl-dot"><span></span></div>
</div>  

在您的<div class="item">以及while循环内,并且封闭包装div也位于您的循环中。 因此dom结构将无法正确输出。

function carousel_wiever () {
?>

<div class="wrapper owl-carousel owl-theme">

<?php       
        $args = array(
            'post_type' => 'citat',
            'posts_per_page' => -1,
            'orderby' => 'date',
            'order' => 'DESC'
        );
        query_posts( $args );
        // The Loop
        while ( have_posts() ) : the_post(); ?>

        <div class="item">
            <div class="custom_class">

                <div class="text1">
                            <span class="quote"><?php meta('citatet'); ?></span>
                        </div>
                <div class="text2">
                            <span class="author"><?php meta('citerat_av'); ?></span>
                        </div>
                </div> <!-- custom_class -->

            </div> <!-- item  -->     

        <?php endwhile;
        // Reset Query
        wp_reset_query();   
        ?>
        <div class="owl-dots">
            <div class="owl-dot active"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
        </div>  
</div> <!-- wrapper -->
<?php
}
?>

其次,我将重新考虑使用query_posts,因为它效率很低。 在此处阅读有关此内容的更多信息: https : //wordpress.stackexchange.com/questions/1753/when-should-you-use-wp-query-vs-query-posts-vs-get-posts

6 Owl-Carousel不使用Rails

Owl Carousel无法使用我的rails安装。 它没有出现在我的测试页面上,Chrome错误显示在Chrome开发者控制台中: 未捕获的TypeError:undefined不是函数 我按照https://github.com/acrogenesis/owlcarou ...

7 Javascript不使用Owl-Carousel

我一直试图为我的网站实现一个旋转木马5个小时。 我想显示多个图像,但每次增加1个图像的轮播。 我尝试在youtube https://www.youtube.com/watch?v=nVNv1jUitCk上关注本教程,直到4:45。 一切都很好,除了前一个和下一个按钮没有显示。 我确信J ...

8 Ajax 不使用 owl-carousel

我在我的页面中实现 ajax 时遇到了问题,其中 owl-carousel 她是代码: 控制器: 风景 : 我尝试调试,我发现在 $.ajax 中传递了 json 的值(一个 int 13)但是当我使用 alert 我得到 null 时,我在文档中搜索得到了这个http://www.jq2 ...

9 nuxtjs中的owl-carousel实现问题

我在使用 nuxtjs 实现 v-owl-carousel 时遇到问题。 当我尝试: 出现错误信息 文档未定义 我按照此页面https://github.com/93gaurav93/v-owl-carousel上的要求遵循了配置建议,但没有任何效果...... 有人可以帮助我吗? 有 ...

2019-04-14 13:00:21 2 2552   nuxt.js
10 更改 owl-carousel 中图像的宽度

我正在尝试更改 owl-carousel 中图像的宽度。 如果我右键单击图像以检查元素,则会采用以下内联样式: &lt;div class="owl-item" style="width: 960px; margin-right: 0px;"&gt; 我能在文档中找到的关于宽度的唯一信息是关 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM