Question

我需要制作一个带有侧边栏/垂直缩略图部分的猫头鹰旋转木马，作为最新的新闻栏目。但是，替换缩略图是下一张幻灯片的框。我还需要一个文本部分。我提出了以下代码，但我不知道如何处理它。

    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="owl-carousel owl-theme" id="sync1">
        <div class="item">
            <h1>1</h1>
        </div>
        <div class="item">
            <h1>2</h1>
        </div>
        <div class="item">
            <h1>3</h1>
        </div>
        <div class="item">
            <h1>4</h1>
        </div>
        <div class="item">
            <h1>5</h1>
        </div>
        <div class="item">
            <h1>6</h1>
        </div>
        <div class="item">
            <h1>7</h1>
        </div>
        <div class="item">
            <h1>8</h1>
        </div>
    </div>
    <div class="owl-carousel owl-theme" id="sync2">
        <div class="item">
            <h1>1</h1>
        </div>
        <div class="item">
            <h1>2</h1>
        </div>
        <div class="item">
            <h1>3</h1>
        </div>
        <div class="item">
            <h1>4</h1>
        </div>
        <div class="item">
            <h1>5</h1>
        </div>
        <div class="item">
            <h1>6</h1>
        </div>
        <div class="item">
            <h1>7</h1>
        </div>
        <div class="item">
            <h1>8</h1>
        </div>
    </div>
</body>
</html>

CSS：

    #sync1 {
    .item {
        background: #0c83e7;
        padding: 80px 0px;
        margin: 5px;
        color: #FFF;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
    }
}
#sync2 {
    .item {
        background: #C9C9C9;
        padding: 10px 0px;
        margin: 5px;
        color: #FFF;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
        cursor: pointer;
        h1 {
            font-size: 18px;
        }
    }
    .current .item {
        background: #0c83e7;
    }
}
.owl-theme {
    .owl-nav {
        /*default owl-theme theme reset .disabled:hover links */
        [class*='owl-'] {
            transition: all .3s ease;
            &.disabled:hover {
                background-color: #D6D6D6;
            }
        }
    }
}
//arrows on first carousel
#sync1.owl-theme {
    position: relative;
    .owl-next, .owl-prev {
        width: 22px;
        height: 40px;
        margin-top: -20px;
        position: absolute;
        top: 50%;
    }
    .owl-prev {
        left: 10px;
    }
    .owl-next {
        right: 10px;
    }
}

的Javascript

    $(document).ready(function() {
    var sync1 = $("#sync1");
    var sync2 = $("#sync2");
    var slidesPerPage = 4; //globaly define number of elements per page
    var syncedSecondary = true;
    sync1.owlCarousel({
        items: 1,
        slideSpeed: 2000,
        nav: true,
        autoplay: true,
        dots: true,
        loop: true,
        responsiveRefreshRate: 200,
        navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
    }).on('changed.owl.carousel', syncPosition);
    sync2.on('initialized.owl.carousel', function() {
        sync2.find(".owl-item").eq(0).addClass("current");
    }).owlCarousel({
        items: slidesPerPage,
        dots: true,
        nav: true,
        smartSpeed: 200,
        slideSpeed: 500,
        slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
        responsiveRefreshRate: 100
    }).on('changed.owl.carousel', syncPosition2);

    function syncPosition(el) {
        //if you set loop to false, you have to restore this next line
        //var current = el.item.index;
        //if you disable loop you have to comment this block
        var count = el.item.count - 1;
        var current = Math.round(el.item.index - (el.item.count / 2) - .5);
        if (current < 0) {
            current = count;
        }
        if (current > count)  {
            current = 0;
        }
        //end block
        sync2.find(".owl-item").removeClass("current").eq(current).addClass("current");
        var onscreen = sync2.find('.owl-item.active').length - 1;
        var start = sync2.find('.owl-item.active').first().index();
        var end = sync2.find('.owl-item.active').last().index();
        if (current > end) {
            sync2.data('owl.carousel').to(current, 100, true);
        }
        if (current < start) {
            sync2.data('owl.carousel').to(current - onscreen, 100, true);
        }
    }

    function syncPosition2(el) {
        if (syncedSecondary) {
            var number = el.item.index;
            sync1.data('owl.carousel').to(number, 100, true);
        }
    }
    sync2.on("click", ".owl-item", function(e) {
        e.preventDefault();
        var number = $(this).index();
        sync1.data('owl.carousel').to(number, 300, true);
    });
});

这就是我想要的样子。 https://i.stack.imgur.com/MtBRf.png

Answer 1

这是光滑插件的解决方案：

$('.slider').slick({
            slidesToShow: 7,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 866,
                    settings: {
                        slidesToShow: 7
                    }
                },
                {
                    breakpoint: 640,
                    settings: {
                        slidesToShow: 5
                    }
                },
                {
                    breakpoint: 320,
                    settings: {
                        slidesToShow: 3
                    }
                }]
        });

html代码：

 <div class="slider slider-nav">
        <div class="item">
            <p>1</p>
        </div>
        <div class="item">
            <p>2</p>
        </div>
        <div class="item">
            <p>3</p>
        </div>
        <div class="item">
            <p>4</p>
        </div>
        <div class="item">
            <p>5</p>
        </div>
        <div class="item">
            <p>1</p>
        </div>
        <div class="item">
            <p>2</p>
        </div>
        <div class="item">
            <p>3</p>
        </div>
        <div class="item">
            <p>4</p>
        </div>
        <div class="item">
            <p>5</p>
        </div>

    </div>

如何使用文本替换垂直缩略图创建猫头鹰轮播？

1 个答案: