向jCarousel平滑滑块Wordpress插件添加自定义过渡效果

Question

The Smooth Slider wp Plugin uses the jquery.jcarousel.min.js for transition effects. Smooth Slider wp插件将jquery.jcarousel.min.js用于过渡效果。 The problem is that it contains a single type of transition (the default): swing. 问题在于它包含单一类型的过渡（默认）：swing。

Can someone please guide me into how I can change the transition type to something like fading? 有人可以指导我如何将过渡类型更改为诸如衰落之类的东西吗？ From what I've read, I have to use the .animate() function from jQuery, more specifically the easing attribute. 根据我的阅读，我必须使用jQuery的.animate（）函数，更具体地说是easing属性。

I understand that it must be done using the jQueryUI, maybe adding plugins to existing jQuery? 我知道必须使用jQueryUI来完成，也许要向现有jQuery添加插件？ The problem is I am a total noob with jQuery and would really appreciate some guidance. 问题是我对jQuery完全陌生，并且非常感谢一些指导。

Here is the slider which I would like to customize: http://brainconcert.com/minovici/ 这是我要自定义的滑块： http : //brainconcert.com/minovici/

Answer 1

I'm not entirely sure but I believe you can utilize the properties from jCarousel by using jquery.jcarousel.min.js . 我不确定，但我相信您可以通过使用jquery.jcarousel.min.js利用jCarousel的属性。

Those (and the details) can be found here . 这些（和详细信息）可以在这里找到。

What you can do to test this is find code similar to this in your <head> : 您可以做的测试是在<head>找到与此类似的代码：

    <!--START: Carousel-->
<script type="text/javascript">
jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel();
    jQuery('.multi-carousel').jcarousel({
        easing: 'easeOutBounce',
        animation: 750,
        scroll: 4,
        visible: 0,
        auto: 0,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
        });
</script>
<!--END: Carousel-->

Utilize the easing: property. 利用easing:属性。

If this doesn't work, don't remove the easing property just yet. 如果这不起作用，请不要立即删除easing属性。 Instead, place the easing query plugin found here on your server and call it in your <head> like so: 而是将在此处找到的缓动查询插件放在服务器上，并在<head>调用它，如下所示：

<script type="text/javascript" src="folder/jquery.easing.1.3.js"></script>

If you set your easing property, called to that plugin and included the latest jQuery library it should work. 如果您设置了easing属性，则对该插件进行了调用，并包含了最新的jQuery库，它应该可以工作。

Good luck! 祝好运！

Answer 2

If you add wrap: 'circular' to your jCarousel <head> tag, you'll be able to have it transition from 5 to 1... how to make this work with easing I'm not entirely sure. 如果在jCarousel <head>标记中添加wrap: 'circular' ，则可以将其从5转换为1 ...我不确定如何使这项工作轻松进行。

Check out the source of the jCarousel circular page . 查看jCarousel圆形页面的来源。

Also - a lot of different jCarousel examples (with code to pull in the source) here . 此外-很多不同的jCarousel例子（与代码源拉）这里。

Good luck 祝好运

向jCarousel平滑滑块Wordpress插件添加自定义过渡效果

问题描述

2 个解决方案

解决方案1
0 2012-01-21 10:34:01

解决方案2
0 2012-01-24 15:42:47

向jCarousel平滑滑块Wordpress插件添加自定义过渡效果

问题描述

2 个解决方案

解决方案1 0 2012-01-21 10:34:01

解决方案2 0 2012-01-24 15:42:47

解决方案1
0 2012-01-21 10:34:01

解决方案2
0 2012-01-24 15:42:47