Making a Slider for Mobile Devices

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.

1. Images should be around 300px X 90px. Make sure all images are the same size.
2. Put in your full width row and add the gallery module.
3. In the row settings make sure to pick the background color to match your site.
4. Pick your images for the gallery.
5. In the Gallery module settings use option slider not grid.
6. In the Gallery module settings under advanced set the automatic animation ON and 3000 as the speed.
7. Under the gallery module add a module and use the code module.
8. 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.