Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 27, 2023 at 5:59 pm #1428916
    sophiasbiti

    Hello–

    Is there a way to place the navigation arrows on the outside of the post slider? (Essentially, I want to avoid having the arrows placed over my images.) I’d also like the arrows to appear simple: black font with no box outline or background around them. Essentially, the same styling as the arrows in the Testimonial Slider (Large)

    I want to do this on all pages where my slider appears – so thinking I may need to customize the slider element universally on my site.

    (The slider I am referring to displays posts AND portfolio entries, to be clear.)

    Thanks in advance for your support!

    December 29, 2023 at 11:05 am #1428991
    Guenni007

    you can try that in quick css:
    But maybe that is only nice for wide screens – if there is not enough space it will be not advisable 

    @media only screen and (min-width:1300px)  {
  #top .avia-content-slider {
    overflow: visible !important;
  }
  #top .avia-content-slider .avia-slideshow-arrows a.prev-slide {
    left: -70px;
  }
  #top .avia-content-slider .avia-slideshow-arrows a.next-slide {
    right: -70px;
  }
  #top .avia-content-slider .avia-slideshow-arrows a.prev-slide:before{
    text-indent: 15px;
  }
  #top .avia-content-slider .avia-slideshow-arrows a.next-slide:before {
    text-indent: -15px;
  }
}

    Select an alternative value for 1300px for your installation

    December 30, 2023 at 2:15 pm #1429021
    Mike

    Hi,
    Thanks for sharing Guenni007, since you also want a simple black arrow with no outline also add this css to Guenni007’s:

    #top .avia-slideshow-arrows a {
    color: #000;
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    March 7, 2024 at 6:42 pm #1436662
    sophiasbiti

    I couldn’t get this to work. I am trying to achieve something similar to Content slider style – 2 on this https://kriesi.at/documentation/enfold/content-slider/#toggle-id-3 (basically the same outcome minus the background color).

    I’m not sure if the same style can be applied to the post slider, but that would be ideal as I don’t want the arrows appearing over my post preview images. Or to have a background color unless hovered over.

    March 8, 2024 at 8:11 am #1436701
    Ismael

    Hi,

    Thank you for the update.

    The arrows are not rendering correctly when we checked the About Page. Did you add this css code?

    #top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a.prev-slide:before {
    content: 'e874';
}

    If you want to change the next and previous arrow, you can use the avf_default_icons filter in the functions.php file instead. Make sure to adjust the value of the icon attribute. 

    function avf_default_icons_mod($icons) {
	$icons['next'] = array( 'font' => 'entypo-fontello', 'icon' => 'ue879' );
	$icons['prev'] =array( 'font' => 'entypo-fontello', 'icon' => 'ue878' );
	return $icons;
}
add_filter('avf_default_icons','avf_default_icons_mod', 10, 1);

    To make sure that the arrows are visible outside the slider, add this css code:

    #top .avia-slideshow-arrows.avia-slideshow-controls {
    overflow: visible;
}

    Best regards,
    Ismael

    April 2, 2024 at 2:52 am #1438945
    blaisen

    Once the code is used and the navigation is outside the slider, how can I remove or style the circles surrounding the arrows?

    April 2, 2024 at 8:24 am #1438961
    Ismael

    Hi,

    You can use this css code to remove the background or hide the circle:

    .avia-slideshow-arrows a:before {
    background: transparent;
}

    If you have more questions, please feel free to open another thread.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Navigation Arrows to the side – Post Slider’ is closed to new replies.