1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Divi Slider Arrows Visibility

Discussion in 'Free Divi Community Forum' started by Constantine, Mar 25, 2023.

  1. Constantine

    Constantine New Member

    Hello Dear Divi.Help Team!

    So, I have a question regarding the possibility to hide Prev/Next arrows depending on the slide order.
    For example, I want to show ONLY the Next arrow on Slider #1, and ONLY the Prev arrow on Slider #3 (the last one)

    I have tried next:

    div[data-slide-id="et_pb_slide_0"] .et-pb-slider-arrows .et-pb-arrow-prev{
    display:none !important;
    }

    div[data-slide-id="et_pb_slide_2"] .et-pb-slider-arrows .et-pb-arrow-next{
    display:none !important;
    }

    But with no luck... When I emulate the same tree at CodePen it works fine.

    Could you suggest any options, please?

    Best regards,
    Constantine.


    P.S: Sorry! Solved it once I send the message, LOL.
    Everything works just fine, I just took a wrong attribute. it should be DATA-ACTIVE-SLIDE-ID

    The right code is

    div[data-active--slide-id="et_pb_slide_0"] .et-pb-slider-arrows .et-pb-arrow-prev{
    display:none !important;
    }

    div[data-active-slide-id="et_pb_slide_2"] .et-pb-slider-arrows .et-pb-arrow-next{
    display:none !important;
    }
     
    #1 Constantine, Mar 25, 2023
    Last edited: Mar 25, 2023
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Freelancer' Divi layout for all Pro members:View Demo
  2. davidoliver

    davidoliver New Member

    The Divi Slider allows you to display up to five slides at a time, with various controls for transitioning between slides. One setting you can adjust is the visibility of the slide arrows, which can be helpful if you want to focus on a particular element on the page.

    To adjust the slider arrows visibility, go to the Divi Slider Settings page and look for the 'Arrows Visibility' setting. From there, you can choose to show or hide the arrows, and you can also choose to only show the arrows on hover.

    If you're not sure what setting is best for your site, we recommend testing out a few different options to see what works best.
     
    #2 davidoliver, Mar 26, 2023
  3. Divi.Help

    Divi.Help Administrator
    Staff Member

    It should be something like this:

    .et_pb_slider[data-active-slide="et_pb_slide_0"] .et-pb-slider-arrows .et-pb-arrow-prev {
    display: none!important;
    }
     
    #3 Divi.Help, Apr 3, 2023
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
(You must log in or sign up to post here.)