MENU

slickslider

03/05/2016

Simple responsive slick slider usage

A basic example of php dynamically generating html for slickslider, which slickslider is then applied to via JavaScript and then customed by editing the slickslider's "slickslider-theme.css" file. I also let some styles from the main site filter through into it.

HTML

<div id="main-article" class="outer-container">
	<div class="inner-container">
		<div id="slider-demo">
		<div class='slide'><a href='slide01.jpg' target='_blank'><img src='slide01.jpg'></a></div>
		<div class='slide'><a href='slide02.jpg' target='_blank'><img src='slide02.jpg'></a></div>
		<div class='slide'><a href='slide03.jpg' target='_blank'><img src='slide03.jpg'></a></div>
		<div class='slide'><a href='slide04.jpg' target='_blank'><img src='slide04.jpg'></a></div>
		<div class='slide'><a href='slide05.jpg' target='_blank'><img src='slide05.jpg'></a></div>
		<div class='slide'><a href='slide06.jpg' target='_blank'><img src='slide06.jpg'></a></div>
		<div class='slide'><a href='slide07.jpg' target='_blank'><img src='slide07.jpg'></a></div>
		<div class='slide'><a href='slide08.jpg' target='_blank'><img src='slide08.jpg'></a></div>
		<div class='slide'><a href='slide09.jpg' target='_blank'><img src='slide09.jpg'></a></div>
		<div class='slide'><a href='slide10.jpg' target='_blank'><img src='slide10.jpg'></a></div>
		</div>
	</div>
</div>

DHTML / PHP Rendered HTML

<div id="main-article" class="outer-container">
	<div class="inner-container">
		<div id="slider-demo">
<?php

for ($i = 1; $i <= 10; $i++) {
	$no = $i;
	if ($i<10){
		$no = "0" . $i;
	}
	// You will need to edit this for you image path (see commented out lines)
	$src = $this->data["article_path"] . "slide" . $no . ".jpg";
	//$src = "slide" . $no . ".jpg";
	echo("\t\t<div class='slide'><a href='" . $src . "' target='_blank'><img src='" . $src . "'\></a></div>\n");
}
?>		
		</div>
	</div>
</div>

CSS

#main-article .outer-container {
	display: block;
	width: 100% !important;
}

#main-article .inner-container {
	display: block;
	min-width: 320px;
	width: 80% !important;
	margin: auto;
}

#slider-demo {
	height: 240px !important;
}

#slider-demo .slide {
	height: 240px !important;
	overflow: hidden;
}

#slider-demo img {
	display: block;
	width: 500px !important;
	text-align: center !important;
}

#slider-demo img:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
}

JavaScript

$(document).ready(function($){
	$('#slider-demo').slick({
		dots: true,
		infinite: false,
		slidesToShow: 4,
		slidesToScroll: 3,
		infinite: true,
		arrows: true,
		dots: false,
		responsive: [
			{
			breakpoint: 1024,
			settings: {
				slidesToShow: 3,
				slidesToScroll: 3,
				infinite: true,
				arrows: true,
				dots: false,
				}
			},
			{
			breakpoint: 600,
			settings: {
				slidesToShow: 2,
				slidesToScroll: 2,
				arrows: false,
				dots: true,
				}
			},
			{
				breakpoint: 480,
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1,
					arrows: false,
					dots: true,
				}
			}
		// You can unslick at a given breakpoint now by adding:
		// settings: "unslick"
		// instead of a settings object
		]
	});
});

Remember

The HTML image tag should have the ALT attribute set, I've not done this in the example to keep things cleaner for illustrative purposes.
AFTC Framework: Page was generated in 0.0142 seconds. 1&1 Virtual Cloud Servers.