Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialJames Wrest
3,480 PointsCarousel-Slick- when i try to remove the arrows by putting in arrows:false, it the everything but the buttons?
Any idea what this issue is here?
7 Answers
Gary Calhoun
10,317 PointsTry this
button.slick-prev.slick-arrow {
background-color: white;
}
.slick-prev:before, .slick-next:before {
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: none;
}
Gary Calhoun
10,317 PointsHi when I have issues I compare the project files to my own code. I would say though just make sure your last object doesn't have a comma, make sure everything is spelled correctly. If you still have issues post the code and I will look at it for you.
James Wrest
3,480 PointsHi
have the that correct i think, I think it has something to do with the display settings? if i make the top arrow button. button.slick-prev.slick-arrow{display:none;} it removes the whole carousel
this is the site http://www.vestedutility.com.au/
code <div class="slides">
<div class="slide blue">
<div class="grid-half">
<h7><span>Sorrento Region – Perth City</span></h7>
<h7 class="h7"><span>Local tradesmen</span> </h7>
<img src="img/City of perth.jpg" alt="City of Perth Electricians" />
</div>
</div><!--/Slide 1-->
<div class="slide orange">
<div class="grid-half">
<h7 class="h7"><span>Coolup Region – Mandurah Bridge</span></h7>
<h7><span>Fast response</span></h7>
<img src="img/City of perth.jpg" alt="Coolup Region looking at Mandurah bridge" />
</div>
</div><!--/Slide 2-->
<div class="slide green">
<div class="grid-half">
<h7 class="h7"><span>Jindalee Region – Mindarie</span></h7>
<h7><span>Quality workmanship</span></h7>
<img src="img/City of perth.jpg" alt="Electrician Jundalee region" />
</div>
</div><!--/Slide 3-->
<div class="slide yellow">
<div class="grid-half">
<h7><span>Fremantle Region – Fremantle Café Strip</span></h7>
<h7 class="h7"><span>Expert advice</span></h7>
<img src="img/City of perth.jpg" alt="Electrician fremantle cafe strip" />
</div>
</div><!--/Slide 4-->
</div>
<script src="../js/jquery-1.11.2.min.js"></script> <script src="../js/slick/slick.min.js"></script> <script> $('.slides').slick({ fade: true, /autoplay:true, autoplaySpeed: 2000,/ /arrows:false,/ dots:true, pauseOnHover:true
});
</script>
Gary Calhoun
10,317 PointsWhen I test the link I don't see any arrows. It seems to be working now. You shouldn't have to target the arrows to display:none with css code because the author of the plugin incorporated the ability to have the hide or display using arrows:false which you have in the code above you posted put its commented out. To center the slider this should work as well.
.slick-slide img {
position: relative;
margin: auto;
}
James Wrest
3,480 Pointsin the white space there is the arrow ive given a red back ground, commented it out as it wont show with it?
James Wrest
3,480 Pointsthat worked it also worked changing the position to relative or the z-index
the main cause of the issue is a css file that mixes with the carousel once I removed that css file it fixed it ive just got to figure out which code in that file is clashing
cheers
Gary Calhoun
10,317 PointsIf its clashing with another rule try adding !important to it example
display:none !important;
James Wrest
3,480 Pointsit was my .block div if i removed it in the css the carousel showed up, however it then messed up the heading not sure how the .block div messed it up. So instead I added div class=header-padding under my heading and adjusted the padding depending on the screen size it seams to work!
Gary Calhoun
10,317 PointsOh ok thats weird, but at least you got it working!
James Wrest
3,480 Pointsyea!!! thats the main thing