• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Customize Genesis Responsive Slider with Thumbnail navigation (Agency Theme)

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Customize Genesis Responsive Slider with Thumbnail navigation (Agency Theme)

This topic is: not resolved

Tagged: genesis responsive slider, home, responsive, slider

  • This topic has 7 replies, 2 voices, and was last updated 10 years ago by ebflute.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 4, 2013 at 1:10 pm #17949
    ebflute
    Member

    Hi,

    I need help learning where to start to add thumbnail navigation to the responsive slider. Or how to insert another slideshow into the area where the slideshow appears on the home page. I tried adding some jQuery to the head for another slideshow and then I put in the html into a widget but it is picking up the Genesis slideshow not the one that I added.

    dev.makeitbe.org is my testing site.

    This is the html I put into a Home Slider widget:

    <code><div class="flexslider">

    <ul class="slides">

    <li data-thumb="/wp-content/uploads/2013/01/thumb-s1.jpg">

    <img src="/wp-content/uploads/2013/01/slider-pledge_s1.jpg" />

    </li>

    <li data-thumb="/wp-content/uploads/2013/01/thumb-s1.jpg">

    <img src="http://placekitten.com/g/960/336" />

    </li>

    <li data-thumb="/wp-content/uploads/2013/01/thumb-s1.jpg">

    <img src="http://placekitten.com/960/300" />

    </li>

    <li data-thumb="/wp-content/uploads/2013/01/thumb-s1.jpg">

    <img src="http://placekitten.com/g/960/336" />

    </li>

    <li data-thumb="/wp-content/uploads/2013/01/thumb-s1.jpg">

    <img src="http://placekitten.com/960/336" />

    </li>

    </ul>

    </div></code>

    and I added this to the footer.

    <code><script>

    $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
    });
    </script></code>

    And I have added this code to the functions file:

    <code>/** Add jquery for slider */
    add_action('genesis_meta', 'flexsliderjs');
    function flexsliderjs() {
    if(is_home()) {
    wp_register_script( 'jquery', '/wp-content/themes/agency/js/jquery.flexslider-min.js');
    wp_enqueue_script( 'jquery' );
    wp_register_style( 'css', '/wp-content/themes/agency/flexslider.css');
    wp_enqueue_style( 'css' );
    }
    }</code>

    Knowing where to start would be really helpful!! Thanks in advance!!

    Linda

    February 4, 2013 at 1:52 pm #17960
    SoZo
    Member

    Please include a link to your site with all questions so that people can see what is going on.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    February 4, 2013 at 1:53 pm #17962
    ebflute
    Member

    http://dev.makeitbe.org

    Thank you!

    February 4, 2013 at 2:06 pm #17971
    ebflute
    Member

    Here is my comp of how I want it to look:
    https://www.dropbox.com/s/whfomjwm7ytz5sd/mib-comp-D.jpg

    February 4, 2013 at 2:09 pm #17972
    SoZo
    Member

    I'm not seeing the genesis slider. I'm seeing flexslider added through a text widget.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    February 4, 2013 at 3:53 pm #18034
    ebflute
    Member

    Is there a way for me to use the Genesis Responsive Slider but with thumbnail navigation? This flexslider doesn't show up properly and it didn't show up at all until I activated the Genesis Slider.

    Perhaps my flexslider isn't showing up properly because the path is not right as I have nested it in a text widget. The paths may be off in the js and the css. I will take a look at this.

    Can you help me do approach this properly, either by adding the flexslider in the functions file or customize the Genesis Slider using thumbnail navigation? I would like to use proper coding to achieve the slider layout.

    Thank you for taking the time to look at it!! I really appreciate it.

    February 4, 2013 at 4:44 pm #18056
    SoZo
    Member

    No, the Genesis Slider doesn't have thumbnail navigation. And I am not currently taking on clients. You could grab the slider from the Delicious theme if you have access to that theme.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    February 4, 2013 at 5:40 pm #18085
    ebflute
    Member

    So to update, I have cleaned up the code so that it is only displaying the Genesis Responsive Slider and the circles. I think all I need is to learn how to replace the circles with my thumbnail images. The numbers are being swapped out for circles so it must be able to be done.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble