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>
Related
//Initialize slick slider
$(document).ready(function() {
$(".coverflow").slick({
dots: false,
arrows: true,
infinite: true,
centerMode: true,
centerPadding: '150px',
variableWidth: true,
focusOnSelect: true,
speed: 1000,
autoplay: true,
autoplaySpeed: 2500,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
}, ],
});
});
//add slick-center class to create the carousel effect
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-center').removeClass('slick-center');
$('.slick-slide').eq(nextSlide).addClass('slick-center');
})
//add the slick container class
;
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-center .slide-container').removeClass('slick-center');
$('.slick-slide').eq(nextSlide).find('.slide-container').addClass('slick-center');
});
//progress bar for slick slider
$(document).ready(function() {
var $slider = $('.coverflow');
var $progressBar = $('.progress');
var $progressBarLabel = $('.slider__label');
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc);
$progressBarLabel.text(calc + '% completed');
});
});
.progress {
max-width: 800px!important;
margin-right: auto;
margin-left: auto;
display: block;
width: 75%;
height: 3px;
border-radius: 3px;
overflow: hidden;
background-color: #5B5B5B;
background-image: linear-gradient(to right, #FA5927, #FA5927);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
margin-top: 55px;
}
.slide-number {
color: #FA5927;
font-family: 'PT SANS';
font-size: var(--wp--preset--font-size--medium)!important;
padding: 10px;
}
.slide-container {
margin-right: 50px;
margin-left: 50px;
}
#media only screen and (max-width:880px) {
/*--gallery slider--*/
.coverflow img {
width: 70%;
margin: auto;
}
}
#media only screen and (max-width:787px) {
/*--gallery slider--*/
.coverflow img {
width: 50%;
margin: auto;
}
}
#media only screen and (max-width:414px) {
/*--gallery slider--*/
.coverflow img {
width: 35%;
margin: auto;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="slider">
<section class="coverflow">
<div class="slide-container">
<span class="slide-number">01</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">02</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">03</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">04</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">05</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">06</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
</section>
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only">
</span>
</div>
<!-- end content -->
</div>
I created a slider with slick slide library. I used CenterPadding mode since I want that effect- with the center image. For some reason my slides are jumping slightly as it slides. Im not sure whats going on. I think its from the CenterPadding. But I need that affect and not sure what Im supposed to do now.
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
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>
I've created a slick carousel that when someone clicks a slide, it pops up (the whole carousel and its functionality).
The problem is that, at the moment, the pop up carousel is made up of images and I need it to have videos (iframes). Do you know how can I change it to have iframes instead of links (a href)?
This is my code :
HTML:
<section class="center slider">
<div class="single">
<a href="http://placehold.it/350x300?text=1">
<img src="http://placehold.it/350x300?text=1">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=2">
<img src="http://placehold.it/350x300?text=2">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=3">
<img src="http://placehold.it/350x300?text=3">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=4">
<img src="http://placehold.it/350x300?text=4">
</a>
</div>
</section>
CSS:
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
opacity: 0.5;
}
.slick-current {
opacity: 1;
}
JS:
$(document).on('ready', function() {
$('.center').slick ({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
mobileFirst: true
});
$('.center').slickLightbox({
slick: {
itemSelector: 'a',
navigateByKeyboard: true,
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
mobileFirst: true
}
});
});
External links:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css">
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.