Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #840526

    Hi,

    I’m looking to do something really simple and would like to know if something more simple than LayerSlider exists to do that.

    I want to do this thing where images change on the background with 3 buttons on it: http://imgur.com/a/N6tel

    Actually I didn’t find any solution (a simple slider in background with the possibility to put content on it): do you know if there is a solution?

    Cheers,

    Théau

    #840668

    Hey Demaup,
    You can use the Fullwidth Easy Slider, which comes with two buttons built-in, but you can copy another button from the wand tool on any post or page in the default editor, and paste in the Caption to create a third button.
    Here is an example button code I copied from the HTML of my demo:

    <a href="#" class="avia-slideshow-button avia-button avia-color-light avia-multi-slideshow-button" data-duration="800" data-easing="easeInOutQuad">Learn more</a>

    Here is the backend of where I pasted it:
    2017-08-17_181533
    Here is the front end:
    2017-08-17_181753
    Note that this just happens to be the Enfold demo I have today, but I think you’ll get the idea.

    Best regards,
    Mike

    #840870

    Hi Mike,

    I’ll try that!

    Thanks :)

    #841154

    Hi,

    Great, let us know how you get on with it :-)

    Best regards,
    Rikard

    #1230157

    Hi Mike, great solution in creating a button but i was wondering how to align it with the other buttons? (e.g. button1 and button2)

    https://greeknextdoor.com/wp-content/uploads/2020/07/2020-07-13_22-05-36.png

    https://greeknextdoor.com/wp-content/uploads/2020/07/2020-07-13_22-05-22.png

    #1230278

    Hi,
    Thanks for the screenshots and login, to move your added button next to the slider buttons, on the home page, try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_script(){
      ?>
      <script>
    (function($){
      $(document).ready(function(){
    $( '#top.home #fullscreen_slider_1' ).each(function() {
    $( this ).find( '.avia-caption-content p a.avia-slideshow-button' ).css("margin-left","20px").insertAfter( $(this).find('a.avia-slideshow-button-2') );
    $( this ).find( '.avia-caption-content p:last-child' ).remove();
    });
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    Then clear your browser cache and check.

    Best regards,
    Mike

    #1230388

    Awesome! Thank you, your solutions works great!

    #1230425

    Hey kevinlw85,

    I’m glad Mike was able to help. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.