Hide the Slider Controls

by Dave Bardell|Published 18 October 2013

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

3.2.*/3.3.* code

/* START OF Hide the Slider Controls */
/* All Carousels */
.tc-carousel-control {
display:        none;
}

/* Front-page Carousel only */
.home .tc-carousel-control {
display:        none;
}
/* END OF Hide the Slider Controls */

3.1.* code

/* START OF Hide the Slider Controls */
/* All Carousels */
.carousel-control {
display:        none;
}

/* Front-page Carousel only */
.home .carousel-control {
display:        none;
}
/* END OF Hide the Slider Controls */

AUTHOR

Dave Bardell

My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme in July 2013. Have learnt a lot from other Supporters (@ElectricFeet, @acub, @tomaja, and the maestro @d4z_c0nf, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com

0 posts

4 thoughts on “Hide the Slider Controls”

4 comments

Angelo Lazzari
30 October 2014, 9 h 58 min
Hi,
i just wanted to remove the slider commands on every slide but i put the:
```
/* All Carousels */
.carousel-control {
display:        none;
}
```
but it doesn’t work. I put in the custom css section of the theme and directly in the style.css editor. i’m using a Customizr child theme.

Thanks!
- Nicolas
  30 October 2014, 11 h 57 min
  
  Hi Angelo,
  Since v3.2+, the new css code to hide those controls is :
  /* All Carousels */ .tc-slider-controls { display: none; }
  
  Thanks for reporting this!
Marcus
11 November 2013, 17 h 14 min
Thank you for this helpful advice. It saves a lot of time.

There is a small typo. In the second rule, the descendant selector should have a space between the 2 class names. Otherwise, it does not work properly. This one works:
```
.home .carousel-control {
	display: none;
}
```
- Nicolas
  12 November 2013, 10 h 33 min
  
  Thanks for pointing this out Marcus

Comments are closed.