Slick Carousel not Working Properly w/ Default Styles
Question
My code:
<html>
<head>
<link rel="stylesheet" type='text/css' href='../style.css'>
<link rel="stylesheet" type='text/css' href='//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick.css'>
<link rel="stylesheet" type='text/css' href='//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick-theme.css'>
</head>
<body>
<div class="slideCont">
<div class="slider-info">
<div>Info</div>
<div>Info2</div>
<div>Info3</div>
<div>Info4</div>
</div>
<div class="slider-img">
<div>Img</div>
<div>Img2</div>
<div>Img3</div>
<div>Img4</div>
</div>
</div>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=jquery&file=jquery.min.js"></script>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=jquery-migrate&file=jquery-migrate.min.js"></script>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick.min.js"></script>
<script>
$(document).ready(function(){
$('.slider-info').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-img'
});
$('.slider-img').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-info',
dots: true,
centerMode: true,
focusOnSelect: true
});
});
</script>
</body>
</html>
This is meant to be like the Slider Syncing sample on here: http://kenwheeler.github.io/slick/ (near the bottom of the examples)
My code can be seen live here: http://new.unreal-designs.co.uk/portfolio/ but the each slide is full width, rendering it rather useless.
Style.css only contains basic stuff that shouldn't effect the slider in any way.
1 answers
solution1
0 2016-04-14 18:42:44
Ok, so after playing around I think I've found the issue. Slick isn't changing the height of the slides to fit the content, thus the slide fills the page -.-
Not sure how to fix this though in JS.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.