I came across this http://kenwheeler.github.io/slick and would love to be able to add the ‘fade’ version to a site. I’ve tried copying the source code (as well as following their ‘Getting Started’ guide) but can’t get it to work.
The images/divs load but there are no arrows or dots 
Can you post a link to this not working for you?
I can’t post a link as it’s on a private network at the moment while we’re in testing but I’ve uploaded the file anyway.
The previous/next buttons show but no dots at all. Also the div doesn’t scroll on it’s own if no buttons are clicked.scroll.html (1.5 KB)
Also when I click the arrows the next div is shown underneath the first rather than over the top of it
The slides (slick-slide) should be floated left. Make sure that slick.css and slick-theme.css files load successfully!
Thank you, I hadn’t noticed that. It now works as I want it too. Thanks
Sorry to come back to this, but I’m trying to add responsiveness to this but when I try nothing happens. The code I’m using is:
<script type="text/javascript">
$(document).ready(function(){
$('.cycler').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed: 7000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
</script>
The syntax is correct, so must be something else?
Can you post enough code that we can recreate the problem?
Thanks for helping with this.
The code is dynamically generated but this is the raw code:
<div id="cycler" class="cycler">
<?php shuffle($block); foreach( $block as $key=>$value2 ) { ?>
<div>
<a href="<?php echo $value2['link'] ?>" onclick="return clicktrack( 'tab',<?php echo $value2['id'] ?>,'' );" target="_blank"><h1 class="slide_title"><?php echo htmldisplay( $value2['text'] ) ?></h1><p class="slide_text"><?php echo htmldisplay( $value2['description'] ) ?></p><img src="/images/<?php echo $value2['image'] ?>" alt="<?php echo htmldisplay( $value2['title'] ) ?>" title="<?php echo htmldisplay( $value2['title'] ) ?>" height="400" width="984" border="0"/></a>
</div>
<?php } ?>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="javascript/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.cycler').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed: 7000,
});
});
</script>
Other than the css that is in the example the only other css I have is controlling the cycler div and that is:
#cycler{position:relative;width:984px;height:400px;border-bottom:1.5px groove #727273;}
#cycler div{position:absolute!important;z-index:1;background-color:black}
#cycler div p{position:absolute;top:200px;right:-640px;color:white;margin:0;}
#cycler div.active{z-index:3}
#cycler img{display:block}
I’m afraid that code doesn’t really help us to see what is going on.
It’s not clear which markup the PHP is outputting and you’re referencing local files on your server.
Could you post a link (or PM me one)?
Unfortunately I can’t give a link because it’s on a local server at the moment but this is the code that is rendered on the page:
<div id="cycler" class="cycler slick-initialized slick-slider" role="toolbar"><button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>
<div aria-live="polite" class="slick-list draggable"><div class="slick-track" role="listbox" style="opacity: 1; width: 0px;"><div class="slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; -webkit-transition: opacity 500ms linear; transition: opacity 500ms linear;">
<a href="/competitions" onclick="return clicktrack( 'tab',5,'' );" tabindex="-1"><h1 class="slide_title"></h1><p class="slide_text"></p><img src="/images/win.jpg" alt="Win" title="Win" height="400" width="984" border="0"></a>
</div><div class="slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" tabindex="0" role="option" aria-describedby="slick-slide01" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;">
<a href="/shop" onclick="return clicktrack( 'tab',1,'' );" tabindex="0"><h1 class="slide_title"></h1><p class="slide_text"></p><img src="/images/shop.jpg" alt="Shop" title="Shop" height="400" width="984" border="0"></a>
</div></div></div>
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button><ul class="slick-dots" role="tablist" style="display: block;"><li class="" aria-hidden="true" role="presentation" aria-selected="true" aria-controls="navigation00" id="slick-slide00"><button type="button" data-role="none" role="button" aria-required="false" tabindex="0">1</button></li><li aria-hidden="false" role="presentation" aria-selected="false" aria-controls="navigation01" id="slick-slide01" class="slick-active"><button type="button" data-role="none" role="button" aria-required="false" tabindex="0">2</button></li></ul></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://github.com/kenwheeler/slick/blob/master/slick/slick.js"></script>
<style type="text/css">
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 50px;
height: 50px;
margin-top: -10px;
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: robotolight,tahoma,geneva,arial,helvetica,sans-serif;
font-size: 50px;
line-height: 1;
opacity: .5;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: 0;
z-index: 2;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '❮';
}
[dir='rtl'] .slick-prev:before
{
content: '❯';
}
.slick-next
{
right: 0;
z-index: 2;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '❯';
}
[dir='rtl'] .slick-next:before
{
content: '❮';
}
/* Dots */
.slick-slider
{
/* margin-bottom: 30px; */
}
.slick-dots
{
position: absolute;
bottom: 5px;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 20px;
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 0px;
content: '○'!important;
text-align: center;
opacity: 1;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: 1;
color: white;
font-size: 30px;
content: '•'!important;
}
#cycler{position:relative;width:984px;height:400px;border-bottom:1.5px groove #727273;}
#cycler div{position:absolute!important;z-index:1;background-color:black}
#cycler div p{position:absolute;top:200px;right:-640px;color:white;margin:0;}
#cycler div.active{z-index:3}
#cycler img{display:block}
button.slick-prev.slick-arrow{left:10px;z-index:2;}
button.slick-next.slick-arrow{right:-10px;z-index:3;}
.slick-dots{bottom:-1px;height:15px;z-index:4;}
li::before{content: ''!important;}
.slide_title{right:-500px!important;}
</style>
Hi,
Thanks for that, but it doesn’t help overly much to recreate your problem.
The first thing I notice is that this code is missing jQuery (on which Slick relies). Also you cannot include slick.js directly from GitHub in this way (at least Chrome complains about MIME type checking) and the images are referenced locally on your server.
Try and put together something like this to demonstrate your issue.
Thanks, I’ll have a look at creating it there.The slick.js is hosted on our server but put that link there to show it was there, I must have forgotten to include the jQuery though.
Thanks for helping with this, I appreciate it
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.