I'm trying to center a couple of images in a carousel with slickJS, however it is not properly centering the images due to the left offset being wrong. Anyway to fix this? Any recommendations of a JavaScript carousal that actually does the job? I pulled the code directly from the slick website and it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="/app/source/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/app/source/slick/slick-theme.css"/>
<style>
</style>
</head>
<body>
<div class="center">
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/app/source/slick/slick.min.js"></script>
<script type="text/javascript">
//straight from the website
$(document).ready(function(){
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>
Result:
As you can see it is not aligning to the center properly and you can even see alittle of the 4th slide even though it is set to show only 3 slides. Any help is greatly appreciated!
The reason you are seeing the partial views of the edge images is because you have centerMode enabled in your setting, either remove it or set it to false to get rid of that edge view. Additionally, its not that the divs are taking up unequal widths, its that the images inside them are floating to the left, so it looks like there is extra space to the right, after the last image. To fix this just center the image withing its parent div using margin:auto.
$(document).ready(function() {
$('.center').slick({
//centerMode: true,
//centerPadding: '160px',
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
//centerMode: true,
//centerPadding: '140px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
//centerMode: true,
//centerPadding: '40px',
slidesToShow: 2
}
}
]
});
});
img{
margin:auto;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="center">
<div><img src="http://loremflickr.com/320/240?1" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?2" alt="shrimp"></div>
<div><img src="http://loremflickr.com/320/240?3" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?3" alt="shrimp"></div>
<div><img src="http://loremflickr.com/320/240?4" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?5" alt="shrimp"></div>
</div>
Related
JS noob here. I'm sorry if the answer is obvious, but I can't figure out why my slick carousel won't load. I've tried everything I can think of, but I'm at a loss. Please help me! Also, any recommended crash courses to understand the basics better would help greatly.
jQuery(document).on('ready', function() {
jQuery(".slickshow").slick({
lazyLoad: 'ondemand',
slide: '.slide',
autoplay: true,
autoplaySpeed: 5000,
dots: true,
prevArrow: '❮',
nextArrow: '❯',
speed: 1000,
fade: true,
cssEase: 'linear',
slidesToShow: 1,
adaptiveHeight: true,
swipe: true,
swipeToSlide: true,
infinite: true
});
});
// On swipe event
jQuery('.slickshow').on('swipe', function(event, slick, direction) {
console.log(direction);
// left
});
// On edge hit
jQuery('.slickshow').on('edge', function(event, slick, direction) {
console.log('edge was hit')
});
// On before slide change
jQuery('.slickshow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
console.log(nextSlide);
});
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
<section class="slickshow carousel">
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">
<h2>SUMMERTIME SAVINGS</h2>
<p>100s of Items On Sale!</p>
<p>Shop the Sale Now!</p>
</div>
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Another+One">
</div>
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">
<h2>MORE SAVINGS</h2>
<p>More Text Too!</p>
<p>Shop Now</p>
</div>
</section>
The problem I think was you prevArrow and nextArrow values.
I've also added the SLICK SLIDER css in the <head>.
From the docs reference https://kenwheeler.github.io/slick/
string (html|jQuery selector) | object (DOM node|jQuery object)
<button type="button" class="slick-prev">Previous</button>
Allows you to select a node or customize the HTML for the "Previous" arrow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Slick slider css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
</head>
<body>
<section class="slickshow carousel">
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">
<h2>SUMMERTIME SAVINGS</h2>
<p>100s of Items On Sale!</p>
<p>Shop the Sale Now!</p>
</div>
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Another+One">
</div>
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">
<h2>MORE SAVINGS</h2>
<p>More Text Too!</p>
<p>Shop Now</p>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
jQuery(".slickshow").slick({
lazyLoad: 'ondemand',
slide: '.slide',
autoplay: true,
autoplaySpeed: 5000,
dots: true,
// string (html|jQuery selector) | object (DOM node|jQuery object)
prevArrow: '<button type="button" class="slick-next">❮</button>',
nextArrow: '<button type="button" class="slick-next">❯</button>',
speed: 1000,
fade: true,
cssEase: 'linear',
slidesToShow: 1,
adaptiveHeight: true,
swipe: true,
swipeToSlide: true,
infinite: true
});
});
// On swipe event
jQuery('.slickshow').on('swipe', function(event, slick, direction) {
console.log(direction);
// left
});
// On edge hit
jQuery('.slickshow').on('edge', function(event, slick, direction) {
console.log('edge was hit')
});
// On before slide change
jQuery('.slickshow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
console.log(nextSlide);
});
</script>
</body>
</html>
Hey guys I am new at web development and wanted to install owl carousel on the page but nothing happens. Here is the code I have:
<section class="showcase">
<div class="owl-carousel">
<div><img src="./9781471407956.jpg" alt=""></div>
<div><img src="./9781471407956.jpg" alt=""></div>
<div><img src="./9781471407956.jpg" alt=""></div>
<div><img src="./9781471407956.jpg" alt=""></div>
</div>
</section>
Then I have included the links in inside head tag as
<link rel="stylesheet" href="./OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="./OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css">
Finally, I included the javascript codes just before closing body:
<script src="./OwlCarousel2-2.3.4/docs/assets/vendors/jquery.min.js"></script>
<script src="./OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
I really need your help
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
items: 1,
margin: 10,
autoplay: true,
autoPlay: 3000,
nav: false,
dots: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
loop: true,
});
Then in style include
.owl-item {
float:left
}
I'm trying to use slick carousel to slide the year of a calendar but I can't make it work.
Here's what I want to make slide:
And this is my code:
document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML="<div>"+year+"</div><div class='slick'>"+meses[month-1]+"</div><div class='slick'><a style='color: #cccccc;' onclick='mostrarCalendario("+prevYear+","+prevMonth+")'><</a></div><div class='slick'><a style='color: #cccccc;' onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>></a></div><div class='slick'>"+meses[month-3]+"</div><div class='slick'>"+meses[month+1]+"</div><div class='slick'>"+meses[month-2]+"</div><div class='slick'>"+meses[month]+"</div>";
And when I use this part on my code, this don't work...
$('.slick').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 5,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
I wanted that when I click on < or > make the month to slide, but I can't.
Thank u very much.
Here I have the PHP code where is the library:
<!DOCTYPE html>
<html lang="es">
<head>
<script src="js/semanal.js"></script>
<script src="slick/slick.min.js"></script>
<link rel="stylesheet" href="slick/slick.css">
<meta charset="utf-8">
</head>
<body>
<center>
<table id="calendar">
<p>
<caption></caption>
<thead>
<tr>
<th>LUNES</th><th>MARTES</th><th>MIERCOLES</th><th>JUEVES</th><th>VIERNES</th><th>SABADO</th><th>DOMINGO</th>
</tr>
</thead>
<tbody>
<script>mostrarCalendario(actual.getFullYear(),actual.getMonth()+1);</script>
</tbody>
</table>
</center>
</body>
<script src="js/semanal.js"></script>
</html>
As you are appending you html with javascript, it may be that when slick loads, the content is not available yet, try putting $('.slick').slick() inside a setTimeOut() function. Also you have this line twice <script src="js/semanal.js"></script> and the second time it should be before the closing body tag, so fix that and also consider moving the rest of the scripts there (before the closing body tag).
EDIT
You need to put all your slides inside a single .slick element so you need to do something like this. Look at the changes i made to your markup
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="slick/slick.css">
</head>
<body>
<center>
<table id="calendar">
<caption>
<div class="slick"></div>
</caption>
<thead>
<tr>
<th>LUNES</th><th>MARTES</th><th>MIERCOLES</th><th>JUEVES</th><th>VIERNES</th><th>SABADO</th><th>DOMINGO</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</center>
<script src="slick/slick.min.js"></script>
<script src="js/semanal.js"></script>
<script>mostrarCalendario(actual.getFullYear(),actual.getMonth()+1);</script>
</body>
</html>
I moved this to different lines for readability, look that i removed the slick classes and made it find slick class and not caption tag
document.getElementById("calendar").getElementsByClass("slick")[0].innerHTML="<div>"+year+"</div>"+
"<div>"+meses[month-1]+"</div>"+
"<div><a style='color: #cccccc;' onclick='mostrarCalendario("+prevYear+","+prevMonth+")'><</a></div>"+
"<div><a style='color: #cccccc;' onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>></a></div>"+
"<div>"+meses[month-3]+"</div><div class='slick'>"+meses[month+1]+"</div><div class='slick'>"+meses[month-2]+"</div>"+
"<div>"+meses[month]+"</div>"
I want to create three carousels:
$(document).ready(function() {
$('#c1').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: true
});
$('#c2').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: false
});
$('#c3').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: false
});
});
But when i execute this code, this error message appears:
slick.min.js:17 Uncaught TypeError: Cannot read property 'add' of null
I also tried this here:
.not('.slick-initialized').slick()
Then it throws no error, but only the first carousel gets created.
Do you guys have any ideas?
Thanks for advance.
Seems like slickslider can't find an object it needs.
Make sure the your ID's (c1,c2,c3) exist in your code.
From the official slickslider-page(http://kenwheeler.github.io/slick/):
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
</body>
</html>
Make sure you don't call the slick() function twice on the same element aswell.
I will suggest another solution with single class or id if our settings are the same for each carousel we want to use:
$(document).ready(function(){
var myCarousel = $(".carousel");
myCarousel.each(function() {
$(this).slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: false
});
});
});
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.
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.