Remove arrows from specific (not from all) sliders

[Robert]

Can someone please give me example CSS for removing the previous/next arrows from a slider? This is so I can create a custom style to apply when they’re not required – i.e. when there are just two images.

Many thanks.
Robert

[J. Davis]

Hi Robert,

You can go to MotoPress > Settings, find Custom CSS code field and add the code below:

.motopress-image-slider-obj .flex-direction-nav{
display:none !important;
}

Save changes and preview the slider. The Slider arrows should be hidden now.

[Robert]

Many thanks

That does work, but appears to affect every slider. How can I make it affect one specific slider and leave arrows on the rest?

🙂
Robert

[J. Davis]

Hi Robert,

In this case you need to make your certain slider unique and apply a custom class for Row of your slider e.g. .hide_arrows. Please try to add the code below to MotoPress>Settings>’Custom CSS code’ field:

.hide_arrows .flex-direction-nav{
display:none !important;
}

Then launch MotoPress editor on page with your slider, select a row and apply class ‘hide_arrows’ without quotes. Save changes and preview your website.

Best regards,
John

[Robert]

Many thanks!

I understand now, and it works on the site.

I am gradually getting the hang of using the custom CSS to achieve these things, but that one had me stumped.

🙂
Robert

[Christianne BOHR]

I am trying to replace the nav arrows that lead to the next slide with just words NEXT and Back how do I do that? or an arrow and next would be great too! next> and it work as a button to next slide photo. next> and <back

[J. Davis]

Hi Christianne,

Your question is related to MotoPress Slider plugin and not to Slider element of Content Editor plugin. Hello Christianne,

The slideshow is going due to script and not a link. You can not simply link the button to switch to certain slide. You can just create your Next and Prev images, put them to wp-content folder and edit slider styles to change arrow images with your own e.g.

.ms_next {
background: url(URL of Your 'Next' Image) no-repeat scroll center center/32px auto transparent;
}

.ms_prev {
background: url(URL of Your 'Prev' Image) no-repeat scroll center center/32px auto transparent;
}

Best regards,
John Smith

[Author]

Posts