Ninja Slider / Posts /

making the arrows more prominent?

I'm using your slider and its great - but where do I go to enlarge the click arrows on mobile devices? They're fine on the desktop, but need to be bigger on a phone.
kev  10 years ago   viewed: 8497    

2 Answers


If you are talking about the navigation pagers for smartphone, please visit How to make the navigation pagers larger in mobile devices

You can use media query in your ninja-slider.css file to make a separate copy for the navigation control styles (suppose you have a larger navs-for-mobile.png image):

@media only screen and (max-width: 533px) { #ninja-slider-prev, #ninja-slider-next { width:100px; height:100px; background-image: url(img/navs-for-mobile.png); } #ninja-slider-prev:hover {background-position:0 -100px;} #ninja-slider-next { right: 0; background-position:-100px 0; } #ninja-slider-next:hover {background-position:-100px -100px;} }
Milo   10 years ago

Enlarging the click arrows on a slider for mobile devices typically involves adding custom CSS styles to override the default styles. To do this, you'll need to inspect the HTML and CSS of your slider to identify the appropriate elements and classes to target. Here are some general steps to follow:

  1. Inspect the Elements: Use your browser's developer tools (usually accessible by right-clicking on the slider and selecting "Inspect" or pressing F12) to inspect the HTML structure of the slider and find the specific elements for the click arrows.

  2. Identify the CSS Classes: Look for the CSS classes or IDs associated with the arrows. These classes are used to style the arrows.

  3. Add Custom CSS: Once you've identified the classes, you can add custom CSS styles to enlarge the arrows. Here's an example of what the CSS might look like:

/* Increase the size of the arrows on mobile devices */ @media (max-width: 768px) { .slider-arrow { font-size: 24px; /* Adjust the font size to make the arrows larger */ /* Add any other styling as needed */ } }

In this example, we're using a media query to target screens with a maximum width of 768 pixels, which typically corresponds to mobile devices. Adjust the font-size property to make the arrows larger, and you can also apply additional styling as needed.

  1. Include the CSS: Make sure to include this custom CSS in your website or application. You can do this by adding it to your site's existing CSS file or by including it in a <style> tag within your HTML document.

  2. Test and Adjust: After adding the custom CSS, four in a row test your slider on mobile devices to ensure that the arrows are now the desired size. You may need to fine-tune the styles until you achieve the desired appearance.

Keep in mind that the specific CSS classes and structure of your slider may vary depending on the slider plugin or library you are using. Be sure to adapt the above steps to match the structure and classes of your particular slider. If you provide more details about the slider you're using, I can offer more specific guidance.

  9 months ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: