Develop Reference

Why is my custom Slick slider not aligning and working properly on the website?

I have a modified Slick slider that has an overlay+text when hovering over each image. The slider, images, hover effect, etc. are working great on codepen.io but it does not work the same when I put it on the website. I am not sure why! The images should be displayed on 1 row with arrows/dots navigating to next image. And it should be resizing based on screen width (that's how its set up on codepen).
$('.slider').slick({
infinite: true,
speed: 800,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
dots: true,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
.slide,
.sliderimg {
width: 40%;
height: 40%;
}
.slick-next:before {
content: "→";
}
.slick-prev,
.slick-next {
z-index: 999;
}
.slick-next {
right: 0 !important;
}
.slick-prev {
left: 0 !important;
}
html,
body {
margin: 0;
padding: 0;
}
.main {
width: 100%;
text-align: center;
}
h2 {
font-family: "Poppins", sans-serif;
color: #000;
}
.slider {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide .sliderimg {
width: 100%;
}
.card {
position: relative;
background: #fff;
}
.card:hover {
background: rgb(253, 201, 154, 0.8);
}
.middle {
position: absolute;
visibility: hidden;
}
.card-content {
text-align: center;
color: #ccc;
}
.card-text {
font-size: 15px;
font-weight: 300;
}
.car:hover .sliderimg {
opacity: 0.1;
}
.card:hover .middle {
opacity: 3;
}
/* text on hover */
.car:hover .middle {
background-color: transparent;
color: black;
font-size: 16px;
position: absolute;
top: 47%;
padding: 10px 20px;
left: 35%;
visibility: visible;
}
/*dots*/
.slick-dots button {
display: block;
width: 16px;
height: 16px;
font-size: 0;
cursor: pointer;
font-size: 0;
box-sizing: border-box;
background: #e7dff4;
border-radius: 50%;
/*border: 2px solid #AE95DA;*/
}
.slick-dots button:hover,
.slick-dots .slick-active button {
background: #AE95DA;
opacity: 1;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css'>
<link rel="text/html" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="main">
<div class="slider">
<div class="car">
<div class="card">
<div class="card-header">
<img class="sliderimg" src="https://images.unsplash.com/photo-1657720209025-e7c1319c1147?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg0OTg1NzQ&ixlib=rb-1.2.1&q=80">
<div id="" class="middle">
<div class="text">Jane Smith<br/>CEO/Founder</div>
</div>
</div>
<div class="card-body">
<div class="card-content">
<div class="card-title"></div>
</div>
</div>
</div>
</div>
<div class="car">
<div class="card">
<div class="card-header">
<img class="sliderimg" src="https://images.unsplash.com/photo-1657720209025-e7c1319c1147?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg0OTg1NzQ&ixlib=rb-1.2.1&q=80">
<div class="middle">
<div class="text">Jennifer Spinner<br/>Company Director</div>
</div>
</div>
<div class="card-body">
<div class="card-content">
<div class="card-title"></div>
</div>
</div>
</div>
</div>
<div class="car">
<div class="card">
<div class="card-header">
<img class="sliderimg" src="https://images.unsplash.com/photo-1657720209025-e7c1319c1147?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg0OTg1NzQ&ixlib=rb-1.2.1&q=80" >
<div class="middle">
<div class="text">Samuel Stopper<br/>Finance Director</div>
</div>
</div>
<div class="card-body">
<div class="card-content">
<div class="card-title">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js'></script>
I have been trying to fix it for hours but with no success. Any help would be be greatly, greatly appreciated!! Thank you.

Tested your code in Xampp localhost and it works with some adjustments.
Our test: at codepen
We realigned the header info scripts so each is apparent (which is needed vs which is not needed). The following should be in header:
slick-carousel/1.8.1/slick.css
slick-carousel/1.8.1/slick-theme.css
2.1.3/jquery.min.js
slick-carousel/1.8.1/slick.js
Note that we are not sure if those other header scripts might be for some other stuff on your webpage that we're not aware of (that is not shown by you in the example provided).
No lower BUTTON will show when all three images are visible.
When two images are visible TWO lower buttons will show.
When one image is visible all THREEE lower buttons will show.
I temporarily added a "1,2,3" number on the overlay to see that we are on the correct overlay image in small screens.
To fix the click arrows (in original CSS or in custom.css):
.slick-slide (margin:0px) to give the click arrows '>' full visibility on page.
Or in a custom.css overwrite original code to bump the arrows ">" in a slight bit. These arrows show up on small screens when the three images are one visible image.
/*--custom bump arrows--*/
.slick-prev {margin-left:20px;}
.slick-next {margin-right:20px;}
Here is the first part of the JS we tried. You might need to adjust it for your needed width factors:
<script>
$('.slider').slick({
dots: true,
infinite: true,
speed: 800,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
autoplaySpeed: 2000,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: true

JS Slider with Stacked Slider for Navigation

I'm looking to build out a slider that auto cycles through individual slides, but also has a navigation that is stacked, and also a slider.
Like this:
The main issues I am running into are having that synced slider only show 1 "active" slide, and the navigation being stacked, and in it's own slider. As it auto plays through to "7" the slider on the bottom should slide over to show that one is active.
This is the closest I could hack together:
My code:
$('.slider-for').slick({
autoplay: true,
autoplaySpeed: 1000,
speed: 700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: false,
dots: false,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
autoplay: false,
autoplaySpeed: 9000,
speed: 700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 2,
rows: 3,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: true,
dots: true,
asNavFor: '.slider-for'
});
$('.slick').slick();
var $parent = $(".slider-for");
var $nav = $(".slider-nav");
var $content = $nav.find("div");
var killit = false;
$content.on("click", function(e) {
if (!killit) {
e.stopPropagation();
var idx = $(this).data("thumb");
$parent.slick("goTo", idx - 1);
}
});
$nav.on("beforeChange", function() {
killit = true;
}).on("afterChange", function() {
killit = false;
});
body {
background: gray;
}
.slider {
font-family: Arial;
width: 500px;
display: block;
margin: 0 auto;
}
.slider h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
.slider .action {
display: block;
margin: 100px auto;
width: 100%;
text-align: center;
}
.slider .action a {
display: inline-block;
padding: 5px 10px;
background: #f30;
color: #fff;
text-decoration: none;
}
.slider .action a:hover {
background: #000;
}
.slick-active {
border: 1px solid red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<div class="slider">
<div class="slider-for">
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
<div>
<h3>9</h3>
</div>
<div>
<h3>10</h3>
</div>
<div>
<h3>11</h3>
</div>
<div>
<h3>12</h3>
</div>
</div>
<div class="slider-nav">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>
</div>
View on jsFiddle

The asNavFor property works perfectly if both sliders have the same row property. But because you want the second slider to have three rows you have to use an own sync-function.
First you have to prepare the children of .slider-for: Give them data-thumb attributes like the children of .slider-nav have.
After that you can get the index of the shown slide of .slider-for with that data-thumb attribute
let for_index = $(this).find('.slick-current')[0].dataset.thumb;
and calculate with it the slide index for .slider-nav. Here you have to subtract 1 from for_index because it starts with 1 instead of 0 (like an index would do).
let nav_index = Math.floor((for_index - 1) / 3);
Then you goTo that index.
$('.slider-nav').slick('goTo', nav_index);
To get it to work you have to wrap all that in an event listener (and its handler). I used the setPosition event for that because it styles the current slide on init.
Working example: (simplified for demonstration)
I changed the red border to a brighter background because the border messed up the slider, even with box-sizing: border-box (the last slide was moved to a second, hidden row and therefor not visible).
I also removed autoplaySpeed and speed for .slider-nav because autoplay and fade are set to false.
$('.slider-for').slick({
autoplay: true,
autoplaySpeed: 1000,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
speed: 700,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: false,
dots: false
});
$('.slider-nav').slick({
autoplay: false,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 2,
rows: 3,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: true,
dots: true
});
$('.slider-for').on('setPosition', function() {
let for_index = $(this).find('.slick-current')[0].dataset.thumb;
let nav_index = Math.floor((for_index - 1) / 3);
$('.slider-nav').slick('goTo', nav_index);
$('.slider-nav .slick-slide').css('background-color', 'transparent');
$('.slider-nav .slick-slide[data-slick-index="' + nav_index + '"]').css('background-color', '#aaa');
});
body {
background: gray;
}
.slider {
font-family: Arial;
width: 500px;
display: block;
margin: 0 auto;
}
.slider h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
text-align: center;
transition-delay: 0s;
}
.slider .slick-dots li button::before {
font-size: 15px;
color: white;
}
.slider .slick-dots li.slick-active button::before {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<div class="slider">
<div class="slider-for">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>
<div class="slider-nav">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>

Slick slider transform issue on nav slider

I have a weird problem with slick slider where if I have less items than the slides to show in my nav and I am not on the first slide, if I then resize my screen, all slides before the active slide get hidden off screen.
In the example below, if you go to full screen, click on the second slide and then resize your browser, the first item in the nav slider disappears as slick transforms it out of view.
Is there a way to stop this?
$(".single-item").slick({
arrows: true,
dots: true,
fade: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
centerMode: false,
dots: false,
focusOnSelect: true,
infinite: false,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-item',
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
.slick-disabled {
cursor: not-allowed;
}
.navigation-item {
display: none;
}
.navigation-item .slick-track {
min-width: 100%;
}
#media screen and (min-width: 796px) {
.navigation-item {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='container'>
<div class='single-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
<div class='navigation-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
</div>
If I have more than the slides to show, it doesn't seem to move to the first slide in the nav - eg below I have 6 slides, and if I select 4 and resize, the 4 stays where it is in the nav and doesn't move to the beginning:
$(".single-item").slick({
arrows: true,
dots: true,
fade: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
centerMode: false,
dots: false,
focusOnSelect: true,
infinite: false,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-item',
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
.slick-disabled {
cursor: not-allowed;
}
.navigation-item {
display: none;
}
.navigation-item .slick-track {
min-width: 100%;
}
#media screen and (min-width: 796px) {
.navigation-item {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='container'>
<div class='single-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</div>
<div class='navigation-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</div>
</div>
It also didn't happen in earlier versions of slick - eg in the code below using v 1.5.9, it seems to work ok (but I cannot revert to this version as we are using some features in the new slider that aren't present in the old one)
$(".single-item").slick({
arrows: true,
dots: true,
fade: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
centerMode: false,
dots: false,
focusOnSelect: true,
infinite: false,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-item',
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css');
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
.slick-disabled {
cursor: not-allowed;
}
.navigation-item {
display: none;
}
.navigation-item .slick-track {
min-width: 100%;
}
#media screen and (min-width: 796px) {
.navigation-item {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class='container'>
<div class='single-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
<div class='navigation-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
</div>

Newer version of slick-carousel applies transform: translate3d(-127px, 0px, 0px); on .slick-track inside .navigation-item, although it's not entirely clear why it does this.
Solution (more of a hack) is to force transform: translate3d(0, 0, 0); on .slick-track:
$(".single-item").slick({
arrows: true,
dots: true,
fade: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
centerMode: false,
dots: false,
focusOnSelect: true,
infinite: false,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-item',
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
.slick-disabled {
cursor: not-allowed;
}
.navigation-item {
display: none;
}
.navigation-item .slick-track {
min-width: 100%;
transform: translate3d(0, 0, 0)!important;
}
#media screen and (min-width: 796px) {
.navigation-item {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='container'>
<div class='single-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
<div class='navigation-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
</div>

Slick Slider Center Mode doesnt work

I use the Center Mode from the Slick Slider. Now i have the problem that i want the slider in full width and that the centered Image is much larger than the slides. I added a image from the template:
Slider Template
My site ist hosted on: http://be-virtual.org/schnittchen/
My Code is the following
Javascript:
$(document).on('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
}
}
]
});
});
.slick-center .slide-h3{
color: #FFF;
}
.slider{
width: 600px;
height:150px;
margin: 20px auto;
text-align: center;
}
.slider button {
background: #000;
}
.slider button:hover button:active button:visited {
background: #000;
}
.slide-h3{
margin: 10% 0 10% 0;
padding: 40% 20%;
background: #008ed6;
}
.slider div{
margin-right: 5px;
}
.slick-slide{
opacity: .6;
}
.slick-center{
display: block;
max-width: 10% !important;
max-height:20% !important;
opacity: 1;
}
<section class="center slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
Sorry iam new at the coding and new in this community. Please have some
patience and indulgence.

upgrade your slick min js file use latest version
http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js

Well for starters your jquery setup is wrong. It should begin with $(document).ready(function(){ and not $(document).on('ready', function() {. In your CSS it looks like you have set a width to the slideshow but not to the images themselves, is that correct? In that case, try setting the images to the same fixed width as your slideshow.

Why the play stop pause buttons and progressBar are not displaying at all?

This is the jsfiddler for it the issue is with the big images i wanted to add the buttons play stop pause and the progressbar on the big images: JSFiddler
When i'm doing inspect element i don't see any errors in red.
I took the code of this jquery: Automatic slideshow with a timer, play-, pause-, previous- and next-
And before it i used the coolcarousels this jquery: Cool responsive image slider with thumbnail carousel
Cool responsive image slider
And this is the code i have now:
In the html file:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="carousel.css">
<link rel="stylesheet" type="text/css" href="glow-effect.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js" type="text/javascript"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script src="java_script.js"></script>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.container {
background: rgb(170, 187, 97); /* Fallback */
background: rgba(170, 187, 97, 0.5);
}</style>
</head>
<body>
<div>TODO write content</div>
<div id="wrapper">
<div id="carousel-wrapper">
<img id="shadow" src="img/gui/carousel_shadow.png" />
<div id="inner">
<div id="carousel">
<span id="pixar"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" /></span>
<span id="bugs"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005712.Gif" /></span>
<span id="cars"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif" /></span>
<span id="incred"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000009.Gif" /></span>
<span id="monsters"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000007.Gif" /></span>
<span id="nemo"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005720.Gif" /></span>
<span id="radar"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif" /></span>
<span id="rat"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003137.Gif" /></span>
<span id="toystory"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000005.Gif" /></span>
<span id="up"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003138.Gif" /></span>
<span id="walle"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000006.Gif" /></span>
<div id="navi">
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
</div>
</div>
<div id="thumbs-wrapper">
<div id="thumbs">
<img src="img/small/pixar.jpg" />
<img src="img/small/bugs.jpg" />
<img src="img/small/cars.jpg" />
<img src="img/small/incred.jpg" />
<img src="img/small/monsters.jpg" />
<img src="img/small/nemo.jpg" />
<img src="img/small/radar002665resized.jpg" />
<img src="img/small/rat.jpg" />
<img src="img/small/toystory.jpg" />
<img src="img/small/up.jpg" />
<img src="img/small/walle.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
<div class="carousel">
<div class="container">Lorem ipsum dolor</div>
<div class="container">Lorem ipsum_for_testing dolor</div>
</div>
</body>
</html>
I added to the html file this part:
<div id="inner">
And
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
Then the javascript file:
$(function() {
$('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
responsive: true,
circular: false,
auto: true,
infinite: true,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll',
pauseOnHover: true,
duration: 500
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
});
And the css file:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: url(img/gui/bg_glare.png) top center no-repeat #bcc;
}
html > body {
min-height: 600px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
position: absolute;
width: 50%;
left: 25%;
top: 50px;
}
#carousel-wrapper {
padding-bottom: 10px;
position: relative;
}
#carousel, #thumbs {
overflow: hidden;
}
#carousel-wrapper .caroufredsel_wrapper {
border-radius: 10px;
box-shadow: 0 0 5px #899;
}
#carousel span, #carousel img,
#thumbs a, #thumbs img {
display: block;
float: left;
}
#carousel span, #carousel a,
#thumbs span, #thumbs a {
position: relative;
}
#carousel img,
#thumbs img {
border: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#carousel img.glare,
#thumbs img.glare {
width: 102%;
height: auto;
}
#carousel span {
width: 554px;
height: 313px;
}
#thumbs-wrapper {
padding: 20px 40px;
position: relative;
}
#thumbs a {
border: 2px solid #899;
width: 150px;
height: 100px;
margin: 0 10px;
overflow: hidden;
border-radius: 10px;
-webkit-transition: border-color .5s;
-moz-transition: border-color .5s;
-ms-transition: border-color .5s;
transition: border-color .5s;
}
#thumbs a:hover, #thumbs a.selected {
border-color: #566;
}
#wrapper img#shadow {
width: 100%;
position: absolute;
bottom: 0;
}
#prev, #next {
background: transparent url('img/gui/carousel_nav.png') no-repeat 0 0;
display: block;
width: 19px;
height: 20px;
margin-top: -10px;
position: absolute;
top: 50%;
}
#prev {
background-position: 0 0;
left: 10px;
}
#next {
background-position: -19px 0;
right: 10px;
}
#prev:hover {
background-position: 0 -20px;
}
#next:hover {
background-position: -19px -20px;
}
#prev.disabled, #next.disabled {
display: none !important;
}
In the css file i didn't change the code in the javascript file i added:
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
And
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
The first jquery of the carousel is still working fine the second link.
But the new one with the play stop pause buttons i don't see them at all.
What i mean is something like this and somehow also to change the colors of the buttons play stop pause to fit the color of the big images maybe something more light or transparent color.
And the pause stop play should handle the big images not the small ones.