Slick carousel pop up - use iframes instead of links (a)

Slick carousel pop up - use iframes instead of links (a) - javascript

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">

Related

Slick slider jumping?

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

Slick Slider not showing up within Bootstrap5 Tab content

I'm trying to use the slick slider with Bootstrap5 Nav, somehow the slider is not showing up within the active tab content unless I resize the window. I've tried to arrange the sequence of embedded JavaScript, and the slider got broken instead.
It works fine with pure text but not slick slider, the problem seems to be JavaScript of Bootstrap and Slick.
Here's my code: https://codepen.io/HarperJ/pen/XWqrBem
Thanks in advance.
HTML:
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-8">
<ul class="nav solution_nav mb-5">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab_1" type="button"
role="tab" aria-selected="false">TAB 1</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab_2" type="button" role="tab"
aria-selected="false">TAB 2</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_1" role="tabpanel">
<div class="slider slider-for">
<img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
</div>
<div class="slider slider-nav">
<img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
</div>
</div>
<div class="tab-pane fade" id="tab_2" role="tabpanel">
<div class="slider slider-for2">
<img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
</div>
<div class="slider slider-nav2">
<img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*,
*::before,
*::after {
box-sizing: border-box;
/* outline: 1px solid green; */
}
img {
max-width: 100%;
height: auto;
display: block;
}
.solution_nav .nav-link {
border: none;
background: none;
cursor: pointer;
position: relative;
color: #ddd;
padding: 16px 40px;
}
.solution_nav .nav-link.active{
color: #343434;
border-bottom: 1px solid #343434;
}
JS:
$(document).ready(function(){
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
// centerMode: true,
centerMode: false,
focusOnSelect: true,
dots: false,
arrows: false
});
$('.slider-for2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav2'
});
$('.slider-nav2').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for2',
dots: true,
// centerMode: true,
centerMode: false,
focusOnSelect: true,
dots: false,
arrows: false
});
})

You need to attach the slick to an event after the tab is shown, otherwise the element doesn't necessarily exists. The proper event is shown.bs.tab. I have set up an example to convey the idea. It isn't generalized enough, but it works.
var did_init_tab_2 = false;
const tabEl = document.querySelector('[data-bs-target="#tab_2"]')
tabEl.addEventListener('shown.bs.tab', event => {
if (did_init_tab_2) {
return;
}
did_init_tab_2 = true;
$('.slider-for2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
})
$(document).ready(function() {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
})
*,
*::before,
*::after {
box-sizing: border-box;
/* outline: 1px solid green; */
}
img {
max-width: 100%;
height: auto;
display: block;
}
.solution_nav .nav-link {
border: none;
background: none;
cursor: pointer;
position: relative;
color: #ddd;
padding: 16px 40px;
}
.solution_nav .nav-link.active {
color: #343434;
border-bottom: 1px solid #343434;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></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.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-8">
<ul class="nav solution_nav mb-5">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab_1" type="button" role="tab" aria-selected="false">TAB 1</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab_2" type="button" role="tab" aria-selected="false">TAB 2</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_1" role="tabpanel">
<div class="slider slider-for">
<img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
</div>
</div>
<div class="tab-pane fade" id="tab_2" role="tabpanel">
<div class="slider slider-for2">
<img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
</div>
</div>
</div>
</div>
</div>
</div>

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's carousel space between images

Explanation
I'm using Ken Wheeler's plugin, Slick, in order to create this carousel, but for some reason, the images inside <a> tag doesn't have a equal distance between themselves; some of them are even overlapping. Is there anything that solves it?
Code
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2
}
}
]
});
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
</head>
<body>
<div class='container'>
<div class='carousel'>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
Thanks in advance,
Luiz.

$('.carousel').slick({
variableWidth: true,
...
});
variableWidth allows to use slides with different width.
To add space between slides via css you can use this:
.slick-slide {margin-right: 20px;}

The problem is that your images are shown on their original size, which can be bigger than the size of the slides.
Making the a and img fit the slides gets rid of the overlap. You can of course tweak this to have some space between the slides, center the images vertically, et cetera.
Original, but make all images fill slides
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2
}
}
]
});
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}
/* new */
a, img {
display: block;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
</head>
<body>
<div class='container'>
<div class='carousel'>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
Original, but make all images fill slides and insert space
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2
}
}
]
});
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}
/* new */
a {
display: block;
width: 100%;
height: 100%;
}
img {
display: block;
width: 90%;
height: 100%;
margin: 0 5%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
</head>
<body>
<div class='container'>
<div class='carousel'>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/kkVWQR4.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/RRWm3lB.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/2f2pUHi.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/7TSiIkS.jpg" alt="">
</div>
<div>
<img src="http://i.imgur.com/dXxnAnC.jpg" alt="">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
Original, but use CSS background-image and margin
This makes images fill the available space and inserts space between the images.
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 2
}
}]
});
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}
/* new */
.container .slick-slide {
height: 50px;
margin: 0 10px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<div class='container'>
<div class='carousel'>
<div style="background-image: url('http://i.imgur.com/kkVWQR4.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/kkVWQR4.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
Original, but use CSS background-image (contain) and margin
This makes images fit in the available space and inserts space between the images.
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 2
}
}]
});
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}
/* new */
.container .slick-slide {
height: 50px;
margin: 0 10px;
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<div class='container'>
<div class='carousel'>
<div style="background-image: url('http://i.imgur.com/kkVWQR4.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/kkVWQR4.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/RRWm3lB.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/2f2pUHi.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/7TSiIkS.jpg');">
</div>
<div style="background-image: url('http://i.imgur.com/dXxnAnC.jpg');">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

Carousel with zooming of current slide

I used the Slick.js to make a carousel just like on a picture, but I failed (
Does anybody knows any way to make a carousel just like on a picture? There should be a different width of slides, animation, and a current slide must have a bigger size
What I need to do:
What I have now - https://jsfiddle.net/fiter92/xL5qezxy/
jQuery(document).ready(function($){
$('.carousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
arrows: false,
centerMode: true,
centerPadding: '60px',
variableWidth: true
});
$('.carousel-nav').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: true,
appendArrows: '.carousel-arrows',
prevArrow: '<span class="carousel-prev"><-</span>',
nextArrow: '<span class="carousel-next">-></span>',
asNavFor: '.carousel',
});
});
.slick-slide {
padding: 20px;
}
.slick-current img {
width: 120%;
max-width: none;
}
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="carousel">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=1" alt="">
</div>
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=2" alt="">
</div>
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=3" alt="">
</div>
<div>
<img src="http://dummyimage.com/800x400/000/fff&text=4" alt="">
</div>
<div>
<img src="http://dummyimage.com/400x400/000/fff&text=5" alt="">
</div>
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=6" alt="">
</div>
</div>
<div class="carousel-nav">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
<div class="carousel-arrows">
</div>

Since you are using center mode you can add a transform of scale to the slide that gets the class slick-center. Then to animate the scale effect, you can add a transition to the slick-slide class.
.carousel .slick-slide {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.carousel .slick-center {
-webkit-transform: scale(1.8);
transform: scale(1.8);
}

Develop Reference

JavaScript is the programming language of the Web.

Slick carousel pop up - use iframes instead of links (a) - javascript

Related

Slick slider jumping?

Slick Slider not showing up within Bootstrap5 Tab content

JS Slider with Stacked Slider for Navigation

Slick's carousel space between images

Carousel with zooming of current slide

Categories

Resources