Question

我正在尝试将Isotope与Caroufredsel一起使用，但没有成功。

我正在使用：

HTML + WP：

事实上，Isotope和Caroufredsel正在使用相同的ID，这是主要的冲突。

<section class="products">

    <nav id="f1" class="usNavi">
        <div class="wrap">
            <ul id="filter" class="filter" data-key="filter">
                <li><a href="#" data-filter="*">Todos</a></li>
                <li><a href="#" data-filter=".p-10">EcoLife Technologies</a></li>
                <li><a href="#" data-filter=".p-6">SilverLine</a></li>
                <li><a href="/productos/">Regresar</a></li>
            </ul>
        </div>
    </nav>

    <div id="heaters">

        <div class="arrow-nav">
            <a id="left" class="left" href="#"></a>
            <a id="right" class="right" href="#"></a>
        </div>


    <ul id="carrusel" class="carrusel clearfix">

            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php
            $cat = get_the_category();
            ?>
            <li class="product <?php foreach($cat as $cate){
                $id = $cate->cat_ID;
                echo "p-$id";
            }
            ?> heater-<?php the_ID(); ?>">
            <figure class="clearfix">
                <?php the_post_thumbnail(); ?>
            </figure>

            <h2><?php the_title(); ?></h2>
            <h3><?php get_spec_0_1(); ?></h3>
            <h4><?php get_spec_6_1(); ?></h4>
            <a href="<?php the_permalink(); ?>">Ver</a>
            <small>
                Uso Recomendado para
                <figure class="clearfix">
                    <?php get_spec_300(); ?>
                </figure>
                <strong>personas.</strong>
            </small>

        </li>

    <?php endwhile; endif; ?>
    <?php wp_reset_query(); ?>

</ul>
</section>

这就是我打电话给CarouFredsel和Isotope ......

<script>

jQuery(function($) {


    var _onBefore = function() {
        $(this).find('li').stop().css('opacity', '0.25' );
    };

    var _onAfter = function() {
        $(this).find('li').stop().css('opacity', '1' );
    };

    //isotope

    var $container = $('#carrusel');

    $('#filter a').click(function(){
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false

            }
        });
        return false;
    });

    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $("#carrusel").carouFredSel({
        auto    : false,
        width: '100%',
        height: '100%',


        scroll: {
            duration: 750

        },
        prev: {
            button: "#left",
            key: "left",
            items: 2,
            onBefore: _onBefore,
            onAfter: _onAfter

        },
        next: {
            button: "#right",
            key: "right",
            items: 2,
            onBefore: _onBefore,
            onAfter: _onAfter
        }

    });




});
</script>

由于

Answer 1

同样在这里，我花了几个小时，却无法找到解决方案。旋转木马不会滚动。

我认为它与同位素将物品转变为绝对定位的事实有关。

“Isotope”与“CarouFredsel”的搭配并不好

1 个答案: