Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- out+='<div class="col-lg-5 prod-slides">';
- out+='<div id="sync1" class="owl-carousel owl-theme">';
- out+='<div class="item">';
- out+=`<img src="pages/orderPage/goods/${pack.img}">`;
- out+='</div>';
- out+='<div class="item">';
- out+=`<img src="pages/orderPage/goods/${pack.img}">`;
- out+='</div>';
- out+='<div class="item">';
- out+=`<img src="pages/orderPage/goods/${pack.img}">`;
- out+='</div>';
- out+='</div>';
- out+='<div id="sync2" class="owl-carousel owl-theme">';
- out+='<div class="item">';
- out+=`<img src="pages/orderPage/goods/${pack.img}">`;
- out+='</div>';
- out+='<div class="item">';
- out+=`<img src="pages/orderPage/goods/${pack.img}">`;
- out+='</div>';
- out+='<div class="item">';
- out+=`<img src="pages/orderPage/goods/${pack.img}">`;
- out+='</div>';
- out+='</div>';
- #sync1.owl-theme {
- position: relative;
- }
- #sync1.owl-theme .owl-next, .owl-prev {
- width: 30px;
- height
- : auto;
- top:50%;
- position: absolute;
- outline: none;
- }
- .owl-dots{
- display: none;
- }
- .owl-nav span{
- display: block;
- top:50%;
- font-size: 35px;
- }
- #sync1.owl-theme .owl-prev{
- right: auto;
- }
- #sync1.owl-theme .owl-next{
- left: auto;
- }
- .owl-item{
- padding-top: 20px;
- }
- #sync1 .item{
- width: 250px;
- }
- #sync2 .item{
- width: 125px;
- }
- #sync1 .active{
- display: flex;
- }
- #sync1 .active .item{
- margin: auto;
- }
- $(document).ready(function() {
- var sync1 = $("#sync1");
- var sync2 = $("#sync2");
- var slidesPerPage = 3; //globaly define number of elements per page
- var syncedSecondary = true;
- sync1.owlCarousel({
- items : 1,
- nav: true,
- loop: true,
- responsiveRefreshRate : 200,
- }).on('changed.owl.carousel', syncPosition);
- sync2.on('initialized.owl.carousel', function () {
- sync2.find(".owl-item").eq(0).addClass("current");
- })
- .owlCarousel({
- items : slidesPerPage,
- margin:20,
- nav: true,
- 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);
- });
- });
- .owl-stage{
- width: initial !important;
- }
Add Comment
Please, Sign In to add comment