Jump to content

Super easy image carousel


pconkie

Recommended Posts

I know there is a widget for that, but not as easy as this....

  • Fully responsive
  • upload images direct inside the widget
  • Re-order images with drag and drop
  • Preferences to control speed and transition
  • Experimental option to force the carousel to ignore the theme and take up the full width of the page (works with some but not all themes) 

  • Like 3
Link to comment
Share on other sites

Is it tweakable to resize the images when viewing in portrait on mobile? It fits fine when I view in landscape on a phone but the images are just cropped off on either side in portrait. Also, if you could in theory make certain slides clickable, then that would be even better!

Link to comment
Share on other sites

Hi John

The cropping is by design actually. The slide show was far too small in portrait on mobile, so I needed to set a minimum height. Once a minimum height is set you have two options: let the browser change the aspect ratio of the images (no thanks!) or crop the edges. You could add some css to the page to alter the min height which would result in less/no cropping.

Re clickable - good idea. Internal frog links are a bit tricky though.

Link to comment
Share on other sites

The height issue is definitely an issue for mobiles and sliders for sure! I was even toying with mobile detection code to serve up a different slider with different formatted pics to make it look nicer but I couldn't find a perfect solution.

External links would be fine - we hardly ever use internal links on website sliders. More relevant for us to send people to documents hosted on Google, external websites and other links outside of Frog.

Link to comment
Share on other sites

Add this to a html widget above the slider

<style>
    [data-name="Widget.ImageSlider"].widget-content .slider-container .wrap-slider .slide img {
        min-height: 0px !important;
    }
</style>

Nothing will be cropped but the image might get very very small!

Link to comment
Share on other sites

  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...