Divi Mobile Solutions

Making a Slider for Mobile Devices

Written by Divi Mobile Team

On May 8, 2018

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 required which 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.

 

You can see the slider in action at site we did HERE. (Mobile Only)

You May Also Like…

How to Control the Divi Mobile Menu Top Border

How to Control the Divi Mobile Menu Top Border

Adding some color or flare to your divi mobile menu is a nice idea, but what if want to control it on a page by page basis? Yes it is possible with a little bit of CSS. You may even want the whole top border to be gone and not used at all. The CSS is listed below. You...

How To Add Text Above or Below the Mobile Hamburger Menu

How To Add Text Above or Below the Mobile Hamburger Menu

Adding some text below or above the mobile hamburger menu on Divi is really easy to add and edit to your liking.  With the code below simply add it to your Divi / Theme Options / Global CSS and you are done. You can change  the word MENU to anything you like, change...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *