Fatal编程技术网
  • javascript/
  • Javascript 如何用文本替换垂直缩略图来创建owl转盘？

Javascript 如何用文本替换垂直缩略图来创建owl转盘？

javascript html css

Javascript 如何用文本替换垂直缩略图来创建owl转盘？,javascript,html,css,Javascript,Html,Css,我需要制作一个带有侧边栏/垂直缩略图部分的猫头鹰转盘，作为最新的新闻部分。但是，用下一张幻灯片的内容替换缩略图是一个方框。我还需要一个文本部分。我已经想出了下面的代码，但我不知道如何处理它 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="owl-carousel owl-theme" i

我需要制作一个带有侧边栏/垂直缩略图部分的猫头鹰转盘，作为最新的新闻部分。但是，用下一张幻灯片的内容替换缩略图是一个方框。我还需要一个文本部分。我已经想出了下面的代码，但我不知道如何处理它

    <!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>
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);
    });
});

$（文档）.ready（函数（）{
var sync1=$（“#sync1”）；
var sync2=$（“#sync2”）；
var slidesPerPage=4；//全局定义每页的元素数
var syncedSecondary=true；
sync1.1旋转木马({
项目：1，
幻灯片速度：2000，
导航：是的，
自动播放：对，
点：是的，
循环：对，
响应速度：200，
导航文本：[''，''，
}).on（'changed.owl.carousel'，syncPosition）；
sync2.on（'initialized.owl.carousel'，function（）{
sync2.find（“.owl项”）.eq（0）.addClass（“当前”）；
})猫头鹰旋转木马({
项目：幻灯片页，
点：是的，
导航：是的，
智能速度：200，
幻灯片速度：500，
slideBy:slidespage，//或者您可以按1滑动，这样活动幻灯片将粘贴到第二个旋转木马中的第一个项目
回应率：100
}).on（'changed.owl.carousel'，syncPosition2）；
功能同步位置（el）{
//如果将loop设置为false，则必须还原下一行
//var电流=el.item.index；
//如果禁用循环，则必须对此块进行注释
var count=el.item.count-1；
var电流=数学四舍五入（el.item.index-（el.item.count/2）-.5）；
如果（电流<0）{
电流=计数；
}
如果（当前>计数）{
电流=0；
}
//端块
sync2.find（“.owl item”）.removeClass（“当前”）.eq（当前）.addClass（“当前”）；
屏幕上的var=sync2.find（'.owl item.active'）。长度-1；
var start=sync2.find（'.owl item.active'）.first（）.index（）；
var end=sync2.find（'.owl item.active'）.last（）.index（）；
如果（当前>结束）{
同步2.数据（'owl.carousel'）。到（当前，100，真）；
}
如果（电流<启动）{
同步2.数据（'owl.carousel'）。到（当前-屏幕上，100，真）；
}
}
功能同步位置2（el）{
如果（同步辅助）{
变量编号=el.item.index；
同步1.数据（'owl.carousel'）。到（数字，100，真）；
}
}
sync2.on（“click”、“.owl项”，函数（e）{
e、 预防默认值（）；
var number=$（this.index（）；
同步1.数据（'owl.carousel'）。到（数字，300，真）；
});
});
这就是我想要的样子。
这是slick插件中的解决方案：

$('.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>


一,

二,

三,

四,

五,

一,

二,

三,

四,

五,


 <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>