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)
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.