Owl carousel stagepadding + Quick view

This topic has 9 replies, 2 voices, and was last updated 3 years, 10 months ago by Elise Noromit.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
February 9, 2021 at 2:54 pm #265078

nikosvl97
Participant

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.

February 10, 2021 at 10:39 am #265294

Elise Noromit
Member

Hello,

Please provide your site admin access to the private area.

I will check the settings.

Best Regards

February 10, 2021 at 10:54 am #265299

nikosvl97
Participant

here you are

February 10, 2021 at 10:56 am #265300
nikosvl97
Participant
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 */
}
```
February 10, 2021 at 10:57 am #265302

nikosvl97
Participant

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

February 10, 2021 at 11:09 am #265309
nikosvl97
Participant
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
                    
                    
                }
            }
				
	
		});
	
});
```
February 10, 2021 at 12:09 pm #265333

nikosvl97
Participant

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.

February 10, 2021 at 7:38 pm #265438
Elise Noromit
Member
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
February 11, 2021 at 7:01 am #265513
nikosvl97
Participant
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.
February 11, 2021 at 10:56 am #265615

Elise Noromit
Member

Hello,

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

Best Regards
Author

Posts