Ask your WordPress questions! Pay money and get answers fast! (more info)

Need help with Slick Slider Carousel implimentation WordPress

  • SOLVED

I need a responsive, variable width carousel similar to the site below:

http://caseyleighessentials.com

I'm trying to implement the Slick Slider, but have run into two problems:

1) I don't know how to properly enqueue the scripts for WordPress in my functions.php file.

2) I can't get the carousel to maintain aspect ratio. Here's the code I'm using:



<!DOCTYPE html>
<html>
<head>
<title>Test Slick Slider</title>
<link rel="stylesheet" type="text/css" href="slick.css"/>
</head>
<body>

<div class="slider variable-width">
<div ><img src="_MG_0008-2post.jpg"></div>
<div ><img src="_MG_0040.jpg"></div>
<div ><img src="_MG_0062edit.jpg"></div>
<div ><img src="_MG_0071.jpg"></div>
<div ><img src="_MG_0107-4edit.jpg"></div>
<div ><img src="_MG_0195-2edit.jpg"></div>
<div ><img src="_MG_0260ed.jpg"></div>
<div ><img src="_MG_0373ed.jpg"></div>


</div>


<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.variable-width').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: true,
arrows: true,

});
});
</script>


</body>
</html>



If anyone can show me how to enqueue the files and also how to fix the variable width, aspect ratio thing, that's what I'm after. I've uploaded a zip file of the plain HTML stuff. My functions.php enqueue area currently looks like this:



/**
* Enqueue scripts and styles.
*/
function sandi_boudreau_scripts() {
wp_enqueue_style( 'sandi-boudreau-style', get_stylesheet_uri() );
wp_enqueue_style( 'app', get_stylesheet_directory_uri() . '/assets/app.css' );
wp_enqueue_script( 'sandi-boudreau-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'sandi-boudreau-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'sandi_boudreau_scripts' );



Answers (1)

2016-03-08

Rempty answers:

When you say about aspect ratio, do you refer to responsive views?
if yes use this html

<!DOCTYPE html>
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick.css"/>
<style>
.slider.variable-width{
width:100%;
}
.slider.variable-width img{
max-width:100%;
}
</style>
</head>
<body>

<div class="slider variable-width">
<div ><img src="_MG_0008-2post.jpg"></div>
<div ><img src="_MG_0040.jpg"></div>
<div ><img src="_MG_0062edit.jpg"></div>
<div ><img src="_MG_0071.jpg"></div>
<div ><img src="_MG_0107-4edit.jpg"></div>
<div ><img src="_MG_0195-2edit.jpg"></div>
<div ><img src="_MG_0260ed.jpg"></div>
<div ><img src="_MG_0373ed.jpg"></div>


</div>


<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.variable-width').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
responsive: [

{
breakpoint: 600,
settings: 'unslick'
}


]
});
});
</script>


</body>
</html>


Kyler Boudreau comments:

No, I mean just in normal view. If you open up the index file in a browser other than Firefox, the images are distorted. It's not adjusted the width and height correctly.


Rempty comments:

ok, please use this html

<!DOCTYPE html>
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick.css"/>
<style>
.slider.variable-width{
width:100%;
}
.slider.variable-width img{
max-width:100%;
width:auto!important;
}
</style>
</head>
<body>

<div class="slider variable-width">
<div ><img src="_MG_0008-2post.jpg"></div>
<div ><img src="_MG_0040.jpg"></div>
<div ><img src="_MG_0062edit.jpg"></div>
<div ><img src="_MG_0071.jpg"></div>
<div ><img src="_MG_0107-4edit.jpg"></div>
<div ><img src="_MG_0195-2edit.jpg"></div>
<div ><img src="_MG_0260ed.jpg"></div>
<div ><img src="_MG_0373ed.jpg"></div>


</div>


<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.variable-width').slick({
dots: false,
infinite: true,
adaptiveHeight: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
</script>


</body>
</html>


Kyler Boudreau comments:

that worked!

do you know how to enqueue the script?


Rempty comments:

Yes, first create a folder called stickslider inside your template folder.
and copy slick.min.js and slick.css, modify your slick.css and add this css

.slider.variable-width{
width:100%;
}
.slider.variable-width img{
max-width:100%;
width:auto!important;
}

Create file called load-slickslider.js and copy this code

jQuery(document).ready(function(){
jQuery('.variable-width').slick({
dots: false,
infinite: true,
adaptiveHeight: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});

Copy this file to stickslider folder

Now to enqueue the scripts, add this code to your function sandi_boudreau_scripts()

wp_enqueue_style( 'slick-styles', get_stylesheet_directory_uri() .'/stickslider/slick.css' );
wp_register_script(
'slick-js',
get_stylesheet_directory_uri() . '/stickslider/slick.min.js',
array( 'jquery' )
);
wp_enqueue_script( 'slick-js' );
wp_register_script(
'slick-jsloader',
get_stylesheet_directory_uri() . '/stickslider/load-slickslider.js',
array( 'jquery' )
);
wp_enqueue_script( 'slick-jsloader' );


Now in your template file you need to add the html manually to show the slider.


Kyler Boudreau comments:

you rock.