
Divi Mobile Slider
Once in a while when I make a full site or just the mobile, I like to have a slider just for the mobile site. Usually with rounded corners and the image will be around 300 px x 90 px. I also have used images with just text with a transparent background to have a few impact statements shown. The slider module itself is ok, but I have found the gallery module works best. There are a few steps, but will try and list them all here. No global CSS is requited with makes it nice. Be sure to follow us on facebook and if you want a true mobile web app section for yourself or a client, send us a message.
- Images should be around 300px X 90px. Make sure all images are the same size.
- Put in your full width row and add the gallery module.
- In the row settings make sure to pick the background color to match your site.
- Pick your images for the gallery.
- In the Gallery module settings use option slider not grid.
- In the Gallery module settings under advanced set the automatic animation ON and 3000 as the speed.
- Under the gallery module add a module and use the code module.
- Place this code in the code module.
<style>.et-pb-arrow-prev {
display: none !important;
}
.et-pb-arrow-next {
display: none !important;
}
.et-pb-controllers {
display: none !important;
}
.et_post_gallery {
pointer-events: none !important;
}
.mfp-bottom-bar {
display: none !important;
}
</style>
The above code makes it a true slider by hiding the arrows, description, pagination and making it NON-clickable.
One last helpful thing is hide the row on tablets and desktops, so it only shows on mobile.
Hope this will be helpful to some of ya’s. Enjoy.
Recent Comments