Slide everything for Elementor
Вставка
- Опубліковано 23 січ 2023
- Quick demo for the "Slide everything for Elementor" plug-in
Plug-in Download: wordpress.org/plugins/slide-e...
Get Elementor: be.elementor.com/visit/?bta=2...
How to use it:
* create a horizontal container and give it an ID (Advanced - CSS ID)
* add multiple sub containers (those are the slides)
* add the Slide everything widget somewhere in the page
* set the ID of the container in “Slider ID”
* change some settings
* preview the page
#wordpress #elementor
Hi, very cool plugin and I'm glad I finally found it, thank you, but there is a big problem with arrows that can't be moved outside the container(overflow: hidden;), tell me what can be done about it?
it's using the default swiper layout where the navigation buttons are inside the swiper div. You could try to use custom CSS to override the overflow and move the buttons. Another way is to use custom JS, get the swiper again and call `slideNext()`. Check the official swiper documentation at "initialize swiper". It has an "after" example to get the swiper again. Then you can use every item in your page as the arrows
Hey there, I ran in another problem.
I have 5 containers that I am sliding with the help of your plugin now, one of my container is double the size of others.
But, I can't align the containers in center.
any way to fix that?
as before: please look at the HTML output and use CSS to align the content. The plugin just applies Swiper.js to your container. You could even do that without the plugin by calling the JS yourself swiperjs.com/get-started#initialize-swiper and add more paramters to it
No, I did the same thing you did with your video, but it is not compatible with the mobile version. Things that turn into sliders on mobile appear on the right, and when I slide the screen, the entire screen slides. Do you have a solution for this
That depends on your mobile styles or theme. A default Astra page with a horizontal container that just has images + my plugin looks like this in desktop, table and phone view: imgur.com/a/08IhEjJ it's not going to the right or something like this. So you have to check your styles for the mobile settings. Can't do anything there
the arrows a bit on annoying but highly respect your work.
I want these two arrows to be on bottom but one on the left and another on the right. i've been struggling to do that, can you suggest me how to do it?
just look at ua-cam.com/video/s8oyX1u-T6E/v-deo.html and change the numbers. You can style/move them with CSS very easily too. Both have normal classes
@@michaelgangolf7638 okay thanks a bunch man
is it column only or you can do it in row as well?
as it creates a horizontal slider I recommend having it in a row. If you have a column and assign that to the slider plugin it will still create a horizontal slider. But you content will jump from a long list of items to a slider. It will just take each item inside the container and use that as slides, no matter if the container is a column or row
@@michaelgangolf7638 okay thanks for the explanation
HEY, cant change the size and colors of the arrow
There is no property for the arrow size, you have to use `.swiper-button-next:after, .swiper-button-prev:after {font-size: }`. A fix for the arrow color will be released in a few hours. Looks like you are not using inline SVGs
what are the inline SVGs? like custom icons? can i add custom icons?@@michaelgangolf7638
great plugin. but unfortunately only works if logged in to wordpress
Hi, that shouldn't be the case. In case you are using any caching/minifying plugin make sure to purge the cache as most of the time they don't apply for logged-in users
@@michaelgangolf7638, yes! its because of Autoptimize plugin. Clearing the cache didn't help. It only works if disable css minification on the page...