Question

所以我在我的网站上实现了Slick.js插件。您可以在此处查看公共领域：

主页底部附近有一个滑块，可以循环显示不同项目的缩略图。每次单击箭头，它都会转到下一张幻灯片。这都是通过Slick插件使用的。

如果你要检查元素，你会在html中发现有一些类别为“.featured-details”的部分被设置为出现在箭头之间。显示屏目前设置为display: none，如果您只将其中一个更改为display: inline-block，您将看到我想要实现的目标。

我想用jQuery编写，无论当前幻灯片是什么，然后将.featured-details部分显示为display:inline-block，这样它只会显示当前缩略图的详细信息。

像这样： THIS

我尝试了几种不同的方法并尝试使用$("#slideshow").slick('slickCurrentSlide')光滑方法返回索引，对于9张幻灯片，索引介于0到8之间。我已经为每个.featured-details部分提供了自己的data-type 0-9，甚至为每张幻灯片data-index。所以代码就像是，如果当前幻灯片的索引号和.featured-details部分的索引号都相同，那么fadeIn .featured-details部分。

我遇到这个问题。这是我的代码：

HTML：

<section id="featured">
        <div class="wrapper">
            <h2>A COUPLE OF OUR FEATURED PROJECTS</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu erat lacus, vel congue mauris. Fusce velit justo, faucibus eu sagittis ac, gravida quis tortor. Suspendisse non urna mi, quis tincidunt eros.</p>
        </div>
            <div>
                <ul id="slideshow">
                    <li id="project1" class="project-container" data-index="0"></li>
                    <li id="project2" class="project-container" data-index="1"></li>
                    <li id="project3" class="project-container" data-index="2"></li>
                    <li id="project4" class="project-container" data-index="3"></li>
                    <li id="project5" class="project-container" data-index="4"></li>
                    <li id="project6" class="project-container" data-index="5"></li>
                    <li id="project7" class="project-container" data-index="6"></li>
                    <li id="project8" class="project-container" data-index="7"></li>
                    <li id="project9" class="project-container" data-index="8"></li>
                </ul>
            </div><!-- end slideshow -->
        <div class="wrapper">
            <img id="prev-arrow" class="slideshow-arrow" src="img/left-arrow-hover.png" alt="Left Arrow">
            <div class="featured-details" data-type="0">
                <h3>Project #1</h3>
                <p>Some detail about the project. Some detail about the project.  A couple of sentences of detail about the particular project.</p>
            </div><!-- end featured-details -->
            <div class="featured-details" data-type="1">
                <h3>Project #2</h3>
                <p>Some detail about the project. Some detail about the project.  A couple of sentences of detail about the particular project.</p>
            </div><!-- end featured-details -->
            <div class="featured-details" data-type="2">
                <h3>Project #3</h3>
                <p>Some detail about the project. Some detail about the project.  A couple of sentences of detail about the particular project.</p>
            </div><!-- end featured-details -->
            <div class="featured-details" data-type="3">
                <h3>Project #4</h3>
                <p>Some detail about the project. Some detail about the project.  A couple of sentences of detail about the particular project.</p>
            </div><!-- end featured-details -->
            <div class="featured-details" data-type="4">
                <h3>Project #5</h3>
                <p>Some detail about the project. Some detail about the project.  A couple of sentences of detail about the particular project.</p>
            </div><!-- end featured-details -->
            <div class="featured-details" data-type="5">
                <h3>Project #6</h3>
                <p>Some detail about the project. Some detail about the project.  A couple of sentences of detail about the particular project.</p>
            </div><!-- end featured-details -->
            <div class="featured-details" data-type="6">
                <h3>Project #7</h3>
                <p>Some detail about the project. Some detail about the project.  A couple of sentences of detail about the particular project.</p>
            </div><!-- end featured-details -->
            <div class="featured-details" data-type="7">
                <h3>Project #8</h3>
                <p>Some detail about the project. Some detail about the project.  A couple of sentences of detail about the particular project.</p>
            </div><!-- end featured-details -->
            <div class="featured-details" data-type="8">
                <h3>Project #9</h3>
                <p>Some detail about the project. Some detail about the project.  A couple of sentences of detail about the particular project.</p>
            </div><!-- end featured-details -->
            <img id="next-arrow" class="slideshow-arrow" src="img/right-arrow-hover.png" alt="Right Arrow">
        </div><!-- end wrapper -->
    </section>

JS：

    //Home Page thumbnail slider
$("#slideshow").slick({
    slide: 'li',
    centerMode: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    nextArrow: $("#next-arrow"),
    prevArrow: $("#prev-arrow"),
    initialSlide: 2,
    variableWidth: true,
    infinite: false,
    focusOnSelect: true
});



//Show/hide Project Details depending on the current slide
$(".slideshow-arrow").on("click", ".featured-details", function(){
    var $currentSlide = $("#slideshow").slick('slickCurrentSlide');
    var $slideIndex = $currentSlide.data('index');
    var $detailIndex = $(this).data('type');
});

这是我到目前为止所得到的。任何帮助将不胜感激！

jQuery Slider插件不起作用

0 个答案: