Okay
  Public Ticket #214855
Nectar Slider next/prev arrows fly-out - can remove?
Closed

Comments

  • David started the conversation
    May 15, 2014 at 6:21pm

    Hi there, my client does not like the fly-out that appears when mousing over the next/prev arrows on the slider. The fly-out is a black rectangle that animates outward and indicates the slide the user is on and then the total amount of slides like this: "2/6". I would like to remove this. Could you please tell me how? The client only wants the arrows with no animation.

  •  9,001
    Tahir replied
    May 16, 2014 at 5:14pm

    Hey David!

    Add this into the Custom CSS box located in your Salient Options panel :

    .swiper-container .slider-prev, .swiper-container .slider-next {
    display:none !important;
}

    Cheers

    ThemeNectar Support Team 

  • David replied
    May 16, 2014 at 6:29pm

    Thanks, but that got rid of the arrow navs completely. We only want to get rid of the animated fly-outs, but keep the static arrow navigation. Any ideas?

  •  9,001
    Tahir replied
    May 17, 2014 at 1:18am

    Hey Again!

    Add this instead:

    .swiper-container .slider-prev, .swiper-container .slider-next {
   width:50px !important;
}


.swiper-container .slider-next .slide-count,.swiper-container .slider-prev .slide-count{
    display:none;
}

    Cheers

    ThemeNectar Support Team 

  • David replied
    May 20, 2014 at 12:13am

    Perfect! Thanks....

  • Colleen replied
    October 31, 2014 at 10:33pm

    This is what I needed too. Thanks!

  • Ryhawk replied
    July 23, 2018 at 3:40am

    any way to do it for mobile as well?

  •  75
    Scott replied
    July 23, 2018 at 7:49am

    Hey there,

    Thanks for reaching in,

    Please send a link to your website so we can check this out for you,

    Regards

    Themenectar Support Team

  • Ryhawk replied
    July 23, 2018 at 11:01pm

    www.landom.com.au/mspsv2 

    Have removed the arrows using the code below for the website but still there on mobile version

  •  75
    Scott replied
    July 24, 2018 at 7:39am

    Hey Ryhawk,

    Thanks for reaching in,

    Please try this CSS,

    @media only screen and (max-width: 690px) {
.nectar-slider-wrap[data-overall_style="directional"] .swiper-container .slider-prev i {
    display:none!important;
}
}
@media only screen and (max-width: 690px) {
.nectar-slider-wrap[data-overall_style="directional"] .swiper-container .slider-next i {
    display:none!important;
}
}

    Hope this helps,

    Regards

    Themenectar Support Team