Hi, I was wondering if it’s possible to switch between the slides in the SiteOrigin Hero Header by just ONE button BENEATH the content.
I want to switch between written content and the built in navigation is impractical since it’s a) above the text and b) I simply want it to look different. What I’m thinking of is remarkably simple:
I know I can’t stop the automatic transition between the slides, but my plan is to just add such a high numeric value that in effect it is immobilized and the user switches between slides by clicking just that one button below the content.
I’d also like to get rid of the navigation points.
Or maybe there’s a different way to go about this?
Thanks!
Jele
Ok I’m not sure why my images aren’t showing, here is what I want it to look like, super simple:
Slide 1: http://www.highlandcrystals.com/wp-content/uploads/2017/03/Unbenannt-1.jpg
Slide 2: http://www.highlandcrystals.com/wp-content/uploads/2017/03/Unbenannt-1b.jpg
Hi Jele,
This is possible, but you’ll need to use JavaScript – which I sadly cannot assist with, support wise. We use Cycle2 for the slider functionality so, in theory, you could create a custom event that will allow for this to work. Something like the following jQuery:
jQuery( function($){ $('.sow-slider-images').each( function(){ $$ = $(this); $('.sow-slider-images .slider-next').click(function(e) { $$.cycle('next'); }); $('.sow-slider-images .slider-prev').click(function(e) { $$.cycle('prev'); }); } ); } );With the following markup inside of your slides:
Previous Slide:
Next Slide:
Regardless, I’ll log this as a feature request.
Thanks! Yeah, and easy implementation of that would be dreamy.
But may I ask follow up questions to your suggestion? If I’m understanding correctly I would install the Cycle2 plugin and then add the above (or similar) custom event. Where would I add that? Within the plugin (customization?) or somewhere within WordPress, SiteOrigin or the theme? Thanks.
Actually thanks but never mind, after perusing the Cycle2 site I think it’s just beyond my capabilites. I guess I will need to hire someone to take care of things like these in the future. Although I do wish it could be done with SiteOrigin because I think it’s a really user friendly product and would like to stick with it. :/
Hi Jele,
Hold up, no, you misunderstood. To clarify, we use Cycle2 for the slider – you don’t need to install it or anything like that. Basically, to use the above code all you need to do is add the JavaScript to your page and then add the HTML to your slider.
To provide an exmaple, add a text widget to the page you wish to add this slider effect for and open it. Add the following to the text widget:
<script> jQuery( function($){ $('.sow-slider-images').each( function(){ $$ = $(this); $('.sow-slider-images .slider-next').click(function(e) { $$.cycle('next'); }); $('.sow-slider-images .slider-prev').click(function(e) { $$.cycle('prev'); }); } ); } ); </script>Disable Automatically add paragraphs.
Then open the Hero widget, open the initial frame and switch to the text tab for the content. Add:
Do the same for the next frame but this time use:
Hi Alex
Ah I see! Thanks for the clarification. I created a new page to try this but unfortunately I must be doing something wrong, as it’s just showing up like this: Private Snippet
Private Snippet
:/
Hi Jele,
Oh, hold up. You copied the code in my initial reply. That code won’t work when added to a text widget as it’s not nested in a script element. Please copy the code in my last reply.
Also, it looks like you copied the HTML into the visual mode of the editor. You need to add that HTML to the text mode of the editor.
Hi Alex, thanks for the reply. I did everything just as described but nothing is showing up. It simply makes no difference at all. I don’t know at this point whether we’re even trying to achieve the same thing? Or maybe it’s because I’m using the layout slider?
Hi Jele,
The code will work with layout slider. To clarify, is your test page still sighlandcrystals.com/slider? If so, it doesn’t contain the code used in my last (or rather second to last at this point) post. Please disregard all code prior to that post and use the code in that post. One of the key things my last post states is that you must switch to the text mode (which will accept HTML) rather than the visual mode (which won’t accept HTML and instead try and display which will prevent the HTML from working).
Hi!
No, since nothing changed at all in the appearance of the site, I didn’t bother with links or screenshots. I can send you a link to the site in question, although I would wish to do so privately, if there is a way to mark answers as private?
Besides that I really don’t know where the mistake is or what else to do. :/
Hi Jele,
To clarify, isn’t the last link you sent me your domain? The Crystal place? Did you want me to hide that link?
If that is your website, the mistake is that you’re adding the code incorrectly. Specifically, you’re adding the code to the visual view which will not work. As mentioned, you need to add it to the text mode of the editor.
Yikes, this is getting more and more confusing. :D
This is the site in question: Private Snippet
It would be great if you could mark this reply as private since that is still work in progress.
It’s about the sliders in the “What We Do” section: Private Snippet
I went through your description step by step but as mentioned, literally nothing happened with the sliders’ appearance. :/
Hi Jele,
I just tried to replicate your setup and was able to without issue so I’m not too sure what’s going on. Hm. Would it be possible for you to send me an export for this widget? To do this open up the page with the widget and click layout in the Page Builder toolbar. Then click import/export and then click download. Please upload the export to a 3rd party file hosting site such as teknik.io.
Okay sure, or should I make you an admin so you can look at my site directly?
Hi Jele
Either is fine. I actually asked for the layout so I can check if I’m doing differently or if there’s something on your site preventing it from working as desired.
This is a private message.
This is a private message.
Ok I’ve done both! How can I send you the link to the layout? I’ve uploaded it to dropbox. Let me know if you still need it or if being an admin will suffice. Thanks!
Hi Jele,
Unfortunately, I can’t seem to see why this isn’t working. Sadly, at this point, we’ll need to wait until this has been officially implemented into the base widget. Sorry mate. :(
That sucks. But thanks for checking! Is there an approximate timeline for the implementation into the base widget?
Hi Jele,
Unfortunately, I can’t provide any sort of ETA on this sort of stuff as I really don’t know – it’s up to the development team. Sorry mate. :(
ok thanks anyway, Alex