Owl carousel stagepadding + Quick view

Hello, i added 4 products with carousel and i want to enable the function “Stage Padding” so i could see the 5th half product on the right side.(See photo)

Now you see only 4 of them. the carousel i put it with wpbakery.

I would like to have the arrows on the left down side and the bar down. Now i have it but is not working correctly.(see screenshot)

Bonus question.
How can i copy quick view link or any other way so i can have them in products?I would like to add the Quick view function to all products where the (+) is, in the sliders of slider revolution on front page. I hope you can help me 😀
Thanks for you time!

Attachments:

You must be logged in to view attached files.

Hello,

Please provide your site admin access to the private area.

I will check the settings.

Best Regards

here you are

and one more thing.

i add an animation for every item in the owl carousel but i dont know if it is the right way because i have to define every item animation. but if i put more items i have to add them to the css code. Is any way to make it dynamically ? (code follows)

 div.owl-item.active {
  animation: animatebottom 1s; opacity:0;
  -moz-animation: animatebottom 1s;
  /* Firefox */
  -webkit-animation: animatebottom 1s;
  /* Safari and Chrome */
  -o-animation: animatebottom 1s;
  /* Opera */
}

div.owl-item.active:nth-child(1) {
  animation-delay: 0.0s;
}

div.owl-item.active:nth-child(2) {
  animation-delay: 0.3s;
}

div.owl-item.active:nth-child(3) {
  animation-delay: 0.6s;
}

div.owl-item.active:nth-child(4) {
  animation-delay: 0.9s;
}
div.owl-item.active:nth-child(5) {
  animation-delay: 1.3s;
}
div.owl-item.active:nth-child(6) {
  animation-delay: 0.4s;
}
div.owl-item.active:nth-child(7) {
  animation-delay: 0.8s;
}
div.owl-item.active:nth-child(8) {
  animation-delay: 1.2s;
}
div.owl-item.active:nth-child(9) {
  animation-delay: 1.6s;
}

@keyframes animatebottom {
  from {
    opacity: 0;
	   transform: translate3d(0px, 200px, 0px);
  }
  to {
    opacity: 1;
	   transform: translate3d(0px, 0px, 0px);
  }
}

@-moz-keyframes animatebottom {
  /* Firefox */
  from {
    opacity: 0;
	   transform: translate3d(0px, 200px, 0px);
  }
  to {
    opacity: 1;
	   transform: translate3d(0px, 0px, 0px);
  }
}

@-webkit-keyframes animatebottom {
  /* Safari and Chrome */
  from {
    opacity: 0;
	    transform: translate3d(0px, 200px, 0px);
  }
  to {
    opacity: 1;
	    transform: translate3d(0px, 0px, 0px);
  }
}

@-o-keyframes animatebottom {
  /* Opera */
  from {
    opacity: 0;
	   transform: translate3d(0px, 200px, 0px);
  }
  to {
    opacity: 1;
	   transform: translate3d(0px, 0px, 0px);
  }
}
/*
.owl-carousel.owl-loaded {
    display: inline-flex;
    flex-wrap: nowrap;
    right: 48px;
}*/
div.owl-item.active {
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

And one more thing. i want the effects only on the 2 product carousel that i have on the front page. but the effect is working on products and on carousel brand but i dont want it. Can i specify only the 2 carousels ?

thanks

and the loop is not working after the jquery that i am using :

jQuery(document).ready(function( $ ) {
	
	$('.owl-carousel').owlCarousel({
   nav:true,
	
            responsive: {
                0: {
                    items: 2.5,
                    
                },
                600: {
                    items: 3.5,
                    
                },
                1000: {
                    items: 4.5,
					slideBy: 4
                    
                    
                }
            }
				
	
		});
	
});

How can i show the logo on the top left corner when i open the search ?

thanks

Attachments:

You must be logged in to view attached files.

Hello,

By default, the carousel works like this: https://gyazo.com/d62574d617387deeeb7ccaf9fc9a4dda

Please deactivate all the plugins not related to the theme and switch the parent theme, check the issue, If the problem has gone, activate the plugins one by one, checking the issue to detect which one causes the problem.
You can find the option in the Product Grid element > Carousel tab > option to set a number of products to slide.

Quick view is enabled in the Theme Settings > Shop and valid for all the products grids.

Please add this code to the Theme Settings > Custom CSS > Global:

body .owl-carousel .owl-nav>div {
    opacity: 1;
}

Arrows would be always visible.

Describe or show the sample of the animation you are trying to add.

Assign ID or classes to the rows and include them in your custom code in this way the code would be applied only to these rows.

Best Regards

hi, thanks for your answer.

the problem is that it has 1-2-3-4-5-6-7-8 https://gyazo.com/15253564c6a0b54b6f31529fc4aa203c
i want to use those numbers: 1.5 – 2.5 – 3.5 – 4.5 – 5.5 – 6.5 – 7.5 – 8.5 with that way i enable the stage padding effect on the right side. that i am doing now with jQuery:

jQuery(document).ready(function( $ ) {
	
	$('.owl-carousel').owlCarousel({
   nav:true,
	
            responsive: {
                0: {
                    items: 2.5,
                    
                },
                600: {
                    items: 3.5,
                    
                },
                1000: {
                    items: 4.5,
					slideBy: 4
                    
                    
                }
            }
				
	
		});
	
});

when i am using the Queary, after that the loop is not working.

Hello,

Unfortunately, the carousel does not have the option to show half of the product.

Best Regards

[Author]

Posts