slider, different slides with different delay time

I am using divi from elegant themes [sorry upfront :slight_frown: ] and they have a slider which you can set how many second delay. The problem is that I want one slide to have a longer delay than others. How can I do this?

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan,

    I hope you're well today and thank you for your question!

    As far as I can tell from Divi documentation, their slider may not support this feature. I'd like to take a closer look at its settings in order to make sure but since I do not have an access to this theme on my own setup, I'd need to check it on yours. However, it seems that the support access that you've granted us has either already expired or an error occurred.

    That said, would you be so kind an re-grant it for me so I could examine this?

    Let me know here when you're ready!

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan!

    Thank you for granting access. I double-checked Divi options and unfortunately I can confirm that there's no way to set different times for selected slides - it's only allowing you to set an overall time that will be applied to all slides.

    There may exist some kind of filter/hook that would help you customize it but I wasn't able to find this anywhere so I suggest asking Divi developers. Hopefully, they would help you with this (as Divi is a premium theme).

    Alternatively, you may want to try some 3rd-party slider plugins. I'm not sure which one will allow you to set individual timings for slides but there's a lot of slider plugins available. You may want to check "Meta Slider" first as it includes for slider engines at once:

    https://wordpress.org/plugins/ml-slider/

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan!

    I thought you guys give support even to competitors products,

    Yes, we do. Please note though, that Divi's built-in slider simply doesn't support the feature you're looking for and we're not developers of Divi so it may not be possible to provide you with any additional code that would change this. This would require custom coding job that's beyond the scope of support forum.

    However, as I mentioned before, most likely there is another solution and I understand that what counts here is that you wish to achieve specified goal, is that right?

    As I said, the simplest solution here would be to replace default (built-in) Divi slider with another one. A slider that do supports this feature according to its demo site would be for example:

    Master Slider: http://www.masterslider.com/

    Kind regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan!

    Thank you for granting access. I've visited your site and added two slides to the slider. For each slider there's a setting allowing you to define slide display time. Take a look at screenshots please.

    To set individual time for slides please go to your dashboard's

    "Master Slider" -> "Master Slider" page -> [select slider] -> [select slide or add new one]

    I hope that helps.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan,

    You will want to use a different "type" of slider for this ("slider template"). There's the one called "Slider with info" available when you're creating a new slider. It includes text over/under slides.

    I have created such a slider for you. Take a look please and you'll find out that for the first slide I've just removed the background image, therefore leaving only a clean text. This text can be changed on "Slide info" tab for the slide.

    This way you can setup your entire slider to be either image-only based, text-only based or even mix image-only, text-only and image+text slides. Once this is all built up you will most likely want to add a custom CSS rule to move the text a bit to be placed "on" the slide instead of "under" it.

    To do this, go to "Slider Settings" for that entire slider and scroll down until "Custom CSS" box and place this line there:

    .ms-slide-info {margin-top:-200px!important;}

    Please note though that most likely you will want to adjust that "-200px" value to suit your slider's size and design. The negative value will move the text up and positive will move it down (assuming that the starting point is "0px" which means the text sticking to the bottom edge of the slider).

    Best regards,
    Adam

  • Jonathan
    • The Crimson Coder

    So that worked...kinda. You explained how to do it, but your css messed up the bottom of the site (the black bar is supposed to be across the bottom of the window) and also the slider navigations are not aligned with the text. Please help! Thanks!

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan,

    I've added another CSS rule to your slider's settings:

    .master-slider-parent {height:300px;}

    This sets fixed slider height so it's not changing height with when slides change and the "black bar" is now placed at the bottom of the window.

    In order to align navigation to text I added ("Slider Controls" page) "Arrows" as navigation elements and then added these CSS lines (the same way as previous CSS rules):

    .ms-skin-default .ms-nav-prev {top:12%;left:-40px;}
    .ms-skin-default .ms-nav-next {top:12%;right:-40px;}

    This sets navigation arrows near the left and right edge of the text. Again, you may want to adjust "12%" (lower value moves arrow up, higher moves it down) and "-40px" to precisely position navigation arrows.

    That said, I suppose you may want to use other kind arrows as these are white and somewhat disappear on white background but this isn't something I could fix for you. The simplest way to change this would be to "light-skin-1.png" file on your server with the one containing your own icons. The file is located inside the

    "/wp-content/plugins/master-slider/public/assets/css/skins/"

    folder of your WordPress install.

    Kind regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan!

    I apologize for the delay on my side. Please note though that we're supposed to answer to members' posts in order from oldest to newest threads and if post a few posts "in a row" (without our response) forum engine puts your thread at the bottom of the queue and this results sometimes in a delayed response. I sincerely apologize for this again!

    As for the issue itself. Unfortunately the support access to your site has already expired and I'm not able to access your site now. I'll be glad to assist you further so could you please re-grant it for me and let me know here?

    Thank you and have a nice day!
    Adam

  • Jonathan
    • The Crimson Coder

    so on desktop and tablet, it look great, thank you. On smartphone portrait, the dots are too high up on the first slide and the quotes overlap the title on all slides. I'm attaching a screenshot. About how long should I wait for you to post back, perhaps my assumptions were incorrect

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan!

    I've added some more CSS rules and contents should no more overlap. However, for screens 360 and less pixels wide I had to hide navigation dots (navigation arrows for "mobile" resolutions are being hidden by slider itself in favor of "swipe touch" navigation).

    Tested with Firefox responsive view tool (for different resolutions) it seems to be looking and working fine right now.

    Best regards,
    Adam

  • Jonathan
    • The Crimson Coder

    The overlap is much better. But on my galaxy 5s using chrome, I can NOT swipe to see other slides and a white arrow still appears to the right of the slides. Also, on the smartphone for the 2 smaller slides there is a small white line under the black footer bar, that needs to not be there. Thanks

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan!

    I'm glad the "overlap issue" is fixed.

    As for swipe feature. This is not handled by CSS and therefore is related to plugin - most likely the JS code used by plugin and with whitch I'm not familiar and not able to interfere. I'd suggest either taking a look at plugin's documentation or asking it's developer if there are any know issues of that kind.

    As for "white bar" in footer. That's really difficult to adjust perfectly, given that the "black bar" image was put there as a part of the post/page content and is not a part of your site's layout. That's because it's "glued" to the blocks (elements) that are above it. However, I've added following line to your slider's custom css ("Master Slider -> Master Slider -> [selected slider] -> Slider settings"):

    #bottom-black-bar {margin-top:20px;}

    This seems to be sorting this out but you may want to adjust the "20px" value by yourself. The rule is there twice - one time for screens up to 360px wide and second for screens up to 768px wide; these values can be adjusted separately depending on how does it all look like on different screens.

    Best regards,
    Adam

  • Jonathan
    • The Crimson Coder

    OK, it's a little better that the black dots are not in the middle of the text. However, when on a smartphone, the longer quote goes long enough that the back bar is now pushed off the screen. How could I get the bar to be the footer, so that the problem and the previous one (the small white line underneath) is resolved.
    Also, you did not address the weird white right arrow to the right of the slider on smartphones, I've attached a screenshot

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan!

    "Master slider" and "Divi" theme are not ones of our products and when it comes to third party products (including premium products such as Divi theme) we often aren't familiar enough with it to provide support. I know I suggested "Master Slider". I did this because you asked for slider that would let you differentiate display times for single slides. That said, I'm really happy I could help you with customizing it so far.

    As for that arrow you mentioned. I'm sorry, I just didn't noticed it while testing the site with Firefox "responsive view" mode. I have now tested it again using my Lumia smartphone and I can confirm it was there. In order to fix it, I've added another CSS rule to your slider that's hiding navigation arrows for screens of width up to 360px; This seems to work fine now.

    As for the "black bar". As the slides are of different height, it's moving up and down because it's an image added to page content directly. You could try instead putting it into the theme's footer template file and this should fix the issue, I think.

    In order to do this, you would want to create child theme of your current theme and then copy footer.php file to your child theme and insert the "black bar" image there using HTML.

    Here's more information on child theme creation:
    https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/

    This "custom page templates" guide may be handy here also:
    https://premium.wpmudev.org/blog/creating-custom-page-templates-in-wordpress/

    If you need further assistance on this it's best to contact your theme's developer or support team. They will know the product best and should be able to help you out.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.