CLIENT PROJECT: SLICK CAROUSEL

slick

The next stage for me was to implement the slick carousel for my testimonial block, before writing any of my own code to get the carousel working I had to download the slick carousel files and implement them into my file tree of the 80 Days Bier Haus website.

Here are the files that come attached with the slick carousel:

slicky

The two files highlighted are slick.js and slick.css these two files are essential for slick to work, and must be placed into the file tree of your website preferably in a folder titled scripts or js. Once these files are implemented into your file tree the next step is to go into your index.html file and link the files like this:

The Javascript link always goes before the closing body tag:

slicky2

And then the CSS link inside of the head tag:

slicky3

Now the files are linked it is time to begin implementing the HTML code to allow the Carousel to work.

HTML

Within the HTML document the next step is to insert the elements you want to work with the slick carousel within a container that you can title yourself.

slicky4

JAVASCRIPT

After you have set up slick within your HTML you then have to link the class of your slick slider into the javascript. Making sure that its linked up correctly to slick, you can then add the JAVASCRIPT functions such as adding the dots bellow and making it autoplay.


slicky7

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s